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

 

 

Hi Telerik Team,

I have been doing the following functinalites when my Telerik Grid client select column is selected,
1)I am reading Id column value and sending some data to db
2)reading id column value and getting data from db

but, those 2 functionalites can not be clubed due to some buisness rules.

so, i am trying to separte that into 2 functinalites.
1)when i click on GridClientSelectcolumn, i want to read Id column value without any postback
2)If i click on GridRow i want to get data from db

but, if i make 'AutoPostBack' property of grid false,then i am able to read Idcolumn value and able to complete 1st task using ClientDataKeys,but i am unable to getdata from db for 2nd task since that post back was false.

so can you please advice me any solutions, which i can make 2 operations with 2 events by selecting GridClientSelectColumn.

So, I want to make grid postaback false and if i click on GridClientSelect column then i want to read db value and if i click on row then i want to get some data from db.

Hi,
Is there a difference between namespaces 'Telerik.Web.UI' and 'Telerik.WebControls.UI? I guess so because I have (only) using directive 'using Telerik.Web.UI;' in my code behind file and then I got error message

"The type or namespace name 'WebControls' does not exist in the namespace 'Telerik' (are you missing an assembly reference?)".

My problem is that I can't add namespace 'using Telerik.WebControls.UI;'. How to be able to add 'using Telerik.WebControls.UI'? Have I missed to import a reference? In that case, what reference do I need to add?

Any kind of help is highly appreciated.

I am looking for a way to load ALL children for a given node (including children of children) while using Load on Demand.  I want to expand ALL from a given root node.  My goal is to trigger expanding all when a user checks a nodes checkbox.

Hi

I am trying to make use of hyperlink - anchor in one of my rad pane. The radpane contains a whole new page , defined by contentUrl property.

Now when I click on hyperlink in this page inside radPane, instead of updating the pane url , it updates the whole parent page url. I have set the target property of hyperlink to "_self" , but it still updates parent page containing splitter.

Is there any specific function to be used to make use of anchor in radpanes ?

HI,

Why the following statement does not work?

Hi Telerik,

I'm using code from http://demos.telerik.com/aspnet-ajax/grid/examples/client/caching/defaultcs.aspx to EnableCaching in RadGrid,

I have one question is: Can I use on my EnableCaching NestedViewTemplate in RadGrid.
If possible, please send me a an example

Thanks

We have been using Telerik Grid and customizing its look and feel.

We have changed word wrap into break-word and have changed background color of few rows.

Upon selecting a row, the row selected was not entirely highlighted. Please check the attached screenshot

Code snippet used to hightlight row is given:

if (e.Item is GridDataItem)

  {

    GridDataItem dataItem = e.Item as GridDataItem;

    dataItem.BackColor = System.Drawing.Color.Tan;

    dataItem.Font.Bold = true;

 }

Please let me know a valid workaround

Thank you

Regards
Raj

Hi,

I wanna display totals at the footer of gridview, but it returns empty even if im binding the data from database.
I'm not sure if footer template can accept this code:



Thanks,
Cielo