asp.net - Implementing a Red Cross -Check Box in the Selection Column of the ASPxGridView or general GridView

Question

I am currently using DevExpress ASPxGridView and want the selection check box to show a redcross image on selection or empty when unselected. Is there any javascript library to do such a thing. If so can you provide me an example.

Pelase make sure that your solution would not hinder me to perform Callbacks on SelectionChanged Event.

Note: You may give me solutions for general GridView or ASPxGridView.

Answer 1

好的，伙计们，我认为这是最好的方法。

您可以切换选择命令按钮的图像。

<dx:ASPxGridView ID="ChildGridView" runat="server" KeyFieldName="Log_ID" OnCommandButtonInitialize="ChildGrid_CommandButtonInitialize" OnCustomCallback="ChildGridView_CustomCallback" Width="100%" OnHtmlRowPrepared="ChildGridView_HtmlRowPrepared">

                            <Settings showcolumnheaders="false" gridlines="None"  ShowStatusBar="Hidden" ShowPreview="true" ShowTitlePanel="false"  />
                            <SettingsPager ShowEmptyDataRows="false" Visible="false"></SettingsPager>
                            <Paddings Padding="0px" />
                            <Border BorderWidth="0px" BorderColor="#cccccc"  BorderStyle="None" />
                            <settingsbehavior  />
                            <clientsideevents selectionchanged="function(s,e){                                                                                                                                                                                                
                                                                s.PerformCallback(e.visibleIndex);
                            }" />

                            <Columns>                          
                            <dx:GridViewCommandColumn ButtonType="Image" ShowSelectCheckbox="false" Name="IsChecked">                              
                             <SelectButton  Visible="true" >                               
                               </SelectButton>
                            </dx:GridViewCommandColumn>

                            <dx:GridViewDataTextColumn FieldName="Log_ID" Caption="Log_ID" Visible="false" />
                            <dx:GridViewDataTextColumn FieldName="Message" Caption="Messages" />
                            <dx:GridViewDataTextColumn FieldName="IsRuleBad" Caption="IsRuleBad" Visible="false" />
                            <dx:GridViewDataTextColumn FieldName="Pending_MainTrade_ID" Caption="MainTradeId" Visible="false" />
                            </Columns>
                        </dx:ASPxGridView>

代码背后：

 protected void ChildGrid_CommandButtonInitialize(object sender, DevExpress.Web.ASPxGridView.ASPxGridViewCommandButtonEventArgs e)
    {
        string appPath = HttpContext.Current.Request.ApplicationPath;

        ASPxGridView childGrid = sender as ASPxGridView;

        if (e.ButtonType != DevExpress.Web.ASPxGridView.ColumnCommandButtonType.Select) return;
        bool isRowSelected = childGrid.Selection.IsRowSelected(e.VisibleIndex);
        if (isRowSelected)
        {
            e.Image.Url = appPath + "/images/votedown.png";

        }
        else
        {
            e.Image.Url = appPath + "/images/voteup.png";
        }

    }