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
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