AspxGrid模板列中Checkbox 值在用戶端的處理

 前一篇文章用的是伺服器模式，如果改用用戶端模式，則也不能取到Items中的關於資料的行.

本文主要講述的是使用用戶端模式，在用戶端和伺服器都能訪問模板列中定義的CHECKBOX的值.

aspxgrid的定義

           <dxwg:ASPxGrid runat="server" AutoGenerateColumns="False" Width="592px" ID="ASPxGrid2"
                    TabIndex="0" DataKeyField="OID" NavigatorIndent="1px" PageSize="0" Height="295px" >

 <Columns>
                        <dxwg:BoundTemplateColumn VisibleIndex="0" DataField="Chk" HeaderText="選中" Width="53px">
                            <EditItemStyle HorizontalAlign="Center"></EditItemStyle>
                            <ItemTemplate>
                                <asp:CheckBox ID="CheckBox2" runat="server"></asp:CheckBox>
                            </ItemTemplate>
                            <ItemStyle HorizontalAlign="Center"></ItemStyle>
                            <EditItemTemplate>
                                <asp:CheckBox ID="CheckBox1" runat="server"></asp:CheckBox>
                            </EditItemTemplate>
                        </dxwg:BoundTemplateColumn>
                        <dxwg:BoundColumn DataField="OID" Visible="False">
                        </dxwg:BoundColumn>
                        <dxwg:BoundColumn DataField="GoodKind" Visible="False">
                        </dxwg:BoundColumn>
                        <dxwg:BoundColumn HeaderText="類型" DataField="KindName" VisibleIndex="1" Width="124px"
                            ReadOnly="True">
                        </dxwg:BoundColumn>
                        <dxwg:BoundColumn HeaderText="品名" DataField="ProductID" VisibleIndex="2" Width="124px"
                            ReadOnly="True">
                        </dxwg:BoundColumn>
                        <dxwg:BoundColumn HeaderText="規格" DataField="GoodStyle" VisibleIndex="3" Width="124px"
                            ReadOnly="True">
                        </dxwg:BoundColumn>
                        <dxwg:BoundColumn HeaderText="單位" DataField="Unit" VisibleIndex="4" Width="50px"
                            ReadOnly="True">
                        </dxwg:BoundColumn>
                        <dxwg:BoundColumn HeaderText="長度(米)" DataField="Length" VisibleIndex="5" Width="87px"
                            ReadOnly="True">
                        </dxwg:BoundColumn>
                    </Columns>

</dxwg:aspxgrid>

上面紅色的是定義的一個綁定模板列，要根據綁定上來的值來處理checkbox的狀態，需要我們自己來處理網格的呈現。因此要增加如下的代碼,下面的CHK是一個列名。主要用於定義綁定網格時，儲存格如何顯示及取值時的處理

 <ClientSideEvents>
                        <BindCell>
                            function(source,e){ if(e.column.GetDataControllerColumn().GetName() == "Chk"){ var
                            checkBox = ASPxClientUtils.GetChildByTagName(e.htmlElement, "INPUT", 0); checkBox.checked
                            = e.row.GetDataControllerRow().GetValueByColumnName("Chk"); checkBox.onclick = new
                            Function("OnCheckBoxChanged(this, '" + e.row.GetKeyValue() + "')"); } }</BindCell>
                        <GetEditValue>
                            function(source,e){ if(e.column.GetDataControllerColumn().GetName() == "Chk"){ var
                            checkBox = ASPxClientUtils.GetChildByTagName(e.htmlElement, "INPUT", 0); e.row.GetDataControllerRow().SetValueByColumnName("Chk",
                            checkBox.checked); } }</GetEditValue>
                        <BindEditCell>
                            function(source,e){ if(e.column.GetDataControllerColumn().GetName() == "Chk"){ var
                            checkBox = ASPxClientUtils.GetChildByTagName(e.htmlElement, "INPUT", 0); checkBox.checked
                            = e.row.GetDataControllerRow().GetValueByColumnName("Chk"); } }</BindEditCell>
                    </ClientSideEvents>

在checkbox選中後，還要同步checkbox和綁定的列的值，因此要加一段處理代碼OnCheckBoxChanged

function OnCheckBoxChanged(sender, key){

//  ctl00_phContent_ASPxGrid2為頁面中網格控制項的ID，要看你具體的頁面
    ctl00_phContent_ASPxGrid2.BeginUpdate();
    var savedFocusedRow = ctl00_phContent_ASPxGrid2.GetFocusedRow();
    var row = ctl00_phContent_ASPxGrid2.GetRowByKeyValue(ctl00_phContent_ASPxGrid2.GetGroupCount(), key);
    ctl00_phContent_ASPxGrid2.EditRow(row);
    row.GetDataControllerRow().SetValueByColumnName("Chk", sender.checked);
    ctl00_phContent_ASPxGrid2.Post();
    ctl00_phContent_ASPxGrid2.SetFocusedRow(savedFocusedRow);
    ctl00_phContent_ASPxGrid2.EndUpdate();
    event.cancelBubble = true;
   }

用戶端的代碼差不多了，在伺服器只要綁定資料上來就行了。資料只要包含在列中定義的那些欄位就行。

不過當回傳到伺服器後，還有一點點的小bug,就是當一個checkbox選中後，再去點它，相當沒有選，可是到伺服器後顯示的卻是它的狀態已改變了，如綁定的是datatable,則調用datatable.getchanges(),還是可以擷取選中的行，而實際上，我們卻沒有選中。在aspxgrid 的updatecommand事件中也表現為如些。

因此建立對資料來源進行迴圈判斷來達到檢測使用者是否選取的目的。