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

GridClientSelectColumn Select all checkboxes in DetailTables GridTableView

8 Answers 380 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kyle
Top achievements
Rank 1
Kyle asked on 19 Oct 2012, 06:33 PM
I'm trying to have a client-side event that uses the header checkbox in the GridClientSelectColumn to select all of the checkboxes for visible rows. The grids are all expanded by default.

My expected behvior: I check the header checkbox in the mastertable view, it checks every single checkbox that is under it in each gridtableview/detailTable

I feel like that should be a default setting anyway.
I have a RadGrid with a MasterTableView and 2 levels of DetailTables inside of it

MasterTableView
        DetailTables
GridTableView
DetailTables
GridTableView

I've looked around on the Telerik site, but the code snippets don't work or aren't necessarily for my problem. Is there a straight-forward way to do this? I feel maybe there's just a parameter I can set...

Thanks a lot.

8 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 20 Oct 2012, 09:03 PM
Hello,

function chkchildgrid(hchk) {
 
 
                var grid = $find("<%=RadGrid1.ClientID %>");
                if (grid) {
                    var MasterTable = grid.get_masterTableView();
                    var Rows = MasterTable.get_dataItems();
                    for (var i = 0; i < Rows.length; i++) {
                        var row = Rows[i];
                        row.set_selected(true);
                        var childTable = row.get_nestedViews();
                        if (childTable) {
                            var childItems = childTable[0].get_dataItems();
                            for (var j = 0; j < childItems.length; j++) {
                                var childrow = childItems[j];
 
                                var childtable2 = childrow.get_nestedViews();
                                if (childtable2 != "") {
                                    var childItems2 = childtable2[0].get_dataItems();
                                    for (var k = 0; k < childItems2.length; k++) {
                                        var childrow2 = childItems2[k];
                                        childrow2.set_selected(true);
                                    }
                                }
                                childrow.set_selected(true);
 
                            }
 
 
                        }
                    }
                }
 
 
 
            }
protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
        {
            if (e.Item is GridHeaderItem && e.Item.OwnerTableView.Name == "Parent")
            {
                GridHeaderItem item = e.Item as GridHeaderItem;
                CheckBox ParentSelectchk = item["ParentSelect"].Controls[0] as CheckBox;
                ParentSelectchk.Attributes.Add("onclick", "chkchildgrid(this);");
            }
}
<MasterTableView
               Name="Parent">
               <Columns>
                   <telerik:GridClientSelectColumn UniqueName="ParentSelect">
                   </telerik:GridClientSelectColumn>


Thanks,
Jayesh Goyani
0
Kyle
Top achievements
Rank 1
answered on 23 Oct 2012, 03:37 PM
This doesn't seem to work either. I don't know what the deal is. Will this properly uncheck items if the header checkbox is selected because I don't see which Javascript lines would do that, only row.set_selected(true); 

<body>
    <script type="text/javascript">
        function chkchildgrid(hchk) {
            var grid = $find("<%=MyRadGrid.ClientID %>");
            if (grid) {
                var MasterTable = grid.get_masterTableView();
                var Rows = MasterTable.get_dataItems();
                for (var i = 0; i < Rows.length; i++) {
                    var row = Rows[i];
                    row.set_selected(true);
                    var childTable = row.get_nestedViews();
                    if (childTable) {
                        var childItems = childTable[0].get_dataItems();
                        for (var j = 0; j < childItems.length; j++) {
                            var childrow = childItems[j];
 
                            var childtable2 = childrow.get_nestedViews();
                            if (childtable2 != "") {
                                var childItems2 = childtable2[0].get_dataItems();
                                for (var k = 0; k < childItems2.length; k++) {
                                    var childrow2 = childItems2[k];
                                    childrow2.set_selected(true);
                                }
                            }
                            childrow.set_selected(true);
                        }
                    }
                }
            }
        }
    </script>
    <form id="form1" runat="server">
        <div>
            <rad:RadGrid runat="server" ID="MyRadGrid" OnNeedDataSource="MyRadGrid_NeedDataSource" OnPreRender="MyRadGrid_PreRender" AllowMultiRowSelection="true" AutoGenerateColumns="false" OnItemDataBound="MyRadGrid_ItemDataBound" OnDetailTableDataBind="MyRadGrid_DetailTableDataBind">

<rad:RadGrid runat="server" ID="MyRadGrid" OnNeedDataSource="MyRadGrid_NeedDataSource" OnPreRender="MyRadGrid_PreRender" AllowMultiRowSelection="true" AutoGenerateColumns="false" OnItemDataBound="MyRadGrid_ItemDataBound" OnDetailTableDataBind="MyRadGrid_DetailTableDataBind">
                <ClientSettings>
                    <Selecting AllowRowSelect="true" EnableDragToSelectRows="false" />
                    <ClientEvents />
                </ClientSettings>
                <MasterTableView Name="Parent" DataKeyNames="<OMITTED>" HierarchyDefaultExpanded="true" Width="60%" HierarchyLoadMode="Client">
                    <Columns>
                        <rad:GridBoundColumn DataField="ActualName" HeaderText="Actual Name" Visible="true">
                            <ItemStyle Width="23.1%" />
                        </rad:GridBoundColumn>
                    </Columns>


protected void MyRadGrid_ItemDataBound(object sender, GridItemEventArgs e)
    {
        // Adds Javascript event handler for header checkbox clicking
        if (e.Item is GridHeaderItem && e.Item.OwnerTableView.Name == "Parent")
        {
            GridHeaderItem item = e.Item as GridHeaderItem;
            CheckBox ParentSelectchk = item["ParentSelect"].Controls[0] as CheckBox;
            ParentSelectchk.Attributes.Add("onclick", "chkchildgrid(this);");
        }
 
        // Hides expand for certain data types
        if (e.Item is GridDataItem)
        {
            GridDataItem dataBoundItem = e.Item as GridDataItem;
            String dataType = dataBoundItem["DataType"].Text;
            if (!String.IsNullOrEmpty(dataType) && (dataType.Equals("4") || dataType.Equals("22") || dataType.Equals("14")))
            {
                var control = dataBoundItem["ExpandColumn"];
                if (control != null)
                {
                    control.Visible = false;
                }
            }
        }
    }

Is there something wrong here? Would this Javascript only work on the newest version of Telerik? We are using RadGrid.Net2.dll version 5.1.4.0Upon further inspection, I'm getting this Javascript error: 
  1. Uncaught ReferenceError: $find is not defined Default.aspx:11
    1. chkchildgridDefault.aspx:11
    2. onclick
I'm also not using any of the AJAX radgrid stuff if that helps so no script manager is present.


0
Jayesh Goyani
Top achievements
Rank 2
answered on 24 Oct 2012, 06:24 PM
Hello,

I have used jquery in my code.

So please add jquery in your page and try.

Thanks,
Jayesh Goyani
0
Kyle
Top achievements
Rank 1
answered on 24 Oct 2012, 09:00 PM
Added JQuery. Still doesn't work. First thing I noticed was that the code never hits inside of this conditional as e.Item is never a GridHeaderItem, but a GridDataItem. I tried changing the GridHeaderItem to GridDataItem but it still has the default behavior... My GridclientSelectColumn on the MasterTableView is named CheckBox, fyi.

if (e.Item is GridHeaderItem && e.Item.OwnerTableView.Name == "Parent")
            {
                GridHeaderItem item = e.Item as GridHeaderItem;
                CheckBox ParentSelectchk = item["CheckBox"].Controls[0] as CheckBox;
                ParentSelectchk.Attributes.Add("onclick", "chkchildgrid(this);");
            }


Here is me adding JQuery and the relevant code

<script src="http://localhost/_OMITTED_/jquery-1.8.2.min.js" type="text/javascript"></script>
 
<script type="text/javascript">
 function chkchildgrid(hchk) {
        var grid = $find("<%=ReturnGrid.ClientID %>");
        if (grid) {
            var MasterTable = grid.get_masterTableView();
            var Rows = MasterTable.get_dataItems();
            for (var i = 0; i < Rows.length; i++) {
                var row = Rows[i];
                row.set_selected(true);
                var childTable = row.get_nestedViews();
                if (childTable) {
                    var childItems = childTable[0].get_dataItems();
                    for (var j = 0; j < childItems.length; j++) {
                        var childrow = childItems[j];
 
                        var childtable2 = childrow.get_nestedViews();
                        if (childtable2 != "") {
                            var childItems2 = childtable2[0].get_dataItems();
                            for (var k = 0; k < childItems2.length; k++) {
                                var childrow2 = childItems2[k];
                                childrow2.set_selected(true);
                            }
                        }
                        childrow.set_selected(true);
                    }
                }
            }
        }
    }
</script>

I don't get it. What am I doing wrong?
0
Antonio Stoilkov
Telerik team
answered on 26 Oct 2012, 10:10 AM
RadGridCheckAlLDetailTables.zip
Hi Kyle,

I have assembled a sample page demonstrating the desired functionality. The main idea is to loop through all data items in the MasterTableView and all DetailTables and select or deselect them depending on the checkbox state.
function selectAllDetailTables(checkBox)
{
    var selected = checkBox.checked;
    var grid = $find("<%= RadGrid1.ClientID %>");
    var dataItems = grid.get_masterTableView().get_dataItems();
    setSelectedToAllDataItems(dataItems, selected);
    var detailTables = grid.get_detailTables();
    for (var i = 0; i < detailTables.length; i++)
    {
        setSelectedToAllDataItems(detailTables[i].get_dataItems(), selected);
    }
}
 
function setSelectedToAllDataItems(dataItems, selected)
{
    for (var i = 0; i < dataItems.length; i++)
    {
        dataItems[i].set_selected(selected);
    }
}

Regards,
Antonio Stoilkov
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Kyle
Top achievements
Rank 1
answered on 29 Oct 2012, 05:00 PM
Begin Quote
We are using RadGrid.Net2.dll version 5.1.4.0
End Quote

Is this reflected in the code you published? Or rather, is RadCodeBlock or RadScriptBlock part of that version of RadControls? I don't see those as objects in my List of DLLs when I register them in the ASPX page.

RadAjax.Net2.dll
RadCalendar.Net2.dll
RadComboBox.Net2.dll
RadGrid.Net2.dll
RadInput.Net2.dll
RadPanelbar.Net2.dll
RadTabStrip.Net2.dll
RadWindow.Net2.dll

I think this may be why it's failing at $find? I get the following when I click the header checkbox:

Uncaught ReferenceError: $find is not defined

If i replace $find with $("body").find then I get:

Uncaught TypeError: Object [object Object] has no method 'get_masterTableView'
This is all after replacing my code with code very similar to Antonio's. Still beating my head against the wall.
0
Antonio Stoilkov
Telerik team
answered on 01 Nov 2012, 08:32 AM
Hi Kyle,

Note that we do not provide support for these controls any more. In such scenario we recommend updating your controls to the latest version. The previously provided code is targeted for the new controls. Additionally, you could go through the help article below for more information on how to migrate your controls.

Greetings,
Antonio Stoilkov
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Kyle
Top achievements
Rank 1
answered on 01 Nov 2012, 02:52 PM
Thanks a lot for getting back to me Antonio. I'll keep trying at a JQuery/Javascript solution because at the moment we can't upgrade, but will hopefully soon in the future.

Thanks everyone for your help!
Tags
Grid
Asked by
Kyle
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Kyle
Top achievements
Rank 1
Antonio Stoilkov
Telerik team
Share this question
or