[Solved] GridClientSelectColumn issue with multiple grids on same page.

[Abhishek Chauhan]

Hi,

I have four radgrids on the same page and each of these have a "GridClientSelectColumn". In order to persist the selected rows in the grid on sorting/paging/filtering/grouping, i refered to the approach given at the following link-
http://www.telerik.com/help/aspnet-ajax/grid-persist-selected-rows-client-sorting-paging-grouping-filtering.html

This seems to work fine for a single grid but as I have 4 grids so whenever i select any of the items (say the one with the row index 1) in any one of these 4 grids and perform sorting, filtering etc on that grid itself, in the remaining 3 grids also the items with the same index (in this case, those with the rowindex 1) become selected.
Please suggest what changes i need to make to the approach given at the above mentioned link to fix this.
Please reply soon as i need to fix this ASAP.

Thanks In Advance,
Abhishek Chauhan

[Abhishek Chauhan]

Please pick this thread and help me out.

Thanks,
Abhishek

[Tsvetoslav]

Hello Abhishek,

The behavior you are experiencing is expected since you are referencing the same items in the "selected" array in the client for the four grids. You need to keep the selected items for a given grid with a unique key and not use the same key for all the four grids. For example:

function RadGrid1_RowSelected(sender, args) {
    var mailID = args.getDataKeyValue("ProductID") + sender.get_id();
    if (!selected[mailID]) {
        selected[mailID] = true;
    }
}
function RadGrid1_RowDeselected(sender, args) {
    var mailID = args.getDataKeyValue("ProductID") + sender.get_id();
    if (selected[mailID]) {
        selected[mailID] = null;
    }
}
function RadGrid1_RowCreated(sender, args) {
    var mailID = args.getDataKeyValue("ProductID") + sender.get_id();

    if (selected[mailID]) {
        args.get_gridDataItem().set_selected(true);
    }
}

I hope this information helps.

Greetings,
Tsvetoslav
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.

[Abhishek Chauhan]

Hi Tsvetoslav,

Thanks a lot for responding, I do have the same datakey for all the four grids and this is because the key column in all tables\lists which are acting as as source for these grids is the same ( Actually all the 4 source tables\lists have exactly the same structure).
Can you please suggest what shall i do in such scenario.

Thanks,
Abhishek

[Princy]

Hi,

I have implemented a similar scenario using the help article with multiple grids  and found  it to be working on my side. Selecting an item in one of the grids doesn't affect the other. I would suggest you provide your design view for a much better understanding.

Princy

[Abhishek Chauhan]

Hi  Princy,

I am still not sure about the problem, actually the sources (sharepoint lists) for these four grids have exactly the same structure
so I was having the same DATAKEYs for all the grids. Even after I changed the datacolumn names before binding the datatable (having the data from the source list) to the grid so as to have the different datakeys for all the columns (as suggested by Tsvetoslav), the problem stays the same. 

PFB the code for design view.

<%
@ Control Language="C#" AutoEventWireup="true" CodeBehind="UploadDocument_AssociateEntities.ascx.cs" Inherits="BP.PIMS.UserControls.UploadDocument_AssociateEntities" %>
<%
@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 <
link id="lnkRadControlsStyle" runat="server" type="text/css" rel="Stylesheet" href="../wpresources/PIMS/PIMSRadControls/Grid/Skins/Hay/Grid.Custom.css"/>
 <link id="PIMSStylesheet" href="../wpresources/PIMS/Styles/PIMSStyles.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript">
 var selected = {};
 function radGridDCP_RowSelected(sender, args) {
var sourceIDDCP = args.getDataKeyValue("SourceIDDCP");
 if (!selected[sourceIDDCP]) {
 selected[sourceIDDCP] =
true;
 }
}
function radGridDCP_RowDeselected(sender, args) {
 var sourceIDDCP = args.getDataKeyValue("SourceIDDCP");
 if (selected[sourceIDDCP]) {
 selected[sourceIDDCP] = null;
 }

}

function radGridDCP_RowCreated(sender, args) {
 var sourceIDDCP = args.getDataKeyValue("SourceIDDCP");

if (selected[sourceIDDCP]) {
 args.get_gridDataItem().set_selected(true);
 }

}
function radGridDCP_GridCreated(sender, eventArgs) {
var masterTable = sender.get_masterTableView();

if (masterTable.get_selectedItems().length == masterTable.get_pageSize()) {
 var gridHeader = masterTable.get_element().getElementsByTagName("TH")[0];
 for (var i = 0; i < gridHeader.childNodes.length; i++)
 {
if (gridHeader.childNodes[i].id.indexOf("columnSelectCheckBoxDCP") > -1) {
 gridHeader.childNodes[i].checked =
"true";
}

}

}

}
function radGridInspection_RowSelected(sender, args) {

var sourceID = args.getDataKeyValue("SourceIDInspection");
 if (!selected[sourceID]) {
 selected[sourceID] = true;
 }

}
function radGridInspection_RowDeselected(sender, args) {
 var sourceID = args.getDataKeyValue("SourceIDInspection");
 if (selected[sourceID]) {


selected[sourceID] = null;
 }

}
function radGridInspection_RowCreated(sender, args) {

var sourceID = args.getDataKeyValue("SourceIDInspection");
if (selected[sourceID]) {

args.get_gridDataItem().set_selected(true);

}

}
function radGridInspection_GridCreated(sender, eventArgs) {
 var masterTable = sender.get_masterTableView();
 if (masterTable.get_selectedItems().length == masterTable.get_pageSize()) {

var gridHeader = masterTable.get_element().getElementsByTagName("TH")[0];

for (var i = 0; i < gridHeader.childNodes.length; i++)
 {
if (gridHeader.childNodes[i].id.indexOf("columnSelectCheckBoxinspection") > -1) {
 gridHeader.childNodes[i].checked = "true";
 }

}

}

}

 function radGridNCR_RowSelected(sender, args) {

var sourceID = args.getDataKeyValue("SourceIDNCR");
 if (!selected[sourceID]) {
 selected[sourceID] =
true;
 }

}
function radGridNCR_RowDeselected(sender, args) {
 var sourceID = args.getDataKeyValue("SourceIDNCR");

if (selected[sourceID]) {
 selected[sourceID] =
null;
 }

}
function radGridNCR_RowCreated(sender, args) {
var sourceID = args.getDataKeyValue("SourceIDNCR");
 if (selected[sourceID]) {
 args.get_gridDataItem().set_selected(
true);
 }

}

 function radGridNCR_GridCreated(sender, eventArgs) {


var masterTable = sender.get_masterTableView();
 if (masterTable.get_selectedItems().length == masterTable.get_pageSize()) {

var gridHeader = masterTable.get_element().getElementsByTagName("TH")[0];

for (var i = 0; i < gridHeader.childNodes.length; i++)


{
if (gridHeader.childNodes[i].id.indexOf("columnSelectCheckBoxNCR") > -1) {
 gridHeader.childNodes[i].checked = "true";


}

}

}

}

 function radGridAction_RowSelected(sender, args) {
var sourceID = args.getDataKeyValue("SourceIDAction");


 if (!selected[sourceID]) {
 selected[sourceID] = true;
 }

}

 function radGridAction_RowDeselected(sender, args) {
 var sourceID = args.getDataKeyValue("SourceIDAction");
 if (selected[sourceID]) {
 selected[sourceID] =
null;
 }

}
function radGridAction_RowCreated(sender, args) {

var sourceID = args.getDataKeyValue("SourceIDAction");
 if (selected[sourceID]) {

args.get_gridDataItem().set_selected(true);


}

}

 function radGridAction_GridCreated(sender, eventArgs) {
 var masterTable = sender.get_masterTableView();
 if (masterTable.get_selectedItems().length == masterTable.get_pageSize()) {

var gridHeader = masterTable.get_element().getElementsByTagName("TH")[0];
 for (var i = 0; i < gridHeader.childNodes.length; i++)
 {
if (gridHeader.childNodes[i].id.indexOf("columnSelectCheckBoxAction") > -1) {
 gridHeader.childNodes[i].checked = "true";
 }

}

}

}
</script>
 <
telerik:RadAjaxLoadingPanel ID="radajaxloadingpanelAssociateEntities" runat="server" Transparency="50">
 <div id="divLoadingPnl" runat="server" style="position: absolute; left: 400px; top: 250px">


<asp:Image ID="imgLoading" runat="server" AlternateText="Loading..."

ImageUrl="~/wpresources/PIMS/Images/Progress_New.gif"/>

</div>
 </telerik:RadAjaxLoadingPanel>
 <telerik:RadAjaxPanel ID="radajaxpanelAssociateEntities" LoadingPanelID="radajaxloadingpanelAssociateEntities"
 runat="server" Height="610px" Width="700px">

<asp:Panel ID="panelContainer" runat="server">
 <
table style="border-right: 0px solid; border-top: 0px solid; border-left: 0px solid; border-bottom: 0px solid;" border="0">
 <tr>
 <td>
 <asp:Label ID="lblHeader" Text="Associate open entities of the suprseeded document:" runat="server" Width="350px"

Font-Bold="True" ForeColor="#009900"></asp:Label>
 <asp:Label ID="lblProjectLibrary" runat="server" Text="Project Library" style="position: static"></asp:Label>
 </td>
 </tr>
 <tr></tr>
 <tr>
 <td style="width: 350px">

 <asp:Label runat="server" ID="lblAction" Text="Associate Actions & Tasks" Height="20" CssClass="smallHeader"></asp:Label>

<telerik:RadGrid ID="rdgActions" runat="server" Height="255" Width="350" Skin="Hay"
 OnNeedDataSource="rdgActions_NeedDataSource" PagerStyle-Mode="NextPrevAndNumeric"
 ImagesPath="~/wpresources/PIMS/PIMSRadControls/Grid/Skins/Hay/Images" AllowMultiRowSelection="true"
  PageSize="5" PagerStyle-AlwaysVisible="true">
  <MasterTableView AllowSorting="true" AllowFilteringByColumn="true"
  AllowPaging="true" ClientDataKeyNames="SourceIDAction">
 <Columns>
 <telerik:GridClientSelectColumn HeaderText="Select" UniqueName="columnSelectCheckBoxAction"
 FilterImageUrl="~/wpresources/PIMS/PIMSRadControls/Grid/Skins/Hay/Images/Filter.gif"


SortAscImageUrl="~/wpresources/PIMS/PIMSRadControls/Grid/Skins/Hay/Images/SortAsc.gif"
 SortDescImageUrl="~/wpresources/PIMS/PIMSRadControls/Grid/Skins/Hay/Images/SortDesc.gif">
 </telerik:GridClientSelectColumn>
 </Columns>
 </MasterTableView>
 <ClientSettings>
  <ClientEvents OnRowSelecting="radGridAction_RowSelected"
 OnRowDeselected="radGridAction_RowDeselected"
 OnGridCreated="radGridAction_GridCreated"
 OnRowCreated="radGridAction_RowCreated">
 </ClientEvents>
 <Selecting AllowRowSelect="True" />

</ClientSettings>

</telerik:RadGrid>
 </td>
  <td>
  <asp:Label runat="server" ID="lblInspections" Text="Associate Inspections" Height="20" CssClass="smallHeader"></asp:Label>
 <telerik:RadGrid ID="rdgInspections" runat="server" Height="255" Width="350" Skin="Hay"
 ImagesPath="~/wpresources/PIMS/PIMSRadControls/Grid/Skins/Hay/Images"






PagerStyle-Mode="NextPrevAndNumeric" OnNeedDataSource="rdgInspections_NeedDataSource"















AllowMultiRowSelection="true" PageSize="5" PagerStyle-AlwaysVisible="true">















<MasterTableView AllowSorting="true" AllowFilteringByColumn="true"















AllowPaging="true" ClientDataKeyNames="SourceIDInspection">















<Columns>















<telerik:GridClientSelectColumn HeaderText="Select" UniqueName="columnSelectCheckBoxInspection"






FilterImageUrl="~/wpresources/PIMS/PIMSRadControls/Grid/Skins/Hay/Images/Filter.gif"






SortAscImageUrl="~/wpresources/PIMS/PIMSRadControls/Grid/Skins/Hay/Images/SortAsc.gif"






SortDescImageUrl="~/wpresources/PIMS/PIMSRadControls/Grid/Skins/Hay/Images/SortDesc.gif" >















</telerik:GridClientSelectColumn>















</Columns>















</MasterTableView>















<ClientSettings>















<ClientEvents OnRowSelecting="radGridInspection_RowSelected"






OnRowDeselected="radGridInspection_RowDeselected"






OnGridCreated="radGridInspection_GridCreated"















OnRowCreated="radGridInspection_RowCreated">















</ClientEvents>















<Selecting AllowRowSelect="True" />















</ClientSettings>















</telerik:RadGrid>















</td>















</tr>















<tr>















<td style="width: 350px">















<asp:Label runat="server" ID="lblNCR" Text="Associate NCRs" Height="20" CssClass="smallHeader"></asp:Label>















<telerik:RadGrid ID="rdgNCRs" runat="server" Height="255" Width="350" Skin="Hay"















ImagesPath="~/wpresources/PIMS/PIMSRadControls/Grid/Skins/Hay/Images"















PagerStyle-Mode="NextPrevAndNumeric" OnNeedDataSource="rdgNCRs_NeedDataSource"






AllowMultiRowSelection="true" PageSize="5" PagerStyle-AlwaysVisible="true">















<MasterTableView AllowSorting="true" AllowFilteringByColumn="true"















AllowPaging="true" ClientDataKeyNames="SourceIDNCR">















<Columns>















<telerik:GridClientSelectColumn HeaderText="Select" UniqueName="columnSelectCheckBoxNCR"






FilterImageUrl="~/wpresources/PIMS/PIMSRadControls/Grid/Skins/Hay/Images/Filter.gif"






SortAscImageUrl="~/wpresources/PIMS/PIMSRadControls/Grid/Skins/Hay/Images/SortAsc.gif"






SortDescImageUrl="~/wpresources/PIMS/PIMSRadControls/Grid/Skins/Hay/Images/SortDesc.gif" >















</telerik:GridClientSelectColumn>















</Columns>















</MasterTableView>















<ClientSettings>















<ClientEvents OnRowSelecting="radGridNCR_RowSelected"






OnRowDeselected="radGridNCR_RowDeselected"






OnGridCreated="radGridNCR_GridCreated"















OnRowCreated="radGridNCR_RowCreated">















</ClientEvents>















<Selecting AllowRowSelect="True"/>















</ClientSettings>















</telerik:RadGrid>















</td>















<td>















<asp:Label runat="server" ID="lblDCP" Text="Associate DCPs" Height="20" CssClass="smallHeader"></asp:Label>















<telerik:RadGrid ID="rdgDCPs" runat="server" Height="255" Width="350" Skin="Hay"















ImagesPath="~/wpresources/PIMS/PIMSRadControls/Grid/Skins/Hay/Images"















PagerStyle-Mode="NextPrevAndNumeric" OnNeedDataSource="rdgDCPs_NeedDataSource"






AllowMultiRowSelection="true" PageSize="5" PagerStyle-AlwaysVisible="true">















<MasterTableView AllowSorting="True" AllowFilteringByColumn="True"















AllowPaging="True" ClientDataKeyNames="SourceIDDCP">















<Columns>






<telerik:GridClientSelectColumn HeaderText="Select" UniqueName="columnSelectCheckBoxDCP"






FilterImageUrl="~/wpresources/PIMS/PIMSRadControls/Grid/Skins/Hay/Images/Filter.gif"






SortAscImageUrl="~/wpresources/PIMS/PIMSRadControls/Grid/Skins/Hay/Images/SortAsc.gif"






SortDescImageUrl="~/wpresources/PIMS/PIMSRadControls/Grid/Skins/Hay/Images/SortDesc.gif" >















</telerik:GridClientSelectColumn>















</Columns>















</MasterTableView>















<ClientSettings>















<ClientEvents OnRowSelecting="radGridDCP_RowSelected"















OnRowDeselected="radGridDCP_RowDeselected"






OnGridCreated="radGridDCP_GridCreated"















OnRowCreated="radGridDCP_RowCreated">















</ClientEvents>















<Selecting AllowRowSelect="True" />















</ClientSettings>















</telerik:RadGrid>















</td>















</tr>















<tr></tr>















<tr>















<td style="width: 350px"></td>















<td align="right">















<asp:Button ID="btnOK" runat="server" Width="80" Height="20" Text="OK" CssClass="button" OnClick="btnOK_Click"/>















<asp:Button ID="btnCancel" runat="server" Width="80" Height="20" Text="Cancel" CssClass="button" OnClick="btnCancel_Click"/></td>















<td>















</td>















</tr>


</





table>


</





asp:Panel>


</





telerik:RadAjaxPanel>

 As you can see now I have different set of fuctions as well as different key names for all the grids now and also everything else (save, Update ) is working fine.

It would be really nice of you if you could tell me what exactly is the problem here.


Thanks,
Abhishek

 

 

 

 

[Tsvetoslav]

Hi Abhishek,

I think you have misunderstood the solution I proposed. What I had in mind is not to change the datakey names for the four grid, but when storing them in the client array that persists the selected item add and additional substring that is unique for each grid. In my code snippet, that additional string is the ID of the grid which should be different for each of the four grids. Please, take a look at  the code snippet again and note how it is different from the code in the help article.

Regards,
Tsvetoslav
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.

[Abhishek Chauhan]

Hi Tsvetoslav,

Yes, I completely misunderstood what you meant .
Anyways, thanks a lot, that solved my problem.

Thanks,
 Abhishek