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

Retain row selection on RadGrid after sorting

3 Answers 381 Views
Grid
This is a migrated thread and some comments may be shown as answers.
bagga
Top achievements
Rank 1
bagga asked on 30 Apr 2010, 06:36 AM

Hello,
I'm using a telerik(2009.2.826.35) radgrid for listing some items (with sorting and no paging)
on clicking a grid row I'm populating some info in the form (row selected will be highlighted)
However I'm facing with some problem at the time of sorting the columns.

Initially the selected row status is lost. I was able to fix it with the suggestion found under
http://www.telerik.com/help/aspnet-ajax/grid-persist-selected-rows-client-sorting-paging-grouping-filtering.html

However still there is an issue. Follow these steps. (Find below the source.)

Once the grid loads
1) click on any row (selection is made)
2) Sort by any column (initial row selection is retained)
3) Now click on any other row (it is supposed to select the new row and unselect the old row;
It does select the new row; However it fails to unselect the old one)
4) Now click on another row (this time it only selects the new row and unselects the old ones)

FYI: I notice this behaviour only on row selection made immediately after the sorting.

SortGrid.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SortGrid.aspx.cs" Inherits="SortGrid" %> 
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml">  
<head id="Head1" runat="server">  
    <title>Retain row seletion on grid sorting</title>   
      
    <style type="text/css">  
        .pnlClass  
        {  
            display:none;  
        }  
    </style> 
      
    <script type="text/javascript" language="javascript">      
        function RowKeyPress(eventArgs) {  
            alert('Return key pressed');  
        }  
          
        function RowDblClick(sender, eventArgs) {  
            alert('Mouse double click');  
        }      
          
        var selectedName = {};      
          
        function RowSelected(sender, args) {          
            var id = args.getDataKeyValue("ID");  
            if (!selectedName[id]) {  
                selectedName[id] = true;  
            }          
        }  
        function RowDeselected(sender, args) {  
            var id = args.getDataKeyValue("ID");  
            if (selectedName[id]) {  
                selectedName[id] = null;  
            }  
        }  
        function RowCreated(sender, args) {  
            var id = args.getDataKeyValue("ID");  
            if (selectedName[id]) {  
                args.get_gridDataItem().set_selected(true);  
            }  
        }     
    </script>     
</head> 
<body>      
    <form id="form1" runat="server">  
    <asp:ScriptManager ID="ScriptManager1" runat="server">  
    </asp:ScriptManager>   
    <asp:UpdatePanel runat="server" ID="UpdatePanel1">  
        <ContentTemplate>      
        <div>      
            <telerik:RadGrid ID="trgJobList" Skin="Telerik" runat="server" AllowPaging="false" AutoGenerateColumns="False" AllowSorting="True" AllowMultiRowSelection="true" GridLines="None" OnNeedDataSource="trgJobList_NeedDataSource" OnItemCommand="trgJobList_ItemCommand">  
                <ClientSettings> 
                </ClientSettings>     
                <MasterTableView NoMasterRecordsText="" AutoGenerateColumns="false" DataKeyNames="ID" Width="480px" ClientDataKeyNames="ID" TableLayout="Fixed">  
                    <Columns> 
                        <telerik:GridBoundColumn                     
                           HeaderText="ID" 
                           DataField="ID" 
                           UniqueName="ID">  
                           <HeaderStyle Width="30px" CssClass="pnlClass" /> 
                           <ItemStyle CssClass="pnlClass" /> 
                         </telerik:GridBoundColumn> 
                         <telerik:GridBoundColumn  
                           HeaderText="Title" 
                           DataField="Title" 
                           UniqueName="Title">  
                           <HeaderStyle Width="50px" /> 
                         </telerik:GridBoundColumn> 
                         <telerik:GridBoundColumn  
                           HeaderText="First" 
                           DataField="First" 
                           UniqueName="First">  
                           <HeaderStyle Width="150px" /> 
                         </telerik:GridBoundColumn> 
                         <telerik:GridBoundColumn  
                           HeaderText="Last" 
                           DataField="Last" 
                           UniqueName="Last">  
                           <HeaderStyle Width="150px" /> 
                         </telerik:GridBoundColumn> 
                         <telerik:GridBoundColumn                      
                           DataField="Editable"   
                           SortExpression="Editable"   
                           UniqueName="Editable">  
                           <HeaderStyle Width="30px" CssClass="pnlClass" /> 
                           <ItemStyle CssClass="pnlClass" />                                 
                         </telerik:GridBoundColumn> 
                    </Columns> 
                </MasterTableView> 
                <ClientSettings EnablePostBackOnRowClick="true">     
                <Selecting AllowRowSelect="true" />   
                <ClientEvents OnRowDblClick="RowDblClick" OnKeyPress="RowKeyPress" OnRowCreated="RowCreated" OnRowSelected="RowSelected" OnRowDeselected="RowDeselected" /> 
                <Scrolling  
                 AllowScroll="true" 
                 UseStaticHeaders="true" 
                 ScrollHeight="100px" /> 
                </ClientSettings> 
            </telerik:RadGrid> 
        </div> 
        </ContentTemplate> 
    </asp:UpdatePanel>      
    </form> 
</body> 
</html> 
 

SortGrid.aspx.cs

using System;  
using System.Collections;  
using System.Configuration;  
using System.Data;  
using System.Linq;  
using System.Web;  
using System.Web.Security;  
using System.Web.UI;  
using System.Web.UI.HtmlControls;  
using System.Web.UI.WebControls;  
using System.Web.UI.WebControls.WebParts;  
using System.Xml.Linq;  
using Telerik.Web.UI;  
 
public partial class SortGrid : System.Web.UI.Page  
{  
    protected void Page_Load(object sender, EventArgs e)  
    {  
 
    }  
 
    protected void trgJobList_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)  
    {  
        DataSet ds = new DataSet();  
        ds.ReadXml(MapPath("names.xml"));  
 
        RadGrid grid = sender as RadGrid;  
        grid.DataSource = ds.Tables[0];  
    }  
 
    protected void trgJobList_ItemCommand(object source, GridCommandEventArgs e)  
    {  
        if (e.CommandName == "RowClick" && e.Item is GridDataItem)  
        {  
            // My serverside code implementation when the row is clicked (like filling some labels)  
        }  
    }  
}  
 

names.xml

<?xml version="1.0" encoding="iso-8859-1"?>  
<names> 
    <name> 
        <ID>1</ID> 
        <Title>Mr.</Title> 
    <First>James</First> 
    <Last>cook</Last> 
    </name> 
    <name> 
        <ID>2</ID> 
        <Title>Mrs.</Title> 
    <First>Anne</First> 
    <Last>Thompson</Last> 
    </name> 
    <name> 
        <ID>3</ID> 
        <Title>Dr.</Title> 
    <First>David</First> 
    <Last>Balmer</Last> 
    </name> 
    <name> 
        <ID>4</ID> 
        <Title>Prof.</Title> 
    <First>Ben</First> 
    <Last>Longmann</Last> 
    </name> 
</names> 

web.config

<?xml version="1.0"?>  
<!--   
    Note: As an alternative to hand editing this file you can use the   
    web admin tool to configure settings for your application. Use  
    the Website->Asp.Net Configuration option in Visual Studio.  
    A full list of settings and comments can be found in   
    machine.config.comments usually located in   
    \Windows\Microsoft.Net\Framework\v2.x\Config   
--> 
<configuration> 
    <configSections> 
        <sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">  
            <sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">  
                <section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication"/>  
                <sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">  
                    <section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="Everywhere"/>  
                    <section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication"/>  
                    <section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication"/>  
                    <section name="roleService" type="System.Web.Configuration.ScriptingRoleServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication"/>  
                </sectionGroup> 
            </sectionGroup> 
        </sectionGroup> 
    </configSections> 
    <appSettings/> 
    <connectionStrings/> 
    <system.web> 
        <!--   
            Set compilation debug="true" to insert debugging   
            symbols into the compiled page. Because this   
            affects performance, set this value to true only   
            during development.  
        --> 
        <compilation debug="true">  
            <assemblies> 
                <add assembly="System.Core, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>  
                <add assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>  
                <add assembly="System.Data.DataSetExtensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>  
                <add assembly="System.Xml.Linq, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>  
            </assemblies> 
        </compilation> 
        <!--  
            The <authentication> section enables configuration   
            of the security authentication mode used by   
            ASP.NET to identify an incoming user.   
        --> 
        <authentication mode="Windows"/>  
        <!--  
            The <customErrors> section enables configuration   
            of what to do if/when an unhandled error occurs   
            during the execution of a request. Specifically,   
            it enables developers to configure html error pages   
            to be displayed in place of a error stack trace.  
 
        <customErrors mode="RemoteOnly" defaultRedirect="GenericErrorPage.htm">  
            <error statusCode="403" redirect="NoAccess.htm" /> 
            <error statusCode="404" redirect="FileNotFound.htm" /> 
        </customErrors> 
        --> 
        <pages> 
            <controls> 
                <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>  
                <add tagPrefix="asp" namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>  
            </controls> 
        </pages> 
        <httpHandlers> 
            <remove verb="*" path="*.asmx"/>  
            <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>  
            <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>  
            <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" validate="false"/>  
        </httpHandlers> 
        <httpModules> 
            <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>  
        </httpModules> 
    </system.web> 
    <system.codedom> 
        <compilers> 
            <compiler language="c#;cs;csharp" extension=".cs" warningLevel="4" type="Microsoft.CSharp.CSharpCodeProvider, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089">  
                <providerOption name="CompilerVersion" value="v3.5"/>  
                <providerOption name="WarnAsError" value="false"/>  
            </compiler> 
            <compiler language="vb;vbs;visualbasic;vbscript" extension=".vb" warningLevel="4" type="Microsoft.VisualBasic.VBCodeProvider, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089">  
                <providerOption name="CompilerVersion" value="v3.5"/>  
                <providerOption name="OptionInfer" value="true"/>  
                <providerOption name="WarnAsError" value="false"/>  
            </compiler> 
        </compilers> 
    </system.codedom> 
    <!--   
        The system.webServer section is required for running ASP.NET AJAX under Internet  
        Information Services 7.0.  It is not necessary for previous version of IIS.  
    --> 
    <system.webServer> 
        <validation validateIntegratedModeConfiguration="false"/>  
        <modules> 
            <remove name="ScriptModule"/>  
            <add name="ScriptModule" preCondition="managedHandler" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>  
        </modules> 
        <handlers> 
            <remove name="WebServiceHandlerFactory-Integrated"/>  
            <remove name="ScriptHandlerFactory"/>  
            <remove name="ScriptHandlerFactoryAppServices"/>  
            <remove name="ScriptResource"/>  
            <add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>  
            <add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>  
            <add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>  
        </handlers> 
    </system.webServer> 
    <runtime> 
        <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">  
            <dependentAssembly> 
                <assemblyIdentity name="System.Web.Extensions" publicKeyToken="31bf3856ad364e35"/>  
                <bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="3.5.0.0"/>  
            </dependentAssembly> 
            <dependentAssembly> 
                <assemblyIdentity name="System.Web.Extensions.Design" publicKeyToken="31bf3856ad364e35"/>  
                <bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="3.5.0.0"/>  
            </dependentAssembly> 
        </assemblyBinding> 
    </runtime> 
</configuration> 
 

How can I fix this behaviour. Basically I want to retain the user selected rows (note that I need multi row selection; restricting
to single row selection is not going to meet my requirements.)

Thanks.

 

 

3 Answers, 1 is accepted

Sort by
0
Rafael Enriquez
Top achievements
Rank 1
answered on 30 Apr 2010, 05:09 PM
Hi:

Having similar issues with the grid. Initially, I noticed that sorting & paging where ok, but filtering did not work after a postback. So, I disabled filtering. After that, I needed to perform an action when a rows is selected, so I added the client event handler... And then I found that sorting & paging were not ok either. rowSelected event is fired well... but if you page or sort, it stops being fired. Here is my code:


function rgMisDepositos_OnRowSelected(sender, args){
       
        var grid = sender;
        var MasterTable = grid.get_masterTableView();
        var row = MasterTable.get_dataItems()[args.get_itemIndexHierarchical()];
        var cell = MasterTable.getCellByColumnUniqueName(row, "Saldo");
        var lblTotalComprobado = document.getElementById("lblTotalComprobado");
        lblTotalComprobado.innerHTML = cell.innerHTML;
    }
<telerik:RadScriptManager ID="ScriptManager1" runat="server"></telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
                DefaultLoadingPanelID="RadAjaxLoadingPanel1" EnableAJAX="true">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="rgMisDepositos">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="rgMisDepositos" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
           
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>

<telerik:RadGrid ID="rgMisDepositos" runat="server" Width="95%"  AutoGenerateColumns="false"
                PageSize="3" ShowFooter="true" ShowHeader="true" ShowStatusBar="true" ImagesPath="~/Images/telerik"
                AllowFilteringByColumn="false" AllowPaging="true" AllowSorting="true" Skin="Outlook"
                OnNeedDataSource="rgMisDepositos_NeedDataSource">
                <MasterTableView DataKeyNames="idSolicitudAnticipo" ClientDataKeyNames="idSolicitudAnticipo">
                    <NoRecordsTemplate>
                        <div style="width:100%; text-align:center;">No hay registros para mostrar.</div>
                    </NoRecordsTemplate>
                    <Columns>
                        <telerik:GridClientSelectColumn></telerik:GridClientSelectColumn>
                        <telerik:GridBoundColumn DataField="idSolicitudAnticipo" UniqueName="idSolicitudAnticipo" HeaderText="ID Solicitud"></telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="idComprobacionGasto" HeaderText="ID Comprobación"></telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Saldo" UniqueName="Saldo" HeaderText="Saldo" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:#.##}"></telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings Scrolling-AllowScroll="false" Selecting-AllowRowSelect="true"
                    ClientEvents-OnRowSelected="rgMisDepositos_OnRowSelected">
                </ClientSettings>
                <StatusBarSettings ReadyText="Listo" />
                <SortingSettings SortToolTip="Click aquí para ordenar" />
                <PagerStyle Mode="NextPrevAndNumeric" PagerTextFormat="Cambiar Página {4} Mostrando página {0} de {1}, elementos {2} al {3} de {5}."
                    NextPagesToolTip="Páginas siguientes" NextPageToolTip="Página siguiente"
                    PrevPagesToolTip="Páginas anteriores" PrevPageToolTip="Página anterior" />
            </telerik:RadGrid>

protected void rgMisDepositos_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
        {
            DataSet ds = GetTheData();

                rgMisDepositos.DataSource = ds;
        }


I hope you can help. Thanks.



0
bagga
Top achievements
Rank 1
answered on 03 May 2010, 06:24 AM
Hi Rafael,
Tried your code, I noticed that "lblTotalComprobado" is not defined.
Anyway adding client side functions for rowCreated & rowDeselected in addition to rowSelected enable you to retain the selected row after sorting/ paging. Here is the code.

<script type="text/javascript" language="javascript"
    var selectedName = {};  
    function rgMisDepositos_OnRowSelected(sender, args){ 
        var id = args.getDataKeyValue("ID"); 
        if (!selectedName[id]) { 
            selectedName[id] = true; 
        } 
        alert('fired'); 
        //var grid = sender
        //var MasterTable = grid.get_masterTableView(); 
        //var row = MasterTable.get_dataItems()[args.get_itemIndexHierarchical()]; 
        //var cell = MasterTable.getCellByColumnUniqueName(row, "First"); 
        //var lblTotalComprobado = document.getElementById("lblTotalComprobado"); 
        //lblTotalComprobado.innerHTML = cell.innerHTML; 
    } 
    function RowDeselected(sender, args) { 
        var id = args.getDataKeyValue("ID"); 
        if (selectedName[id]) { 
            selectedName[id] = null; 
        } 
    } 
    function RowCreated(sender, args) { 
        var id = args.getDataKeyValue("ID"); 
        if (selectedName[id]) { 
            args.get_gridDataItem().set_selected(true); 
        } 
    }    
    </script> 

<ClientSettings Scrolling-AllowScroll="false" Selecting-AllowRowSelect="true" 
                    ClientEvents-OnRowSelected="rgMisDepositos_OnRowSelected" ClientEvents-OnRowCreated="RowCreated" ClientEvents-OnRowDeselected="RowDeselected" > 
</ClientSettings> 

In the javascript functions make sure you replace "ID" with your DatakeyName.
When you run the application, you will notice the rgMisDepositos_OnRowSelected event is fired on row click/sorting/paging.

You are only allowing one row selection at a time (I need multi row selection enabled)
(though it is single row selection, still I see more than one row getting selected in some cases after sorting/paging)

Is there any solutions for my issue? Anyone?

Thanks.
0
Rafael Enriquez
Top achievements
Rank 1
answered on 07 May 2010, 02:28 PM
Hi Bagga:

The problem in my case is the way the application is built. We have 1 page. Inside the page, we define some placeholders. Then, dynamcally (through LoadControl method), we load a UserControl and add it to 1 of the placeholders. The problem was the stage at what we were doing that. We were doing it at PageLoad phase. Once we figured it out, we move the LoadControl to the OnInit phase and problem was resolved. There are still other problems though, with other telerik controls... like the combo box, which can't be well validated, but we are finding work around for them.

By the way, I remember I had a problem similar to what you're having now, but it was with the ComponentArt grid. The problem was at our side, because the data we were passing to the datagrid was not unique... I mean, some primary keys were duplicated.
Tags
Grid
Asked by
bagga
Top achievements
Rank 1
Answers by
Rafael Enriquez
Top achievements
Rank 1
bagga
Top achievements
Rank 1
Share this question
or