This is a migrated thread and some comments may be shown as answers.
Radgrid select all + Get Key value slow
1 Answer 74 Views
This is a migrated thread and some comments may be shown as answers.
Kiran
Top achievements
Rank 1
Kiran asked on 05 Oct 2010, 09:47 PM
Dear telerik

I am usig radgrid with scrolling, staticheader=true, filter=true, but when i have more than 100 records to select rows by header checkbox it gets slow + we allowed user can delete multiple records, so when select bunch of records to validate on delete button, it gets slow, + when we do sorting with having about 100 records headers are flipping with scroll

here is my code

Radgrid

<

 

telerik:RadGrid ID="RadGrid1" Width="99%" Height="400" AllowSorting="true" runat="server" >

 

 

 

<MasterTableView TableLayout="Fixed" DataKeyNames="PR_KEY" ClientDataKeyNames="PR_KEY" >

 

 

 

 

<Columns>

 

 

 

<telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" />

 

 

 

<telerik:GridBoundColumn UniqueName="PR_KEY" DataField="PR_KEY" ></telerik:GridBoundColumn>

 

 

 

 

<telerik:GridBoundColumn HeaderText="Employees" DataField="Name" UniqueName="Name" ShowFilterIcon="false"

 

 

 

SortExpression="Name" AllowFiltering="true" FilterControlWidth="100"

 

 

 

AutoPostBackOnFilter="true" />

 

 

 

 

<telerik:GridDateTimeColumn ReadOnly="true" DataField="Paydate" HeaderText="Pay Date" DataFormatString="{0:d}"

 

 

 

DataType="System.DateTime" UniqueName="PayDate" AllowFiltering="false" SortExpression="PayDate" />

 

 

 

 

<telerik:GridBoundColumn AllowFiltering="false"

 

 

 

HeaderText="Start Date"

 

 

 

DataFormatString="{0:d}" DataField="PayDateFrom" UniqueName="PayDateFrom"

 

 

 

DataType="System.DateTime" ShowFilterIcon="false"

 

 

 

SortExpression="PayDateFrom" />

 

 

 

 

<telerik:GridBoundColumn HeaderText="End Date"

 

 

 

DataField="Paydateto"

 

 

 

DataFormatString="{0:d}" UniqueName="Paydateto" DataType="System.DateTime"

 

 

 

ShowFilterIcon="false" AllowFiltering="false"

 

 

 

SortExpression="Paydateto" />

 

 

 

 

<telerik:GridBoundColumn HeaderText="Pay Period" DataField="Description" UniqueName="Description" ShowFilterIcon="false"

 

 

 

SortExpression="Description" >

 

 

 

 

<FilterTemplate>

 

 

 

<telerik:RadComboBox ID="RadComboBoxPP" CausesValidation="false" Width="100" DataSourceID="SqlDataSourcePP" DataTextField="Code"

 

 

 

DataValueField="Code" Height="100px" AppendDataBoundItems="true" OnClientSelectedIndexChanged="SelectedIndexChanged"

 

 

 

SelectedValue='<%# TryCast(Container, GridItem).OwnerTableView.GetColumn("Description").CurrentFilterValue %>'

 

 

 

runat="server">

 

 

 

<Items>

 

 

 

<telerik:RadComboBoxItem Text="All" />

 

 

 

</Items>

 

 

 

</telerik:RadComboBox>

 

 

 

 

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

 

 

 

<script type="text/javascript">

 

 

 

function SelectedIndexChanged(sender, args) {

 

 

 

var tableView = $find("<%# TryCast(Container, GridItem).OwnerTableView.ClientID %>");

 

sender.value = args.get_item().get_value();

tableView.filter(

 

"Description", args.get_item().get_value(), "EqualTo");

 

}

 

 

</script>

 

 

 

</telerik:RadScriptBlock>

 

 

 

</FilterTemplate>

 

 

 

 

</telerik:GridBoundColumn>

 

 

 

 

<telerik:GridBoundColumn HeaderText="Department" DataField="Department" UniqueName="Department" ShowFilterIcon="false"

 

 

 

SortExpression="Department" >

 

 

 

 

<FilterTemplate>

 

 

 

 

<telerik:RadComboBox ID="RadComboBoxDep" CausesValidation="false" DataSourceID="SqlDataSourceDepartment" Width="120" DataTextField="Department"

 

 

 

DataValueField="Department" Height="100px" AppendDataBoundItems="true" OnClientSelectedIndexChanged="SelectedIndexChanged2"

 

 

 

SelectedValue='<%# TryCast(Container, GridItem).OwnerTableView.GetColumn("Department").CurrentFilterValue %>'

 

 

 

runat="server">

 

 

 

<Items>

 

 

 

<telerik:RadComboBoxItem Text="All" />

 

 

 

</Items>

 

 

 

</telerik:RadComboBox>

 

 

 

 

<telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">

 

 

 

<script type="text/javascript">

 

 

 

function SelectedIndexChanged2(sender, args) {

 

 

 

var tableView = $find("<%# TryCast(Container, GridItem).OwnerTableView.ClientID %>");

 

sender.value = args.get_item().get_value();

tableView.filter(

 

"Department", args.get_item().get_value(), "EqualTo");

 

}

 

 

</script>

 

 

 

</telerik:RadScriptBlock>

 

 

 

</FilterTemplate>

 

 

 

</telerik:GridBoundColumn>

 

 

 

 

 

<telerik:GridBoundColumn DataField="NetPay" DataType="System.Double" UniqueName="NetPay"

 

 

 

HeaderText="Net Pay" AllowFiltering="false" SortExpression="NetPay" ItemStyle-HorizontalAlign="Right"

 

 

 

/>

 

 

 

 

<telerik:GridBoundColumn

 

 

 

HeaderText="Status" DataField="status" UniqueName="status" AllowFiltering="false" SortExpression="Status"

 

 

 

/>

 

 

 

 

<telerik:GridBoundColumn

 

 

 

HeaderText="Value1" DataField="value1" UniqueName="value1" AllowFiltering="false"

 

 

 

/>

 

 

 

 

<telerik:GridBoundColumn

 

 

 

HeaderText="keyid" DataField="keyid" UniqueName="keyid" AllowFiltering="false"

 

 

 

/>

 

 

 

 

<telerik:GridBoundColumn

 

 

 

HeaderText="ESF_KEY" DataField="ESF_KEY" UniqueName="ESF_KEY" AllowFiltering="false"

 

 

 

/>

 

 

 

<telerik:GridBoundColumn

 

 

 

HeaderText="hds" DataField="hds" UniqueName="hds" AllowFiltering="false"

 

 

 

/>

 

 

 

</Columns>

 

 

 

</MasterTableView>

 

 

 

 

<ClientSettings EnableRowHoverStyle="false" AllowColumnsReorder="false" ReorderColumnsOnClient="false">

 

 

 

<Scrolling SaveScrollPosition="false" UseStaticHeaders="true" />

 

 

 

<Resizing EnableRealTimeResize="True" ResizeGridOnColumnResize="false" AllowColumnResize="true">

 

 

 

</Resizing>

 

 

 

 

<ClientEvents OnGridCreated="GridCreated" /></ClientSettings></telerik:RadGrid>


javascript on delete button

 

function

 

submitDelete(){

 

window.document.all[

 

'hdPrKey'].value=""

 

 

 

 

 

 

 

if((validateSelections('delete')>0) && (selRowID.length>0)) {

 

 

 

    if(confirm(msg_confirmdel))     {

 

        objForm.hdMode.value =

 

'Delete';

 

        window.document.all[

 

'hdPrKey'].value=selRowID;

 

        objForm.cmdHidden1.click();

    }

}

}

function validateSelections(mode) {
  selRowID="";
  selEmpID="";

  var StatusArray;

  var cVoided=0;
  var cDdPending=1;
  var cDdDeposited=2;
  var cDdInProcess=3;
  var cDdPartial=4;
  var cDdFailed=5;
  var cCkPending=6;
  var cCkPrinted=7;
  var cHistory=8;
  var cAjPending=9;
  var cAjCommit=10;
  var cAjVoided=11;
  var cRvDdPending=12;
  var cRvCkPending=13;
  var cRvDdDeposited=14;
  var cRvCkPrinted=15;
  var cReversal=16;
  

  var IsDelete = false;
  var IsRecalc = false;
  var IsModify = false;
  var IsReverse = false;
  IsDelete = (mode.toLowerCase()=='delete');
  IsRecalc = (mode.toLowerCase()=='recalc');
  IsModify = (mode.toLowerCase()=='modify');
  IsReverse = (mode.toLowerCase()=='reverse');

  var CheckLength; // = CheckArray.length;
  var TheCheck;
  var TheStatus;
  var CheckCount=0; //tracks the number of check boxes selected after validation
  var InvalidEmpList = "";

  var grid = $find("<%=RadGrid1.ClientID %>");
  var CheckLength = $find("<%= RadGrid1.MasterTableView.ClientID %>").get_selectedItems().length;
  var MasterTable = grid.get_masterTableView();
  var selectedRows = MasterTable.get_selectedItems();

  if (CheckLength) {
      for (var i = 0; i < selectedRows.length; i++) {
          var name = ""
          var status = "";
          var row = selectedRows[i];
          var cell = MasterTable.getCellByColumnUniqueName(row, "PayDateFrom")
          var empSdate = new Date(cell.innerText.trim());
         
          var sd = empSdate.getMonth() + 1 + '/' + empSdate.getDate() + '/' + empSdate.getFullYear();
          window.document.all["hdStartEndDate"].value += sd + '!' + sd + ','
         
          var esf = MasterTable.getCellByColumnUniqueName(row, "ESF_KEY")
          window.document.all["hdESF"].value += esf.innerText + ','

          var stat = MasterTable.getCellByColumnUniqueName(row, "hds")
          TheStatus = parseInt(stat.innerText, 10);

          var prK = MasterTable.getCellByColumnUniqueName(row, "PR_KEY")
          var EmpId = MasterTable.getCellByColumnUniqueName(row, "keyid")

          if (isNaN(TheStatus)) {
              row.set_selected(false);
              continue;
          }

          if ((IsModify) && (selectedRows.length > 1)) {
              alert('Please select only one record.');
              selRowID = "";
              selEmpID = "";
              return -1;
          }

                          
          switch (TheStatus) {
              case cVoided:
                  if ((IsReverse)) row.set_selected(true);
                  break;
              case cDdPending:
                  //All actions allowed
                  row.set_selected(true);
                  break;
              case cDdDeposited:
                  if ((IsReverse)) row.set_selected(true);
                  break;
              case cDdInProcess:
                  if ((IsReverse)) row.set_selected(true);
                  break;
              case cDdPartial:
                  if ((IsReverse)) row.set_selected(true);
                  break;
              case cDdFailed:
                  if ((IsReverse)) row.set_selected(true);
                  break;
              case cCkPending:
                  //All actions allowed
                  row.set_selected(true);
                  break;
              case cCkPrinted:
                  if ((IsReverse)) row.set_selected(true);
                  break;
              case cHistory:
                  //No actions allowed
                  row.set_selected(true);
                  break;
              case cAjPending:
                  //All actions allowed
                  row.set_selected(true);
                  break;
              case cAjCommit:
                  if ((IsReverse)) row.set_selected(true);
                  break;
              case cAjVoided:
                  if ((IsReverse)) row.set_selected(true);
                  break;
              case cRvDdPending:
                  //All actions allowed
                  row.set_selected(true);
                  break;
              case cRvCkPending:
                  //All actions allowed
                  row.set_selected(true);
                  break;
              case cRvDdDeposited:
                  if ((IsReverse)) row.set_selected(true);
                  break;
              case cRvCkPrinted:
                  if ((IsReverse)) row.set_selected(true);
                  break;
              case cReversal:
                  if ((IsReverse)) row.set_selected(true);
                  break;
              default:
                  row.set_selected(false);
                  break;
          }

          if (row.get_selected() == true) {
              CheckCount++;
              selRowID += prK.innerText + ',';
              selEmpID += EmpId.innerText + ',';
          }
          else {
              //track which employee's were removed from the list;
              var eName = MasterTable.getCellByColumnUniqueName(row, "Name")
              InvalidEmpList += eName.innerText + '; ';
          }
         
      }
  

   if(InvalidEmpList.length>1) {
    //if any rows are deselected then deselect the chkAll check box
    //document.all['chkAll'].checked=false;
    InvalidEmpList=InvalidEmpList.substr(0,InvalidEmpList.length-2);
    var ModeDesc="";
    if(IsDelete) {
     ModeDesc="deletion";
    }
    else if(IsRecalc) {
     ModeDesc="recalculation";
    }
    else if(IsModify) {
     ModeDesc="modification";
    }
    else if(IsReverse) {
     ModeDesc="reversal";
    }
    else {
     ModeDesc="this function";
    }
    
    alert('The following employees cannot be selected for ' + ModeDesc + ':\n\n'+ InvalidEmpList);
   }
   
  }
  if(selRowID.length>0) selRowID=selRowID.substr(0,selRowID.length-1);
  if(selEmpID.length>0) selEmpID=selEmpID.substr(0,selEmpID.length-1);
  
  return CheckCount;
 }



Bind grid server side

 

 

 

Protected Sub BindGrid2()

 

 

 

Dim connectionString As String = ConfigurationManager.AppSettings.Item("ConnectString")

 

 

 

Dim strExcep As String = ""

 

 

 

 

 

 

 

Dim objPay As New Payroll

 

SqlDataSourceGrid.ConnectionString = connectionString

SqlDataSourceGrid.SelectCommand =

 

"Pr_GetPayCheckList"

 

 

 

 

 

SqlDataSourceGrid.SelectCommandType = SqlDataSourceCommandType.StoredProcedure

SqlDataSourceGrid.SelectParameters.Clear()

 

 

If radioGD.Items(1).Selected = True Then

 

 

 

 

 

SqlDataSourceGrid.SelectParameters.Add(

 

"mGrpKey", cmbGroup.Items(cmbGroup.SelectedIndex).Value)

 

 

 

Else

 

 

 

 

 

SqlDataSourceGrid.SelectParameters.Add(

 

"mGrpKey", -1)

 

 

 

End If

 

 

 

 

 

SqlDataSourceGrid.SelectParameters.Add(

 

"mDeptKey", -1)

 

SqlDataSourceGrid.SelectParameters.Add(

 

"mEmpKey ", -1)

 

 

 

If cmbPaydate.SelectedIndex > 0 Then

 

 

 

 

 

SqlDataSourceGrid.SelectParameters.Add(

 

"PayDate", cmbPaydate.Items(cmbPaydate.SelectedIndex).Value)

 

cmdRecalc.Disabled =

 

False

 

 

 

 

 

 

 

Else

 

 

 

 

 

cmdRecalc.Disabled =

 

True

 

 

 

 

 

 

 

End If

 

 

 

 

 

 

 

If objPay.GetData(SqlDataSourcePP, strExcep, "payperiods") = False Then

 

 

 

 

 

 

 

Throw New Exception(strExcep.ToString)

 

 

 

End If

 

 

 

 

 

 

 

If objPay.GetData(SqlDataSourceDepartment, strExcep, "departments") = False Then

 

 

 

 

 

 

 

Throw New Exception(strExcep.ToString)

 

 

 

End If

 

 

 

 

 

 

RadGrid1.MasterTableView.GetColumn(

 

"ClientSelectColumn").HeaderStyle.Width = Unit.Percentage(3)

 

RadGrid1.MasterTableView.GetColumn(

 

"PR_KEY").HeaderStyle.Width = Unit.Point(0)

 

RadGrid1.MasterTableView.GetColumn(

 

"Value1").HeaderStyle.Width = Unit.Point(0)

 

RadGrid1.MasterTableView.GetColumn(

 

"hds").HeaderStyle.Width = Unit.Point(0)

 

RadGrid1.MasterTableView.GetColumn(

 

"ESF_KEY").HeaderStyle.Width = Unit.Point(0)

 

RadGrid1.MasterTableView.GetColumn(

 

"keyid").HeaderStyle.Width = Unit.Point(0)

 

 

RadGrid1.MasterTableView.GetColumn(

 

"PR_KEY").Display = False

 

 

 

 

 

RadGrid1.MasterTableView.GetColumn(

 

"Value1").Display = False

 

 

 

 

 

RadGrid1.MasterTableView.GetColumn(

 

"hds").Display = False

 

 

 

 

 

RadGrid1.MasterTableView.GetColumn(

 

"ESF_KEY").Display = False

 

 

 

 

 

RadGrid1.MasterTableView.GetColumn(

 

"keyid").Display = False

 

 

 

 

 

RadGrid1.MasterTableView.GetColumn(

 

"Name").HeaderStyle.Width = Unit.Percentage(12)

 

RadGrid1.MasterTableView.GetColumn(

 

"Description").HeaderStyle.Width = Unit.Percentage(12)

 

RadGrid1.MasterTableView.GetColumn(

 

"Department").HeaderStyle.Width = Unit.Percentage(15)

 

RadGrid1.MasterTableView.GetColumn(

 

"Paydate").HeaderStyle.Width = Unit.Percentage(8)

 

RadGrid1.MasterTableView.GetColumn(

 

"PayDateFrom").HeaderStyle.Width = Unit.Percentage(10)

 

RadGrid1.MasterTableView.GetColumn(

 

"Paydateto").HeaderStyle.Width = Unit.Percentage(10)

 

RadGrid1.MasterTableView.GetColumn(

 

"Status").HeaderStyle.Width = Unit.Percentage(15)

 

RadGrid1.MasterTableView.GetColumn(

 

"NetPay").HeaderStyle.Width = Unit.Percentage(8)

 

 

SqlDataSourceGrid.SelectParameters.Add(

 

"bRequired", 1)

 

SqlDataSourceGrid.SelectParameters.Add(

 

"PayPeriod", -1)

 

SqlDataSourceGrid.SelectParameters.Add(

 

"BankAc", -1)

 

RadGrid1.MasterTableView.GetColumn(

 

"PayDate").FilterImageUrl = ImagePath & "/Filter.gif"

 

 

 

 

 

RadGrid1.DataSourceID =

 

"SqlDataSourceGrid"

 

 

 

 

 

 

 

End Sub


set grids properties in base class

 

 

 

 

 

 

 

Protected Sub SetRadGridProperties(ByVal grd As RadGrid)

 

 

 

Try

 

 

 

 

 

grd.EnableEmbeddedSkins =

 

False

 

 

 

 

 

grd.AutoGenerateColumns =

 

False

 

 

 

 

 

grd.CssClass =

 

"normal"

 

 

 

 

 

 

 

'grd.ShowFooter = False

 

 

 

 

 

grd.BorderColor = System.Drawing.Color.FromArgb(66, 105, 99)

grd.BorderWidth =

 

New System.Web.UI.WebControls.Unit("1")

 

 

 

'grd.GridLines = GridLines.Both

 

 

 

 

 

grd.CellPadding = 0

grd.CellSpacing = 0

grd.BorderStyle = System.Web.UI.WebControls.BorderStyle.Outset

grd.HeaderStyle.Height =

 

New System.Web.UI.WebControls.Unit("24")

 

grd.HeaderStyle.Width =

 

New System.Web.UI.WebControls.Unit("1")

 

grd.HeaderStyle.VerticalAlign = VerticalAlign.NotSet

grd.HeaderStyle.CssClass =

 

"GridColHeadNormal"

 

 

 

 

 

grd.ItemStyle.CssClass =

 

"GridRow"

 

 

 

 

 

grd.AlternatingItemStyle.CssClass =

 

"GridAltRow"

 

 

 

 

 

grd.PagerStyle.Height =

 

New System.Web.UI.WebControls.Unit("18")

 

grd.PagerStyle.HorizontalAlign = HorizontalAlign.NotSet

grd.PagerStyle.Mode = System.Web.UI.WebControls.PagerMode.NumericPages

grd.AllowSorting =

 

True

 

 

 

 

 

grd.EnableLinqExpressions =

 

False

 

 

 

 

 

grd.AllowFilteringByColumn =

 

True

 

 

 

 

 

grd.ClientSettings.Selecting.AllowRowSelect =

 

True

 

 

 

 

 

grd.ClientSettings.Scrolling.UseStaticHeaders =

 

True

 

 

 

 

 

grd.AllowMultiRowSelection =

 

True

 

 

 

 

 

 

 

''grd.ClientSettings.Scrolling.ScrollHeight = Unit.Percentage(60)

 

 

 

 

 

grd.ClientSettings.Scrolling.AllowScroll =

 

True

 

 

 

 

 

 

grd.FilterItemStyle.Height = Unit.Pixel(30)

 

 

 

 

Catch ex As Exception

 

 

 

End Try

 

 

 

 

 

 

 

End Sub

please check and advise, what is the reason that grids functions executing really slow in sorting, flipping headers with scrolling,

 

 

 

 

one thing when i set the clientsettings.allowscrolling = false, in that case it performs better but in that case i lost my static header property,

waiting for your response

 

 

1 Answer, 1 is accepted

Sort by
0
Maria Ilieva
Telerik team
answered on 11 Oct 2010, 11:05 AM
Hi Kiran,

Tips on how to optimize the RadGrid performance using different techniques can be found in the online resources linked below:

http://www.telerik.com/help/aspnet-ajax/gridoverview.html (Chapter "Performance tips and tricks")
http://www.telerik.com/products/aspnet-ajax/resources/top-performance.aspx
http://www.telerik.com/support/aspnet-ajax.aspx (Section "Performance")

Moreover, you can examine the demos from the 'Performance' section of the RadGrid QSF which apply those methods in reality:

http://demos.telerik.com/aspnet-ajax/grid/examples/overview/defaultcs.aspx  


I hope this helps.

Kind regards,
Maria Ilieva
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
Asked by
Kiran
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
Share this question
or