[Solved] Need GridCheckBoxColumn to behave similar to GridClientSelectColumn

[Manuel Ortiz]

Hello,

I have a programatically created grid in which one of the columns is a GridCheckBoxColumn that is bound to a boolean column from my dataset (named "IsExcluded").  I would like to be able to select or deselect the row's checkbox belonging to said column without going into edit mode for the selected row.  Also whenever a checkbox is pressed, I would like to postback and write the changes to my database, so I should be able to catch such event on server side.  In other words, I cannot use the GridClientSelectColumn since it does not show if a checkbox is already checked (boolean = 1) on my database since it does not bind to its datafield.  Neither can I use the idea shown in this demo (http://demos.telerik.com/aspnet-ajax/grid/examples/programming/selectrowwithcheckbox/defaultcs.aspx) due to limitations in our design and the way the grid and its items are generated. 

Therefore, what I need (sort of) is for the row to go into inline edit mode without having to press the edit button and executing the edit whenever the user changes the checked value in the checkbox.

Is that possible? Do you have any ideas?? I have spent more than 15 hours trying to solve this with no avail :( :( :(

Thanks in advance,
Manuel

[Shinu]

Hi Manuel,

One suggestion would be adding GridTemplateColumn with CheckBox as ItemTemplate. In the CheckedChanged event of CheckBox, you can put the row in editmode and update the corresnding value to database. Here is the example of how this can be done.

ASPX:

<telerik:GridTemplateColumn UniqueName="GridTemplateColumn1" HeaderText="Copy?">
    <ItemTemplate>
        <asp:CheckBox ID="chkCopyEmail" runat="server"  TextAlign="Right"
            Text="Email" AutoPostBack="True"  Checked='<%# DataBinder.Eval (Container.DataItem,"isExcluded").ToString()!="True"?true:false %>'
            oncheckedchanged="chkCopyEmail_CheckedChanged" />
    </ItemTemplate>
</telerik:GridTemplateColumn>

C#:

protected void chkCopyEmail_CheckedChanged(object sender, EventArgs e)
{
    GridDataItem item = (GridDataItem)(sender as CheckBox).NamingContainer; //item is the row where the checkbox (that invoked the event) resides
    item.Edit = true; // Putting row in editmode
    // Update database
}

Hope this would help you to get started,
Shinu.

[Parth]

Hey Shinu,

Sorry to hijack, i'm doing exactly the same as the original poster.  However the OnCheckChanged event is not firing for me on the server side, when you click the checkbox.  When something else causes a postback it is firing the even though.  Any idea what it might be?

<telerik:RadAjaxManager ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoadingPanel1"
            runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:radajaxloadingpanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"
            InitialDelayTime="10" MinDisplayTime="10" Width="75px">
            <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
                style="border: 0px;" />
        </telerik:radajaxloadingpanel>

<telerik:RadGrid ID="RadGrid1" runat="server" EnableViewState="False" GridLines="None"
AllowPaging="True" AllowSorting="True" Skin="Web20" OnNeedDataSource="RadGrid1_NeedDataSource" AutoGenerateColumns="False"
 OnInit="RadGrid1_Init" PageSize="30" Height="470px" HorizontalAlign="Center" Width="690px">
    <MasterTableView  DataKeyNames="StudentID" ClientDataKeyNames="StudentID" CommandItemDisplay="Top" >
    <RowIndicatorColumn>
        <HeaderStyle Width="20px" />
    </RowIndicatorColumn>
     <Columns>
            <telerik:GridBoundColumn HeaderText="StudentID" DataField="StudentID" Visible="False" UniqueName="StudentID">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="SSID" HeaderText="Student ID" UniqueName="column5" DataType="System.Int64"  >
             <HeaderStyle Width="70px" />
            <ItemStyle Width="70px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Grade" HeaderText="Grade" UniqueName="column1" >
            <HeaderStyle Width="60px" />
            <ItemStyle Width="60px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="LastName" HeaderText="Last Name" UniqueName="column2" >
             <HeaderStyle Width="120px" />
            <ItemStyle Width="120px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="FirstName" HeaderText="First Name" UniqueName="column3" >
             <HeaderStyle Width="120px" />
            <ItemStyle Width="120px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="IEP" HeaderText="IEP" UniqueName="column6" DataType="System.Boolean"  >
             <HeaderStyle Width="50px" />
            <ItemStyle Width="50px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="EligibleREA" HeaderText="Eligible Reading" UniqueName="column7" >
             <HeaderStyle Width="70px" />
            <ItemStyle Width="70px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="EligibleMath" HeaderText="Eligible Math" UniqueName="column8" >
             <HeaderStyle Width="70px" />
            <ItemStyle Width="70px" />
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn UniqueName="GridTemplateRegister" DataField="Registered" HeaderText="Registered">
            <ItemTemplate>
                <asp:CheckBox ID="chkRegistered" runat="server"  TextAlign="Right"   OnCheckedChanged="chkRegistered_CheckedChanged"
                     AutoPostBack="True"  Checked='<%#Bind("Registered") %>' />
            </ItemTemplate>
            <HeaderStyle Width="70px" />
            <ItemStyle Width="70px" />
            </telerik:GridTemplateColumn>
        </Columns>
        <CommandItemTemplate>
            <asp:LinkButton Style="vertical-align: bottom" ID="btnAdd" runat="server"
               OnClientClick="javascript:return AddStudent();"> <img style="border:0px" alt="" src="images/addstudent.gif" />Add Student Record</asp:LinkButton>

        </CommandItemTemplate>

    </MasterTableView>
        <ClientSettings >
            <ClientEvents  />
            <Scrolling AllowScroll="True" UseStaticHeaders= "True"/>
            </ClientSettings>
     <PagerStyle Mode="NumericPages" PageButtonCount="20" />
     </telerik:RadGrid>

        protected void chkRegistered_CheckedChanged(object sender, EventArgs e)
        {
            CheckBox chkbx = (CheckBox)sender;
            GridDataItem item = (GridDataItem)(sender as CheckBox).NamingContainer; //item is the row where the checkbox (that invoked the event) resides

            // Update database

        }

Thanks,
Parth