RadGrid becomes too slow when binding over 100 records

11 posts, 0 answers
  1. Ei Wai
    Ei Wai avatar
    56 posts
    Member since:
    Jul 2014

    Posted 26 Mar 2015 Link to this post

    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
  2. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 26 Mar 2015 in reply to Ei Wai Link to this post

    Hello EiWai,

    If you have number of rows and columns is very high than I would suggest that please use client side binding method in-place of server side binding.

    Thanks,
    Jayesh Goyani
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ei Wai
    Ei Wai avatar
    56 posts
    Member since:
    Jul 2014

    Posted 09 Apr 2015 in reply to Jayesh Goyani Link to this post

    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

     

     

  5. Ei Wai
    Ei Wai avatar
    56 posts
    Member since:
    Jul 2014

    Posted 09 Apr 2015 Link to this post

    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

     

     

  6. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 10 Apr 2015 in reply to Ei Wai Link to this post

    Hello Ei Wai,

    My apologies for but for template column we have to manually create element in client side binding.

    Please check the below link.

     http://www.telerik.com/forums/gridtemplatecolumn-empty-when-radgrid-bound-with-json-data-on-client-side#LgNO3806EkyiDaMwi2K8HA

    Let me know if any concern.

    Thanks,

    Jayesh Goyani

  7. Jaya
    Jaya avatar
    81 posts
    Member since:
    Mar 2011

    Posted 11 Apr 2015 in reply to Jayesh Goyani Link to this post

    Hi

    Jayesh Goyani

     Can you solve this

     http://www.telerik.com/forums/how-to-use-edittemplate-in-telerik

  8. Ei Wai
    Ei Wai avatar
    56 posts
    Member since:
    Jul 2014

    Posted 13 Apr 2015 in reply to Jayesh Goyani Link to this post

    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

     

     

  9. Ei Wai
    Ei Wai avatar
    56 posts
    Member since:
    Jul 2014

    Posted 13 Apr 2015 in reply to Jayesh Goyani Link to this post

    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

  10. Ei Wai
    Ei Wai avatar
    56 posts
    Member since:
    Jul 2014

    Posted 14 Apr 2015 in reply to Jayesh Goyani Link to this post

    Hello Jayesh,

     I tried to use custom paging since I cannot really use client side binding method. Page loading time is fast enough. But when I change the paging the loading times seems to be increased. Loading time seems to be depend on page index. Is there anyway to solve that? 

     My sql statement is similar to this example. 

     

    Best regards,

    Ei Wai

     

  11. Jaya
    Jaya avatar
    81 posts
    Member since:
    Mar 2011

    Posted 14 Apr 2015 in reply to Jayesh Goyani Link to this post

    Hi

    Jayesh Goyani

     i saw this url but this  using SqlDataSource1 but i need everything  server side code C# databind  how will do this 

    same operation following this url but i no never need sqldatasource1 

    http://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/form-template-update/defaultcs.aspx

  12. Eyup
    Admin
    Eyup avatar
    3009 posts

    Posted 15 Apr 2015 Link to this post

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017