[Solved] checkbox selection is very slow...

[Babu Puchakayala]

Hi,

I am using telerik radgrid. The radgrid performance is worst in following  scenarios. Please let me know if there is any other way to improve the performance.

1. I have radgrid with PagerStyle Mode="NextPrevAndNumeric" option, In dropdown i implemented "viewall" option to show all rows in a grid. When i selected view all option the radgrid performance is very slow in both  IE6, IE7 and Firefox. Even its getting stuck (See the attached image) in both browsers. I am showing around 6000 records in radgrid. Its taking around 30sec - 40sec to show the all rows in a grid and the grid is very slow for swapping, filtering, sorting and even for scrolling down.

2. I have GridClientSelectColumn in my radgrid. When I am showing all rows in a grid and when I am trying to select all rows in a grid using check box column its getting very slow in IE7(around 6 - 7 sec to select all rows) But in Firefox it is better( 2 sec).

Is there any better way to improve performance of a radgrid. Is there other way to bind the data to the grid when user select "viewall" option?

Please find my attached code.

.ASPX

<asp:Content ID="Content1" ContentPlaceHolderID="CSS_ScriptPlaceHolder" runat="Server">
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <link href="CSS/Css.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">

            function onAgrtypeOther() {
                if (document.getElementById('tabTskDet_tabAgreInfo_ddlAgreementType').selectedIndex == 4)
                    document.getElementById('trAgrTypeOther').style.visibility = 'visible';
                else
                    document.getElementById('trAgrTypeOther').style.visibility = 'hidden';
                return false;
            }
            function onPertypeOther() {
                if (document.getElementById('tabTskDet_tabPermit_ddlPermitType').selectedIndex == 3)
                    document.getElementById('tdPerTypeOther').style.visibility = 'visible';
                else
                    document.getElementById('tdPerTypeOther').style.visibility = 'hidden';
                return false;
            }
            function onSitetypeOther() {
                if (document.getElementById('tabTskDet_tabGenTskDet_ddlSiteType').selectedIndex == 4)
                    document.getElementById('tabTskDet_tabGenTskDet_tdSiteTypeOth').style.visibility = 'visible';
                else
                    document.getElementById('tabTskDet_tabGenTskDet_tdSiteTypeOth').style.visibility = 'hidden';
                return false;

            }
            function onPwrtypeOther() {
                if (document.getElementById('tabTskDet_tabGenTskDet_ddlPwrStatus').selectedIndex == 4)
                    document.getElementById('tabTskDet_tabGenTskDet_tdPwrStatusOth').style.visibility = 'visible';
                else
                    document.getElementById('tabTskDet_tabGenTskDet_tdPwrStatusOth').style.visibility = 'hidden';
                return false;
            }
            function onEqiLoctypeOther() {
                if (document.getElementById('tabTskDet_tabGenTskDet_ddlEquiLocDesc').selectedIndex == 3)
                    document.getElementById('tabTskDet_tabGenTskDet_tdEquiLocDescOth').style.visibility = 'visible';
                else
                    document.getElementById('tabTskDet_tabGenTskDet_tdEquiLocDescOth').style.visibility = 'hidden';
                return false;
            }
            function showOthRea() {
                var dt1 = new Date(document.getElementById("tabTskDet_tabGenTskDet_txtConstSchCompDate").value);
                var dt2 = new Date(document.getElementById("tabTskDet_tabGenTskDet_txtConstActCompDate").value);
                if (dt1 < dt2) {
                    document.getElementById("tabTskDet_tabGenTskDet_tdDtLateRea306").style.display = "block"
                }
                else {
                    document.getElementById("tabTskDet_tabGenTskDet_tdDtLateRea306").style.display = "none"
                    document.getElementById("tabTskDet_tabGenTskDet_lblDueDtLateRea").value = ''
                }
            }
            function showOthRea303() {
                var dt1 = new Date(document.getElementById("tabTskDet_tabGenTskDet_txtContSchComDt").value);
                var dt2 = new Date(document.getElementById("tabTskDet_tabGenTskDet_txtConstActComDt").value);
                if (dt1 < dt2) {
                    document.getElementById("tabTskDet_tabGenTskDet_tdDtLateRea303").style.display = "block"
                }
                else {
                    document.getElementById("tabTskDet_tabGenTskDet_tdDtLateRea303").style.display = "none"
                    document.getElementById("tabTskDet_tabGenTskDet_lbl303DueDtLateRea").value = ''
                }
            }
            function DisplayDateToday(sender, args) {
                if (sender._selectedDate == null) {
                    sender._selectedDate = new Date();
                }
            }
            function onRequestStart(sender, args) {
                if (args.get_eventTarget().indexOf("ExportToExcelButton") >= 0 ||
                    args.get_eventTarget().indexOf("ExportToWordButton") >= 0 ||
                    args.get_eventTarget().indexOf("ExportToPdfButton") >= 0 ||
                    args.get_eventTarget().indexOf("ExportToCsvButton") >= 0) {

                    args.set_enableAjax(false);
                }
            }
        </script>

        <style>
            .modalBackground
            {
                background-color: Gray;
                filter: alpha(opacity=70);
                opacity: 0.7;
            }
            .AjaxCalendar .ajax__calendar_container
            {
                border: 1px solid #646464;
                background-color: White;
                color: Black;
            }
            .AjaxCalendar .ajax__calendar_other .ajax__calendar_day, .AjaxCalendar .ajax__calendar_other .ajax__calendar_year
            {
                color: #999999;
            }
            .AjaxCalendar .ajax__calendar_hover .ajax__calendar_day, .AjaxCalendar .ajax__calendar_hover .ajax__calendar_month, .AjaxCalendar .ajax__calendar_hover .ajax__calendar_year
            {
                color: Red;
            }
            .AjaxCalendar .ajax__calendar_active .ajax__calendar_day, .AjaxCalendar .ajax__calendar_active .ajax__calendar_month, .AjaxCalendar .ajax__calendar_active .ajax__calendar_year
            {
                background-color: #78C43C;
                color: Black;
                text-align: center;
                font-weight: bold;
            }
            .rgPageFirst, .rgPagePrev, .rgPageNext, .rgPageLast
            {
                display: none !important;
            }
            div.RadGrid_Default .rgHeader, div.RadGrid_Default th.rgResizeCol
            {
                background-image: none;
            }
        </style>
    </telerik:RadCodeBlock>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PagePlaceholder" runat="Server">
    <div style="width: 100%; padding-top: 20px">
        <table style="width: 98%">
            <tr>
                <td colspan="2">
                    <asp:Label runat="server" Font-Bold="true" Font-Size="14pt" ID="lblTskName"></asp:Label>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                    </telerik:RadScriptManager>
                    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                        <ClientEvents OnRequestStart="onRequestStart" />
                        <AjaxSettings>
                            <telerik:AjaxSetting AjaxControlID="rg209">
                                <UpdatedControls>
                                    <telerik:AjaxUpdatedControl ControlID="rg209" LoadingPanelID="RadAjaxLoadingPanel1" />
                                </UpdatedControls>
                            </telerik:AjaxSetting>
                        </AjaxSettings>
                    </telerik:RadAjaxManager>
                    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
                    </telerik:RadAjaxLoadingPanel>
                    <telerik:RadGrid ID="rg209" runat="server" AutoGenerateColumns="false" Height="550px"
                        OnNeedDataSource="rg209_NeedDataSource" Width="100%" AllowPaging="True" AllowSorting="True"
                        AllowMultiRowSelection="True" EnableHeaderContextMenu="true" GridLines="None"
                        EnableHeaderContextFilterMenu="true" AllowMultiRowEdit="true" AllowFilteringByColumn="True"
                        OnPreRender="rg209_PreRender" OnItemCreated="rg209_ItemCreated" EnableViewState="false">
                        <HeaderStyle Height="20px" BackColor="#004000" Font-Size="8pt" Font-Bold="True" ForeColor="White"
                            HorizontalAlign="Center" BorderColor="White" BorderWidth="1px" />
                        <ExportSettings IgnorePaging="true" ExportOnlyData="true">
                            <Pdf AllowModify="false" AllowPrinting="true" PageBottomMargin="" PageFooterMargin=""
                                PageHeaderMargin="" PageHeight="11in" PageLeftMargin="" PageRightMargin="" PageTopMargin=""
                                PageWidth="14in" />
                        </ExportSettings>
                        <MasterTableView DataKeyNames="orderId" CommandItemDisplay="Top" EditMode="InPlace"
                            PageSize="10">
                            <CommandItemSettings ShowExportToWordButton="true" ShowExportToExcelButton="true"
                                ShowExportToCsvButton="true" ShowExportToPdfButton="true" ShowAddNewRecordButton="false" />
                            <Columns>
                                <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" HeaderStyle-Width="3%"
                                    ItemStyle-Width="3%">
                                </telerik:GridClientSelectColumn>
                                <telerik:GridBoundColumn UniqueName="sId" HeaderText="sId" DataField="sId" Visible="false">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="orderId" HeaderText="orderId" DataField="orderId"
                                    Visible="false">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="Customer Name" HeaderText="Customer Name" DataField="Customer Name"
                                    ReadOnly="true">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="Market Name" HeaderText="Market Name" DataField="Market Name"
                                    ReadOnly="true">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="LOB" HeaderText="LOB" DataField="LOB" ReadOnly="true">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="Headend Name" HeaderText="Headend Name" DataField="Headend Name"
                                    ReadOnly="true">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="Project Name" HeaderText="Project Name" DataField="Project Name"
                                    ReadOnly="true">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="Site Name" HeaderText="Site Name" DataField="Site Name"
                                    ReadOnly="true">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="Task Status" HeaderText="Task Status" DataField="Task Status"
                                    ReadOnly="true">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="Sch SM Imp Date" HeaderText="Sch SM Imp Date"
                                    DataField="Sch SM Imp Date" ReadOnly="true">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="Target PTD" HeaderText="Target PTD" DataField="Target PTD">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="Actual PTD" HeaderText="Actual PTD" DataField="Actual PTD">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="Foc Date" HeaderText="Foc Date" DataField="Foc Date">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="Notification Date" HeaderText="Notification Date"
                                    DataField="Notification Date">
                                </telerik:GridBoundColumn>
                                <telerik:GridCheckBoxColumn UniqueName="Include FOC?" HeaderText="Include FOC?" DataField="Include FOC?">
                                </telerik:GridCheckBoxColumn>
                                <telerik:GridCheckBoxColumn UniqueName="Include DLR?" HeaderText="Include DLR?" DataField="Include DLR?">
                                </telerik:GridCheckBoxColumn>
                                <telerik:GridEditCommandColumn UniqueName="ECC209">
                                </telerik:GridEditCommandColumn>
                            </Columns>
                        </MasterTableView>
                        <ClientSettings EnableRowHoverStyle="true" ReorderColumnsOnClient="false" AllowDragToGroup="false"
                            AllowColumnsReorder="True">
                            <Scrolling AllowScroll="true" EnableVirtualScrollPaging="false" UseStaticHeaders="true" />
                            <Selecting AllowRowSelect="True"></Selecting>
                            <Resizing AllowRowResize="true" AllowColumnResize="True" EnableRealTimeResize="True"
                                ResizeGridOnColumnResize="False"></Resizing>
                        </ClientSettings>
                        <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true"></PagerStyle>
                    </telerik:RadGrid>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    &nbsp;
                </td>
            </tr>
        </table>
    </div>
</asp:Content>

.CS

public partial class Tak209 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        try
        {
            if (!IsPostBack)
            {
                Session["SearchRes"] = null;
                if (Session["TaskName"] != null)
                    lblTskName.Text = Session["TaskName"].ToString();
                Session["FilColms"] = null;
                Session["SortExp"] = null;
                Session["FilExp"] = null;
                Session["ViewAll"] = null;
                BindGrid();
            }
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }

    private void BindGrid()
    {
        try
        {
            DataSet dsResult = new DataSet();

            clsSearch_BL clsObj = new clsSearch_BL();
            clsObj.TaskID = (string)Session["TaskID"];
            clsObj.CustName = (string)Session["CustName"];
            clsObj.MarketName = (string)Session["MarketName"];
            clsObj.HeadendName = (string)Session["HeadendName"];
            clsObj.SiteName = (string)Session["SiteName"];
            clsObj.TaskStatus = (string)Session["TaskStatus"];
            clsObj.OrdType = (string)Session["OrdType"];
            clsObj.OrdStatus = (string)Session["OrdStatus"];
            clsObj.ProName = (string)Session["ProName"];
            clsObj.LOC = (string)Session["LOC"];
            clsObj.QuoteID = (string)Session["QuoteID"];
            clsObj.CMNumber = (string)Session["CMNumber"];

            if (Session["SearchRes"] == null)
            {
                dsResult = clsObj.getSearchResults_BL(clsObj);
                Session["SearchRes"] = dsResult;
            }
            else
                dsResult = (DataSet)Session["SearchRes"];

            DataView dataView = dsResult.Tables[0].DefaultView;
            rg209.DataSource = dsResult;
            //rg209.DataBind();
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }

    protected void rg209_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
    {
        BindGrid();
    }

    protected void rg209_PreRender(object sender, EventArgs e)
    {
        rg209.MasterTableView.GetColumnSafe("RowIndicator").Display = false;

    }

    protected void rg209_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridPagerItem)
        {
            RadComboBox combo = (e.Item as GridPagerItem).FindControl("PageSizeComboBox") as RadComboBox;

            // The number of items shown when all is selected
            int allRowsCount = int.MaxValue;

            // Remove duplicates
            RadComboBoxItem duplicate = combo.Items.FindItemByValue(allRowsCount.ToString());
            if (duplicate != null)
            {
                duplicate.Remove();
            }

            // Create a new item for showing all
            RadComboBoxItem item = new RadComboBoxItem("All", allRowsCount.ToString());
            item.Attributes.Add("ownerTableViewId", e.Item.OwnerTableView.ClientID);
            combo.Items.Add(item);

            // Set the current pagesize as the selected value
            combo.Items.FindItemByValue(rg209.PageSize.ToString()).Selected = true;
        }
    }
}

[Pavlina]

Hi Babu,

I already answered your other ticket with the same question. However, you can see the answer here.

Kind regards,
Pavlina
the Telerik team