Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

How to display Select All CheckBox on the Header Title and to selectively display CheckBox columns

6 Answers 3710 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Herman Gouw
Top achievements
Rank 2
Herman Gouw asked on 09 Jun 2010, 07:05 AM
Hi,

In my current project, I have to display a RadGrid which looks as follows http://www.gouw.ws/RadGridWithCheckBoxes.jpg

The RadGrid with paging has 3 columns as follows:
 - Column Name of type GridBoundColumn which can be sorted.
 - Columns Select1 and Select2 of type GridCheckBoxColumn whose values can be modified by the user.

The RadGrid is used to display a data item which is a collection of 1 string value (Name) and 2 boolean values.

I need to modify the RadGrid to look as follows http://www.gouw.ws/RadGridWithCheckBoxesModified.jpg

1. Instead of displaying the string Select1 and Select2 as the titles of the GridCheckBoxColumn,
    I need to display a CheckBox on each Column title and when it is un/checked then all the
    CheckBoxes in the column on the corresponding page will be automatically un/checked.
2. Depending on the value of Name on each row, I need to selectively make Select1 CheckBox
    or Select2 CheckBox not visible (but not both).

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> 

C#
public partial class RadGridWithCheckBoxes : 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), false, false));  
        }  
        return data; 
    } 
} 

Can you please show me how to do this?

Regards,
Herman Gouw
 

6 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 09 Jun 2010, 12:54 PM
Hello Herman,

1. In order to achieve your first requirement, in ItemCreated event create a CheckBox and add to corresponding header cell, and then attach CheckedChanged event to the CheckBox. In the event handler, make the CheckBoxes in the DataItem as checked/unchecked depending on CheckBox status in HeaderItem.

C#:
 
 protected void radGrid_ItemCreated(object sender, GridItemEventArgs e) 
  { 
    if (e.Item is GridHeaderItem) 
    { 
        GridHeaderItem headeritem = (GridHeaderItem)e.Item; 
        CheckBox chk_Header = new CheckBox(); 
        chk_Header.ID = "CheckBox1"; 
        chk_Header.AutoPostBack = true; 
        chk_Header.CheckedChanged += new EventHandler(chk_Header_CheckedChanged); 
        headeritem["Select1"].Text = ""; 
        headeritem["Select1"].Controls.Add(chk_Header); 
     }  
  } 
 
 protected void chk_Header_CheckedChanged(object sender, EventArgs e) 
    { 
        CheckBox chk_Header = (CheckBox)sender; 
        foreach (GridDataItem item in radGrid.MasterTableView.Items) 
           { 
               CheckBox chk = (CheckBox)item["Select1"].Controls[0]; 
               chk.Checked = chk_Header.Checked;              
           } 
    } 

2. You can make the CheckBox control visible/invisible based on the cell value by using following code:

C#:
 
 protected void radGrid_ItemDataBound(object sender, GridItemEventArgs e) 
  { 
      if (e.Item is GridDataItem) 
       { 
          GridDataItem item = (GridDataItem)e.Item; 
          if (item["Name"].Text == "XXX")//your condition 
            { 
              item["Select1"].Controls[0].Visible = false; 
            } 
        } 
   } 

Thanks,
Princy.
0
Herman Gouw
Top achievements
Rank 2
answered on 15 Jun 2010, 04:31 PM
Hi Princy,

Thank you for your prompt reply. I just had a chance to implement your solution.

Can you please tell me how to preserve the value of the Select All Check Box on the header?

When I check the Select All Check Box on the header, it reverts back to being unchecked after being processed.


Here is the updated code:

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" OnItemCreated="radGrid_ItemCreated" 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" /> 
                </Columns> 
            </MasterTableView> 
        </telerik:RadGrid>     
    </div> 
    </form> 
</body> 

C#
    public partial class RadGridWithCheckBoxes : 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_ItemCreated(object sender, GridItemEventArgs e) 
        { 
            if (e.Item is GridHeaderItem) 
            { 
                GridHeaderItem headerItem = (GridHeaderItem)e.Item; 
                CheckBox selectAllCheckBox = new CheckBox(); 
                selectAllCheckBox.ID = "checkBox"; 
                selectAllCheckBox.AutoPostBack = true; 
                selectAllCheckBox.CheckedChanged += new EventHandler(selectAllCheckBox_CheckedChanged); 
                headerItem["Select1"].Text = ""; 
                headerItem["Select1"].Controls.Add(selectAllCheckBox); 
            } 
 
            if (e.Item is GridEditableItem && e.Item.IsInEditMode) 
            { 
                GridEditableItem editableItem = (GridEditableItem)e.Item; 
 
                CheckBox selectCheckBox = (CheckBox)editableItem["Select1"].Controls[0]; 
                selectCheckBox.AutoPostBack = true; 
                selectCheckBox.CheckedChanged += new EventHandler(UpdateEditedItem); 
            } 
        } 
 
        void selectAllCheckBox_CheckedChanged(object sender, EventArgs e) 
        { 
            CheckBox selectAllCheckBox = (CheckBox)sender; 
            foreach (GridDataItem item in this.radGrid.MasterTableView.Items) 
            { 
                Data dataItem = GetDataItemByName(item.GetDataKeyValue("Name").ToString()); 
                dataItem.Select1 = selectAllCheckBox.Checked; 
            } 
        } 
 
        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(); 
        } 
 
        protected void UpdateEditedItem(object sender, EventArgs e) 
        { 
            CheckBox selectCheckBox = (CheckBox)sender; 
            GridEditableItem item = (GridEditableItem)selectCheckBox.NamingContainer; 
 
            Hashtable values = new Hashtable(); 
            item.ExtractValues(values); 
 
            Data dataItem = GetDataItemByName(item.GetDataKeyValue("Name").ToString()); 
            dataItem.Select1 = (bool)values["Select1"]; 
 
            this.radGrid.Rebind(); 
        } 
 
        protected Data GetDataItemByName(string name) 
        { 
            List<Data> data = (List<Data>)Session["Data"]; 
            foreach (Data item in data) 
            { 
                if (item.Name == name) 
                { 
                    return item; 
                } 
            } 
 
            return null; 
        }    
    } 
 
    public class Data 
    { 
        public string Name { get; set; } 
        public bool Select1 { get; set; } 
 
        public Data(string name, bool select1) 
        { 
            Name = name; 
            Select1 = select1; 
        } 
 
        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), false)); 
            } 
            return data; 
        } 
    } 

Regards,
Herman
0
Herman Gouw
Top achievements
Rank 2
answered on 17 Jun 2010, 05:27 AM
Hi,

Can someone please help me on how to preserve the value of the Select All Check Box on the header?

When I check the Select All Check Box on the header, it reverts back to being unchecked after being processed.


Thanks,
Herman
0
Accepted
Princy
Top achievements
Rank 2
answered on 17 Jun 2010, 09:56 AM
Hi Herman,

I guess the prooblem is that, the checkbox control is created on every postback and the control state is not persisted. So I added Viewstate to save the control status, based on the ViewState value set the checked property initially.

Here is the modified code. Give a try with this:

CS:
 
protected void radGrid_ItemCreated(object sender, GridItemEventArgs e)   
    {  
        if (e.Item is GridHeaderItem)  
        {  
            GridHeaderItem headerItem = (GridHeaderItem)e.Item;  
            CheckBox selectAllCheckBox = new CheckBox();  
            selectAllCheckBox.ID = "checkBox";  
            selectAllCheckBox.AutoPostBack = true;  
            selectAllCheckBox.CheckedChanged += new EventHandler(selectAllCheckBox_CheckedChanged);  
            headerItem["Select1"].Text = "";  
            if (ViewState["status"] != null)  
            {  
                if (ViewState["status"].ToString() == "checked")  
                {  
                    selectAllCheckBox.Checked = true;  
                }  
            }  
            headerItem["Select1"].Controls.Add(selectAllCheckBox);  
        }   
      . . .  
    }  
 
void selectAllCheckBox_CheckedChanged(object sender, EventArgs e)   
    {   
        CheckBox selectAllCheckBox = (CheckBox)sender;  
        if (selectAllCheckBox.Checked)  
        {  
            ViewState["status"] = "checked";  
        }  
        else 
        {  
            ViewState["status"] = "not_checked";  
        }  
       . . .  
    }  



Thanks,
Princy.
0
Herman Gouw
Top achievements
Rank 2
answered on 18 Jun 2010, 02:44 AM
Thanks again Princy for all your help.
0
Tom M
Top achievements
Rank 1
answered on 22 Sep 2010, 04:23 PM
Greetings,

How would you achieve this for every row in the grid (not just the ones visible on the current page of the grid)? Seems like the item collection in MasterTableView.Items only contains items on the current page..

Regards,
Tom

Update:
I found an each way to achieve this...simply turn paging off. Still curious if there is a way to do it with paging on though...
Tags
Grid
Asked by
Herman Gouw
Top achievements
Rank 2
Answers by
Princy
Top achievements
Rank 2
Herman Gouw
Top achievements
Rank 2
Tom M
Top achievements
Rank 1
Share this question
or