This is a migrated thread and some comments may be shown as answers.

How to save CheckBox column on a RadGrid

4 Answers 302 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Herman Gouw asked on 01 Jun 2010, 03:27 PM

Hi,

In my current project, I have a RadGrid having 2 CheckBoxes similar to the following:

RadGrid with CheckBoxes

The code is given as follows:

ASPX

                    <body>         
                <form id="form1" runat="server">         
                <div>         
                    <telerik:RadScriptManager ID="radScriptManager" runat="server" />         
                    <telerik:RadGrid ID="radGrid" AutoGenerateColumns="false" AllowMultiRowEdit="true" AllowPaging="true" AllowSorting="true" PageSize="10" OnNeedDataSource="radGrid_NeedDataSource" OnPreRender="radGrid_PreRender" runat="server">         
                        <ClientSettings>         
                            <Scrolling UseStaticHeaders="true" />         
                        </ClientSettings>         
                        <PagerStyle Mode="NumericPages" />         
                        <MasterTableView DataKeyNames="Name" EditMode="InPlace" TableLayout="Fixed">         
                            <Columns>         
                                <telerik:GridBoundColumn DataField="Name" DataType="System.String" HeaderText="Name" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" AllowSorting="true" ReadOnly="true" UniqueName="Name" />         
                                <telerik:GridCheckBoxColumn DataField="Select1" DataType="System.Boolean" HeaderText="Select1" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" AllowSorting="false" ReadOnly="false" UniqueName="Select1" />         
                                <telerik:GridCheckBoxColumn DataField="Select2" DataType="System.Boolean" HeaderText="Select2" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" AllowSorting="false" ReadOnly="false" UniqueName="Select2" />         
                            </Columns>         
                        </MasterTableView>         
                    </telerik:RadGrid>             
                </div>         
                </form>         
            </body>         

                        public partial class RadGridWithCheckBoxes : System.Web.UI.Page         
                {         
                    private List<Data> _data;         
                     
                    protected void Page_Load(object sender, EventArgs e)         
                    {         
                     
                        if (!IsPostBack)         
                        {         
                            this._data = Data.Load();         
                            Session["DATA"] = this._data;         
                        }         
                        else         
                        {         
                            this._data = (List<Data>)Session["DATA"];         
                        }         
                    }         
                     
                    protected void radGrid_NeedDataSource(object source, GridNeedDataSourceEventArgs e)         
                    {         
                        this.radGrid.DataSource = this._data;         
                    }         
                     
                    protected void radGrid_PreRender(object sender, System.EventArgs e)         
                    {         
                        foreach (GridDataItem item in this.radGrid.Items)         
                        {         
                            item.Edit = true;         
                        }         
                        this.radGrid.Rebind();         
                    }         
                }         
                     
                public class Data         
                {         
                    public string Name { get; set; }         
                    public bool Select1 { get; set; }         
                    public bool Select2 { get; set; }         
                     
                    public Data(string name, bool select1, bool select2)         
                    {         
                        Name = name;         
                        Select1 = select1;         
                        Select2 = select2;         
                    }         
                     
                    public static List<Data> Load()         
                    {         
                        List<Data> data = new List<Data>();         
                        for (int i = 0; i < 25; i++)         
                        {         
                            data.Add(new Data(String.Format("Data{0}", i), true, false));         
                        }         
                        return data;         
                    }         
                }         

As soon as a checkbox in the grid is checked or unchecked, I would like to save the value back into the data object.

Therefore, the sorting and paging will always display the values correctly.

Can you please show me how to do this?

Regards,

Herman Gouw

4 Answers, 1 is accepted

answered on 04 Jun 2010, 05:13 AM

Hi,

Can someone please help me with the problem stated in my original post below?

To clarify the problem:

I have a data object containing a collection of 1 string value (Name) and 2 boolean values (Select1 and Select2) which are displayed in a RadGrid with paging.

The Name value is displayed on a GridBoundColumn which can be sorted.

The Select1 and Select2 values are displayed on 2 GridCheckBoxColumns which can be modified by the users.

As soon as the user modifies any values of Select1 or Select2, I would like to fetch the value and update the data object accordingly.

The code is given in my original post and the RadGrid can be displayed on RadGrid with GridCheckBoxes.

Can someone please show me the server side solution and client side solution (if possible to do this on client side)?

Many thanks in advance,

Herman

answered on 04 Jun 2010, 09:55 AM

sample.zip

Hello Herman,

To implement this behavior, you need to find your checkboxes in the created edit items and set them to AutoPostBack and attach to their CheckedChanged events. In the event handler, the sender is the CheckBox, and its NamingContainer is the edited item. You can simply update your data item and rebind the grid.

Sample project demonstrating this approach is attached (Default.aspx). It is built on top of your example. Note the ItemCreated event and the CheckBoxes' event handler.

You can implement this same behavior also on the client, but you are going to need a web service or a page method that you can call, sending the modified item values that will be saved. For a demo refer to Default2.aspx from the attachment.

All the best,
Veli
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 07 Jun 2010, 08:09 AM

Hi Veli,

Thank you for your help. It works fine.

Can you please explain what is the advantage of having the following in the ASPX file:

                    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">         
                <AjaxSettings>         
                    <telerik:AjaxSetting AjaxControlID="radGrid">         
                        <UpdatedControls>         
                            <telerik:AjaxUpdatedControl ControlID="radGrid" />         
                        </UpdatedControls>         
                    </telerik:AjaxSetting>         
                </AjaxSettings>         
            </telerik:RadAjaxManager>         
                     

I noticed that it still works without this and there seems to be no performance differences.

Regards,

Herman