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

RadGrid becomes too slow when binding over 100 records

10 Answers 1449 Views

Grid

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

Ei Wai asked on 26 Mar 2015, 10:08 AM

Hello,

I have a problem when loading radgrid. Grid loading time is fast If my dataset is only 10 records or so. But if it is over 100 records, loading takes at least 10 seconds which is not acceptable. I already have paging and my paging set as 31. I tried to set page size to 10 and it is also not working. I've also tried to do as suggested here . I tried to disable viewstate and my grid is gone. I have to use row double click features since I need to show more details. Please suggest.

<telerik:RadGrid ID="gvViewTrans" AllowFilteringByColumn="false" runat="server" AllowSorting="false"

AutoGenerateColumns="false" Skin="MySkin" EnableEmbeddedSkins="false" AllowMultiRowEdit="false"

PageSize="31" AllowPaging="true" OnNeedDataSource="gvViewTrans_NeedDataSource"

OnItemDataBound="gvViewTrans_ItemDataBound" OnItemCommand="gvViewTrans_ItemCommand">

<ClientSettings EnableRowHoverStyle="true">

<Selecting AllowRowSelect="True"></Selecting>

<ClientEvents OnRowClick="RowClick" OnRowDblClick="RowDblClick" OnGridCreated="gvViewTransCreated"

OnGridCreating="GridCreated4" />

<Scrolling AllowScroll="True" UseStaticHeaders="true" SaveScrollPosition="true" FrozenColumnsCount="5">

</Scrolling>

</ClientSettings>

<MasterTableView DataKeyNames="SID" ClientDataKeyNames="SID" CommandItemDisplay="Top"

AutoGenerateColumns="false" Width="100%">

<CommandItemTemplate>

<div style="display: none;">

<telerik:RadButton ID="btnSave" runat="server" Text="Save" Width="80px" Skin="Sitefinity"

CommandName="Save" EnableEmbeddedSkins="false">

<Icon PrimaryIconUrl="Images/save.png" PrimaryIconTop="3px" PrimaryIconLeft="5px" />

</telerik:RadButton>

</div>

</CommandItemTemplate>

<HeaderStyle BackColor="#941922" ForeColor="White" />

<Columns>

<telerik:GridBoundColumn UniqueName="Date" HeaderText="Date" ReadOnly="true" DataFormatString="{0:dd/MM/yyyy}"

DataField="Trans_Date" ItemStyle-Height="25px" Display="false">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

<HeaderStyle Width="90px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Day" HeaderText="Day" ReadOnly="true" DataField="Trans_Date"

DataFormatString="{0:ddd}" Display="false" ItemStyle-Height="25px">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

<HeaderStyle Width="60px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="EmployeeID" HeaderText="EmployeeID" ReadOnly="true"

DataField="EmployeeID" ItemStyle-Height="25px" Display="false">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

<HeaderStyle Width="100px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="TempEmpID" HeaderText="EmployeeID" ReadOnly="true"

DataField="TempEmpID" ItemStyle-BackColor="#F6EFD7" HeaderStyle-Width="100px"

ItemStyle-Height="50px" ItemStyle-Width="36px" Display="true">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="EmployeeName" HeaderText="Employee" ReadOnly="true"

DataField="EmployeeName" ItemStyle-Height="25px">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

<HeaderStyle Width="150px" />

</telerik:GridBoundColumn>

<telerik:GridCheckBoxColumn UniqueName="Locked" HeaderText="Lock" DataField="Locked"

Visible="false" Display="false">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

<HeaderStyle Width="50px" />

</telerik:GridCheckBoxColumn>

<telerik:GridTemplateColumn HeaderText="Locked" Visible="true">

<ItemTemplate>

<asp:CheckBox ID="chkLocked" runat="server" AutoPostBack="true" OnCheckedChanged="chkLocked_CheckedChanged"

Checked='<%#bool.Parse(Eval("Locked").ToString())%>' />

</ItemTemplate>

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

<HeaderStyle Width="50px" />

</telerik:GridTemplateColumn>

<telerik:GridCheckBoxColumn UniqueName="Freeze" HeaderText="Freeze" DataField="Freeze"

Visible="true">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

<HeaderStyle Width="50px" />

</telerik:GridCheckBoxColumn>

<telerik:GridCheckBoxColumn UniqueName="Edit" HeaderText="Edit" DataField="Edit"

Display="false" Visible="false">

<%--<ItemStyle BackColor="#F6EFD7"></ItemStyle>--%>

<HeaderStyle Width="50px" />

</telerik:GridCheckBoxColumn>

<telerik:GridBoundColumn UniqueName="In" HeaderText="In" ReadOnly="true" DataFormatString="{0:HH:mm}"

DataField="In1">

<%--<ItemStyle BackColor="#F2F2F2"></ItemStyle>--%>

<HeaderStyle BackColor="#941922" Width="60px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Out" HeaderText="Out" ReadOnly="true" DataFormatString="{0:HH:mm}"

DataField="Out1">

<%--<ItemStyle BackColor="#F2F2F2"></ItemStyle>--%>

<HeaderStyle BackColor="#941922" Width="60px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="NRM" HeaderText="NRM" ReadOnly="true" DataField="TotalFinalWkhr">

<%--<ItemStyle BackColor="#F2F2F2"></ItemStyle>--%>

<HeaderStyle BackColor="#941922" Width="60px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Late" HeaderText="Late" ReadOnly="true" DataField="TotalLate">

<%--<ItemStyle BackColor="#F2F2F2"></ItemStyle>--%>

<HeaderStyle BackColor="#941922" Width="60px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="EarlyOut" HeaderText="EOut" ReadOnly="true"

DataField="TotalEarlyOut">

<%--<ItemStyle BackColor="#F2F2F2"></ItemStyle>--%>

<HeaderStyle BackColor="#941922" Width="60px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="WKOT" HeaderText="WKOT" ReadOnly="true" DataField="WKOT">

<%--<ItemStyle BackColor="#F2F2F2"></ItemStyle>--%>

<HeaderStyle BackColor="#941922" Width="60px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="OFFOT" HeaderText="OFFOT" ReadOnly="true" DataField="OFFOT">

<%--<ItemStyle BackColor="#F2F2F2"></ItemStyle>--%>

<HeaderStyle BackColor="#941922" Width="60px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Part_Time" HeaderText="PTHrs" ReadOnly="true"

DataField="Part_Time">

<%--<ItemStyle BackColor="#F2F2F2"></ItemStyle>--%>

<HeaderStyle BackColor="#941922" Width="60px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="TotalActualWkhr" HeaderText="Act Hrs" ReadOnly="true"

DataField="TotalActualWkhr">

<%--<ItemStyle BackColor="#F2F2F2"></ItemStyle>--%>

<HeaderStyle BackColor="#941922" Width="60px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="SEVent" HeaderText="SEvent" ReadOnly="true"

DataField="SEVent">

<%--<ItemStyle BackColor="#F2F2F2"></ItemStyle>--%>

<HeaderStyle BackColor="#941922" Width="60px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="SplitShiftAllowance" HeaderText="SShift" ReadOnly="true"

DataField="SplitShiftAllowance">

<%--<ItemStyle BackColor="#F2F2F2"></ItemStyle>--%>

<HeaderStyle BackColor="#941922" Width="60px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Others1" HeaderText="Others1" ReadOnly="true"

DataField="Others1">

<%--<ItemStyle BackColor="#F2F2F2"></ItemStyle>--%>

<HeaderStyle BackColor="#941922" Width="60px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Others2" HeaderText="Others2" ReadOnly="true"

DataField="Others2">

<%--<ItemStyle BackColor="#F2F2F2"></ItemStyle>--%>

<HeaderStyle BackColor="#941922" Width="60px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Others3" HeaderText="Others3" ReadOnly="true"

DataField="Others3">

<%--<ItemStyle BackColor="#F2F2F2"></ItemStyle>--%>

<HeaderStyle BackColor="#941922" Width="60px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Others4" HeaderText="Others4" ReadOnly="true"

DataField="Others4">

<%--<ItemStyle BackColor="#F2F2F2"></ItemStyle>--%>

<HeaderStyle BackColor="#941922" Width="60px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Others5" HeaderText="Others5" ReadOnly="true"

DataField="Others5">

<%--<ItemStyle BackColor="#F2F2F2"></ItemStyle>--%>

<HeaderStyle BackColor="#941922" Width="60px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Location" HeaderText="Location" ReadOnly="true"

DataField="MLocation">

<%--<ItemStyle BackColor="#F2F2F2"></ItemStyle>--%>

<HeaderStyle BackColor="#941922" Width="100px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Skill" HeaderText="Skill" ReadOnly="true" DataField="MSkill">

<%--<ItemStyle BackColor="#F2F2F2"></ItemStyle>--%>

<HeaderStyle BackColor="#941922" Width="100px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="CCenter" HeaderText="C.Center" ReadOnly="true"

DataField="MCostCenter">

<%--<ItemStyle BackColor="#F2F2F2"></ItemStyle>--%>

<HeaderStyle BackColor="#941922" Width="100px" />

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn UniqueName="Reason" HeaderText="Reason">

<HeaderStyle BackColor="#941922" Width="100px" />

<ItemTemplate>

<asp:Label ID="lblReason" runat="server" Text=""></asp:Label>

<%-- <telerik:RadComboBox ID="RCB_ReasonCode" runat="server" Width="80px" ZIndex="1000000"

AllowCustomText="false" EnableLoadOnDemand="true" OnItemsRequested="cboReason_ItemsRequested">

</telerik:RadComboBox>

<br />

<telerik:RadComboBox ID="RCB_ReasonCode2" runat="server" Width="80px" ZIndex="1000000"

AllowCustomText="false" EnableLoadOnDemand="true" OnItemsRequested="cboReason_ItemsRequested">

</telerik:RadComboBox>--%>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="ReasonCodeTemp" HeaderText="ReasonCodeTemp"

Visible="false">

<HeaderStyle BackColor="#941922" Width="40px" />

<ItemTemplate>

<asp:TextBox ID="txtReason1" Text='<%# DataBinder.Eval(Container.DataItem, "ReasonCode") %>'

Width="450px" runat="server"></asp:TextBox>

<br />

<asp:TextBox ID="txtReason2" Text='<%# DataBinder.Eval(Container.DataItem, "ReasonCode2") %>'

Width="450px" runat="server"></asp:TextBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<%--<telerik:GridTemplateColumn UniqueName="TxnRemarks" HeaderText="Remarks" Display="false">

<HeaderStyle BackColor="#941922" Width="200px" />

<ItemTemplate>

<asp:TextBox ID="TxnRemarks" Text='<%# DataBinder.Eval(Container.DataItem, "TxnRemarks") %>'

Width="450px" runat="server"></asp:TextBox>

</ItemTemplate>

</telerik:GridTemplateColumn>--%>

<%--<telerik:GridTemplateColumn UniqueName="SchLoc" HeaderText="SchLoc">

<ItemStyle BackColor="#F2F2F2"></ItemStyle>

<HeaderStyle BackColor="#941922" Width="100px" />

<ItemTemplate>

<telerik:RadComboBox ID="RCB_SchLoc" runat="server" Width="80px" OnItemsRequested="cboLocation_ItemsRequested"

EnableLoadOnDemand="true" ZIndex="1000000" Enabled="False" EnableEmbeddedSkins="False"

EnableEmbeddedScripts="False">

</telerik:RadComboBox>

<br />

<telerik:RadComboBox ID="RCB_SchLoc2" runat="server" Width="80px" OnItemsRequested="cboLocation_ItemsRequested"

EnableLoadOnDemand="true" ZIndex="1000000" Enabled="False" EnableEmbeddedSkins="False"

EnableEmbeddedScripts="False">

</telerik:RadComboBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="SchSkill" HeaderText="SchSkill">

<ItemStyle BackColor="#F2F2F2"></ItemStyle>

<HeaderStyle BackColor="#941922" Width="100px" />

<ItemTemplate>

<telerik:RadComboBox ID="RCB_SchSkill" runat="server" Width="80px" ZIndex="1000000"

EnableLoadOnDemand="true" OnItemsRequested="cboSchSkill1_ItemsRequested" Enabled="False"

EnableEmbeddedSkins="False" EnableEmbeddedScripts="False">

</telerik:RadComboBox>

<br />

<telerik:RadComboBox ID="RCB_SchSkill2" runat="server" Width="80px" ZIndex="1000000"

EnableLoadOnDemand="true" OnItemsRequested="cboSchSkill2_ItemsRequested" Enabled="False"

EnableEmbeddedSkins="False" EnableEmbeddedScripts="False">

</telerik:RadComboBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="SchSection" HeaderText="SchC.Center">

<ItemStyle BackColor="#F2F2F2"></ItemStyle>

<HeaderStyle BackColor="#941922" Width="100px" />

<ItemTemplate>

<telerik:RadComboBox ID="RCB_SchSection" runat="server" Width="80px" ZIndex="1000000"

EnableLoadOnDemand="true" OnItemsRequested="cboSchSection1_ItemsRequested" Enabled="False"

EnableEmbeddedSkins="False" EnableEmbeddedScripts="False">

</telerik:RadComboBox>

<br />

<telerik:RadComboBox ID="RCB_SchSection2" runat="server" Width="80px" ZIndex="1000000"

EnableLoadOnDemand="true" OnItemsRequested="cboSchSection2_ItemsRequested" Enabled="False"

EnableEmbeddedSkins="False" EnableEmbeddedScripts="False">

</telerik:RadComboBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="SchLocTemp" HeaderText="SchLocTemp" Visible="false">

<HeaderStyle BackColor="#941922" Width="40px" />

<ItemTemplate>

<asp:TextBox ID="txtSchLoc1" Text='<%# DataBinder.Eval(Container.DataItem, "SchLoc1") %>'

Width="450px" runat="server"></asp:TextBox>

<br />

<asp:TextBox ID="txtSchLoc2" Text='<%# DataBinder.Eval(Container.DataItem, "SchLoc2") %>'

Width="450px" runat="server"></asp:TextBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="SchSkillTemp" HeaderText="SchSkillTemp" Visible="false">

<HeaderStyle BackColor="#941922" Width="40px" />

<ItemTemplate>

<asp:TextBox ID="txtSchSkill1" Text='<%# DataBinder.Eval(Container.DataItem, "SchSkill1") %>'

Width="450px" runat="server"></asp:TextBox>

<br />

<asp:TextBox ID="txtSchSkill2" Text='<%# DataBinder.Eval(Container.DataItem, "SchSkill2") %>'

Width="450px" runat="server"></asp:TextBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="SchSectionTemp" HeaderText="SchSectionTemp"

Visible="false">

<HeaderStyle BackColor="#941922" Width="40px" />

<ItemTemplate>

<asp:TextBox ID="txtSchSection1" Text='<%# DataBinder.Eval(Container.DataItem, "SchSection1") %>'

Width="450px" runat="server"></asp:TextBox>

<br />

<asp:TextBox ID="txtSchSection2" Text='<%# DataBinder.Eval(Container.DataItem, "SchSection2") %>'

Width="450px" runat="server"></asp:TextBox>

</ItemTemplate>

</telerik:GridTemplateColumn>--%>

<telerik:GridBoundColumn UniqueName="TxnRemarks" HeaderText="Remarks" DataField="TxnRemarks">

<HeaderStyle BackColor="#941922" Width="360px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ClockIn" ReadOnly="true" HeaderText="Clk1" DataField="ClockIn1"

DataFormatString="{0:HH:mm}">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

<HeaderStyle BackColor="#941922" Width="45px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ClockOut" ReadOnly="true" HeaderText="Clk2"

DataField="ClockOut1" DataFormatString="{0:HH:mm}">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

<HeaderStyle BackColor="#941922" Width="45px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ClockIn2" ReadOnly="true" HeaderText="Clk3"

DataField="ClockIn2" DataFormatString="{0:HH:mm}">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

<HeaderStyle BackColor="#941922" Width="45px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ClockOut2" ReadOnly="true" HeaderText="Clk4"

DataField="ClockOut2" DataFormatString="{0:HH:mm}">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

<HeaderStyle BackColor="#941922" Width="45px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ClockIn3" ReadOnly="true" HeaderText="Clk5"

DataField="ClockIn3" DataFormatString="{0:HH:mm}">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

<HeaderStyle BackColor="#941922" Width="45px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ClockOut3" ReadOnly="true" HeaderText="Clk6"

DataField="ClockOut3" DataFormatString="{0:HH:mm}">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

<HeaderStyle BackColor="#941922" Width="45px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ClockIn4" ReadOnly="true" HeaderText="Clk7"

DataField="ClockIn4" DataFormatString="{0:HH:mm}">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

<HeaderStyle BackColor="#941922" Width="45px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ClockOut4" ReadOnly="true" HeaderText="Clk8"

DataField="ClockOut4" DataFormatString="{0:HH:mm}">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

<HeaderStyle BackColor="#941922" Width="45px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ClockIn5" ReadOnly="true" HeaderText="Clk9"

DataField="ClockIn5" DataFormatString="{0:HH:mm}">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

<HeaderStyle BackColor="#941922" Width="45px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ClockOut5" ReadOnly="true" HeaderText="Clk10"

DataField="ClockOut5" DataFormatString="{0:HH:mm}">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

<HeaderStyle BackColor="#941922" Width="45px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ClockIn6" ReadOnly="true" HeaderText="Clk11"

DataField="ClockIn6" DataFormatString="{0:HH:mm}">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

<HeaderStyle BackColor="#941922" Width="45px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ClockOut6" ReadOnly="true" HeaderText="Clk12"

DataField="ClockOut6" DataFormatString="{0:HH:mm}">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

<HeaderStyle BackColor="#941922" Width="45px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ClockIn7" ReadOnly="true" HeaderText="Clk13"

DataField="ClockIn7" DataFormatString="{0:HH:mm}">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

<HeaderStyle BackColor="#941922" Width="45px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ClockOut7" ReadOnly="true" HeaderText="Clk14"

DataField="ClockOut7" DataFormatString="{0:HH:mm}">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

<HeaderStyle BackColor="#941922" Width="45px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ClockIn8" ReadOnly="true" HeaderText="Clk15"

DataField="ClockIn8" DataFormatString="{0:HH:mm}">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

<HeaderStyle BackColor="#941922" Width="45px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ClockOut8" ReadOnly="true" HeaderText="Clk16"

DataField="ClockOut8" DataFormatString="{0:HH:mm}">

<ItemStyle BackColor="#F6EFD7"></ItemStyle>

<HeaderStyle BackColor="#941922" Width="45px" />

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<PagerStyle AlwaysVisible="true" />

</telerik:RadGrid>

Best regards,
Ei Wai

10 Answers, 1 is accepted

answered on 10 Apr 2015, 03:03 AM

Hello Jayesh,

I tried to do client-side binding as described here .But I got a few problems.

1. The styles I set for each column is gone after I change to client side binding.

2. I cannot bind data to the control within Itemtemplate.

For second problem, I am using asp checkbox control inside itemtemplate. I tried to use findElement like I found out from this link. But still no luck.

function gvViewTrans_RowDataBound(sender, args) {

var chkLocked = args.get_item().findElement("Locked"); // cannot find control

chkLocked.checked = args.get_dataItem()["Locked"];

var linkSID = args.get_item().findControl("EmpLocation");// cannot find control even if I do the same as example

linkSID.innerHTML = args.get_dataItem()["EmpLocation"];

}

<telerik:GridTemplateColumn HeaderText="LOCK" Visible="true" DataField="Locked">

<ItemTemplate>

<asp:CheckBox ID="Locked" runat="server" AutoPostBack="true" OnCheckedChanged="chkLocked_CheckedChanged" />

</ItemTemplate>

<ItemStyle BackColor="#F6EFD7" Height="25px"></ItemStyle>

<HeaderStyle Width="50px" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="EmpLocation" HeaderText="EmpLocation" >

<ItemTemplate>

<telerik:RadTextBox ID="EmpLocation" runat="server" Width="80px">

</telerik:RadTextBox>

</ItemTemplate>

<ItemStyle BackColor="#F6EFD7" Height="25px"></ItemStyle>

<HeaderStyle Width="50px" />

</telerik:GridTemplateColumn>

I am not sure what I did wrongly.

Thank you.

Best regards,

Ei Wai

answered on 10 Apr 2015, 04:32 AM

radgrid_serverbind.png

radgrid_clientbind.png

Hello,

One more problem I found out is I cannot format decimal value to have two decimal places. I tried to put DataFormatString="{0:0.00} and DataType="System.Decimal" . But I got Sys.FormatException. I tried to use GridNumericColumn but it is still the same.

Please see attached files for server-side binding and client-side binding UI changes.

<telerik:GridBoundColumn UniqueName="ActNRM" HeaderText="NRM*" ReadOnly="true" DataField="TotalActNRM"

DataType="System.Decimal" DataFormatString="{0:0.00}">

<HeaderStyle BackColor="#941922" Width="66px" />

</telerik:GridBoundColumn>

<telerik:GridNumericColumn DataField="TotalActNRM" DataType="System.Decimal"

HeaderText="TotalActNRM" UniqueName="TotalActNRM" DataFormatString="{0:0.00}">

<HeaderStyle BackColor="#941922" Width="66px" />

</telerik:GridNumericColumn>

Thank you.

Best regards,

Ei Wai

answered on 14 Apr 2015, 02:37 AM

Hello Jayesh,

I tried to create element in client side binding.

function gvViewTrans_RowDataBound(sender, args) {

var celName = args.get_item().get_cell("Locked");

var input = document.createElement("input");

input.type = 'checkbox';

input.checked = args.get_dataItem()["Locked"];

celName.appendChild(input);

}

It did create the checkbox but it create again if I change page index for radgrid. So there will be multiple checkbox inside the column if I change the paging. And another problem is I cannot use radcombox inside Itemtemplate column. For now I don't need to bind the data for radcombobox. I just want to show combo dropdown inside the grid. But the dropdown is not showing up.

<telerik:GridTemplateColumn HeaderText="Supervisor" Visible="true" UniqueName="Supervisor">

<ItemTemplate>

<telerik:RadComboBox ID="cboSupervisor" runat="server" Width="50px" AllowCustomText="false"

EnableEmbeddedSkins="false" EnableEmbeddedScripts="False" NoWrap="true" MaxHeight="200px"

DropDownWidth="300px">

<Items>

<telerik:RadComboBoxItem Value="Pending" Text="Pending" />

<telerik:RadComboBoxItem Value="Approve" Text="Approve" />

<telerik:RadComboBoxItem Value="Not Approve" Text="Not Approve" />

</Items>

</telerik:RadComboBox>

</ItemTemplate>

<ItemStyle BackColor="#F6EFD7" Height="25px"></ItemStyle>

<HeaderStyle Width="100px" />

</telerik:GridTemplateColumn>

And I would be appreciate if you can answer my other questions which is decimal value cannot format and styles gone for columns.

Thank you so much for your help.

Best regards,

Ei Wai

answered on 14 Apr 2015, 02:51 AM

Hello Jayesh,

One more thing is I tried to use telerik radtextbox to be like in this example. But I still cannot find textbox in client databound events. Is there anything missing.

<telerik:GridTemplateColumn SortExpression="TotalActNRM" DataField="TotalActNRM"

HeaderText="TotalActNRM">

<ItemTemplate>

<telerik:RadTextBox ID="TotalActNRM" runat="server" Width="80px">

</telerik:RadTextBox>

</ItemTemplate>

<HeaderStyle Width="50px" />

</telerik:GridTemplateColumn>

function gvViewTrans_RowDataBound(sender, args) {

var TotalActNRM = args.get_item().findControl("TotalActNRM");// return null

}

Best regards,

Ei Wai

answered on 15 Apr 2015, 11:02 AM

Hello Jaya,

Generally, browsers have a hard time handling large scale tables:
http://stackoverflow.com/questions/3174490/is-there-any-limit-on-number-of-html-elements-that-browser-can-display-without

And combine that with including any script control inside the table cells and you get a massive load on the browser and some of the browsers may fail or take a lot of time to load. Therefore, we suggest you to reduce the cell count as much as possible by enabling paging, virtualization, etc.

Please note that the main input RadControls are complex script controls which require some script load. To optimize the page load performance and thus the user-action responsiveness, you can replace the RadComboBoxes with RadDropDownLists:
http://demos.telerik.com/aspnet-ajax/dropdownlist/examples/overview/defaultcs.aspx

Analogously, you can try to replace the RadTextBoxes, RadNumericTextBoxes and RadDatePickers with asp:TextBoxes and use RadInputManager:
http://demos.telerik.com/aspnet-ajax/input/examples/radinputmanager/dynamicinputfiltersettings/defaultcs.aspx?product=grid
Here are some other basic samples:
http://demos.telerik.com/aspnet-ajax/input/examples/radinputmanager/firstlook/defaultcs.aspx

These modifications should increase the performance drastically.

Regards,
Eyup
Telerik

See What's Next in App Development. Register for TelerikNEXT.