DevExpress社のASPxTreeViewを利用して、サーバー側のノード選択イベント処理を実装する

DevExpress社のASPxTreeViewでは、サーバー側のノード選択イベント処理が存在しない。
そこで、クライアント側のイベント処理などを利用して、サーバー側のノード選択イベントを実装する際のメモ。

処理概要は以下の通り

サーバー側のノード選択イベント用のダミーコールバックパネルを準備する。
ASPxTreeViewにクライアント側のノードクリックイベント処理を実装
ノードクリック時に、コールバックを呼び出し
サーバー側で、選択されたノードの情報を保持

TreeViewTest.ascx.cs

ASPxTreeViewを含むコントロールを作成する。ダミーコールバックパネルの中身は空にする
ダミーコールバックのクライアント側のイベント処理を実装する

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TreeViewTest.ascx.cs" Inherits="TreeViewTest" %>
<script type="text/javascript">
    function OnEndCallback(s, e) {
        if (s.cp_command_name == "NodeSelected") {
            //何もしない
        }
    }

    function OnTreeNodeClick(s, e) {
        // ノードクリック時に、コールバックを呼び出し
        var node = TreeView.GetSelectedNode();
        CallbackTreeView.PerformCallback('CommandName=NodeSelected&SelectedLayerId=' + node.name);
    }
</script>

<dx:ASPxCallbackPanel ID="CallbackMapEdit" runat="server" HideContentOnCallback="False"
    ClientInstanceName="CallbackMapEdit" OnCallback="OnCallbackEdit">
    <ClientSideEvents EndCallback="OnEndCallback"></ClientSideEvents>
    <PanelCollection>
        <dx:PanelContent ID="PanelContent3" runat="server">
            <dx:ASPxTreeView ID="TreeView" runat="server" ClientInstanceName="TreeView" AllowCheckNodes="True"
                AllowSelectNode="True" Theme="Moderno" Width="100%" EnableCallBacks="True" EnableClientSideAPI="True"
                EnableNodeTextWrapping="false" AutoPostBack="false"
                Height="100%">
                <ClientSideEvents NodeClick="OnTreeNodeClick" />
            </dx:ASPxTreeView>
        </dx:PanelContent>
    </PanelCollection>
</dx:ASPxCallbackPanel>
<dx:ASPxCallbackPanel ID="CallbackTreeView" runat="server" HideContentOnCallback="False"
    ClientInstanceName="CallbackTreeView" OnCallback="OnCallbackEdit">
    <ClientSideEvents EndCallback="OnEndCallback"></ClientSideEvents>
</dx:ASPxCallbackPanel>

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TreeViewTest.ascx.cs" Inherits="TreeViewTest" %>

function OnEndCallback(s, e) {

if (s.cp_command_name == "NodeSelected") {

//何もしない

}

function OnTreeNodeClick(s, e) {

// ノードクリック時に、コールバックを呼び出し

var node = TreeView.GetSelectedNode();

CallbackTreeView.PerformCallback('CommandName=NodeSelected&SelectedLayerId=' + node.name);

}

</script>

<dx:ASPxCallbackPanel ID="CallbackMapEdit" runat="server" HideContentOnCallback="False"

ClientInstanceName="CallbackMapEdit" OnCallback="OnCallbackEdit">

<dx:PanelContent ID="PanelContent3" runat="server">

<dx:ASPxTreeView ID="TreeView" runat="server" ClientInstanceName="TreeView" AllowCheckNodes="True"

AllowSelectNode="True" Theme="Moderno" Width="100%" EnableCallBacks="True" EnableClientSideAPI="True"

EnableNodeTextWrapping="false" AutoPostBack="false"

Height="100%">

</dx:ASPxTreeView>

</dx:PanelContent>

</PanelCollection>

</dx:ASPxCallbackPanel>

<dx:ASPxCallbackPanel ID="CallbackTreeView" runat="server" HideContentOnCallback="False"

ClientInstanceName="CallbackTreeView" OnCallback="OnCallbackEdit">

</dx:ASPxCallbackPanel>

TreeViewTest.cs

サーバー側で、選択されたノードの情報を保持

    public partial class TreeViewTest :  System.Web.UI.UserControl
    {
        protected void OnCallbackEdit(object sender, CallbackEventArgsBase e)
        {
            var parameters = AspxUtil.GetCallbackParameters(e.Parameter);
            if (parameters["CommandName"] == "NodeSelected")
            {
                this.Session["SelectedLayerId"] = parameters["SelectedLayerId"];
            }
        }
        public static Dictionary<string, string> GetCallbackParameters(string parameter)
        {
            var parameter2 = parameter;
            if (parameter.StartsWith("c0:"))
            {
                parameter2 = parameter.Split(':')[1];
            }

            var parameters = new Dictionary<string, string>();
            var keyVals = parameter2.Split('&');
            foreach (var keyVal in keyVals)
            {
                if (keyVal.Split('=').Length == 2)
                {
                    var key = keyVal.Split('=')[0];
                    var val = keyVal.Split('=')[1];
                    parameters.Add(key, val);
                }
            }

            return parameters;
        }
    }