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

Slow Grid Performance when adding lots of columns

0 Answers 57 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Andy
Top achievements
Rank 1
Andy asked on 30 Aug 2012, 07:08 AM
I am experience performance degradation when displaying lots of columns.  Even when I only retrieve 2 or 3 records my grid is crashing. Is there anything that I can change to get better performance or will I have to reduce the number of columns in the grid?  Here is my grid.

            $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: {
                            url: "Services/MetaKPITicker.asmx/GetPagedKPIList",
                            contentType: "application/json; charset=utf-8",
                            type: "POST",
                            dataType: "json"
                        },
                        parameterMap: function (options) {
                            return kendo.stringify({ dsOptions: options });
                        }
                    },
                    schema: {
                        data: "d.data",
                        total: "d.total",
                        model: {
                            fields: {
                                ClientID: { type: "string" },
                                ClientName: { type: "string" },
                                RegionDisplay: { type: "string" },
                                RankByPymtActual: { type: "number" },
                                ClientTotalRating: { type: "number" },
                                ProceduresVsKPI: { type: "number" },
                                ProceduresVsYOY: { type: "number" },
                                ChargeActualVsKPI: { type: "number" },
                                ChrgActualYOY: { type: "number" },
                                PymtActualVsKPI: { type: "number" },
                                PymtActualYOY: { type: "number" },
                                RevVsBdgt: { type: "number" },
                                StmtSentL7: { type: "number" },
                                StmtL7perProc: { type: "number" },
                                LttrSentL7: { type: "number" },
                                LttrL7perProc: { type: "number" },
                                OBCallsL7: { type: "number" },
                                OBCallL7perProc: { type: "number" },
                                IBCallL7AgtHndl: { type: "number" },
                                AgtHndlL7perProc: { type: "number" },
                                IBCallL7IVRHndl: { type: "number" },
                                IVRHndlL7perProc: { type: "number" },
                                HndlRate: { type: "number" },
                                AvgHoldTime: { type: "number" },
                                DataCaptureProcedureCount: { type: "number" },
                                DataCaptureDaysOfChrg: { type: "number" },
                                RVUperProcedure: { type: "number" },
                                AvgDaysFromLoadToCreate6Mo: { type: "number" },
                                AvgDaysFromLoadToCreate1Mo: { type: "number" },
                                AvgDaysFromFileToAcceptance6Mo: { type: "number" },
                                AvgDaysFromFileToAcceptance1Mo: { type: "number" },
                                AvgDaysFromCreateTo1stPayment6Mo: { type: "number" },
                                AvgDaysFromCreateTo1stPayment1Mo: { type: "number" },
                                AvgDaysFromDepositToPost6Mo: { type: "number" },
                                AvgDaysFromDepositToPost1Mo: { type: "number" },
                                CodingRFI6mAvg: { type: "number" },
                                CodingRFI1mCount: { type: "number" },
                                CodingRFI6mRespRate: { type: "number" },
                                CodingRFI1mRespRate: { type: "number" },
                                CodingRFI6mAdndRate: { type: "number" },
                                CodingRFI1mAdndRate: { type: "number" },
                                AppealsLast7Days: { type: "number" },
                                AppealsL7perProc: { type: "number" },
                                DaysInARActual: { type: "number" },
                                DaysInARvsKPI: { type: "number" },
                                ExpectedVarianceVsGCR: { type: "number" },
                                ExpectedVarianceVsPayment: { type: "number" },
                                WorkfilePctAll: { type: "number" },
                                WorkfilePctOnHold: { type: "number" },
                                WorkfilePctCollection: { type: "number" },
                                ChargeCount28dActual: { type: "number" },
                                ChargeCount28dKPI: { type: "number" },
                                Charges28dKPI: { type: "number" },
                                Charges28dActual: { type: "number" },
                                ChargeDifferenceVsKPI: { type: "number" },
                                ChargeDifferenceYOY: { type: "number" },
                                Payments28dKPI: { type: "number" },
                                PaymentsActual: { type: "number" },
                                PaymentDifferenceVsKPI: { type: "number" },
                                PaymentDifferenceYOY: { type: "number" }
                            }
                        }
                    },
                    pageSize: 25,
                    serverPaging: true,
                    serverSorting: true
                },
                height: gridHeight,
                columnMenu: true,
                navigatable: true,
                scrollable: true,
                sortable: {
                    mode: "multiple"
                },
                pageable: true,
                groupable: true,
                resizable: true,
                filterable: true,
                reorderable: true,
                selectable: "row",
                columns: [
                    {
                        field: "ClientID",
                        title: "Client ID",
                        width: 78,
                        template: '<a href="\\#" class="k-button" onclick="reloadMain(\'ClientMain.aspx?dataSourceID=${DataSourceID}&clientID=${ClientID}\');">${ClientID}</a>'
                    },
                    {
                        field: "ClientName",
                        title: "Client Name",
                        width: 300
                    },
                    {
                        field: "RegionDisplay",
                        title: "Region",
                        width: 90
                    },
                    {
                        field: "RankByPymtActual",
                        title: "Rank",
                        width: 80
                    },
                    {
                        field: "ClientTotalRating",
                        title: "Rating",
                        width: 100,
                        template: ' # if (ClientTotalRating < 6) { # <div style="background-color:\\#FF4D4D; color:black; text-align:right;">#=reformatDecimal(ClientTotalRating, 1)#</div> # } else if (ClientTotalRating > 6 && ClientTotalRating < 8) { # <div style="background-color:\\#FFFF99; color:black; text-align:right;">#=reformatDecimal(ClientTotalRating, 1)#</div> # } else { # <div style="text-align:right;">#=reformatDecimal(ClientTotalRating, 1)#</div> # } # '
                    },
                    {
                        field: "ProceduresVsKPI",
                        title: "Procedures vs. KPI",
                        width: 140,
                        template: '<div style="text-align:right;">#=reformatDecimal(ProceduresVsKPI, 1)#</div>'
                    },
                    {
                        field: "ProceduresVsYOY",
                        title: "Procedures vs. YOY",
                        width: 140,
                        template: '<div style="text-align:right;">#=reformatDecimal(ProceduresVsYOY, 1)#</div>'
                    },
                    {
                        field: "ChargeActualVsKPI",
                        title: "Charge Actual vs. KPI",
                        width: 140,
                        template: '<div style="text-align:right;">#=reformatDecimal(ChargeActualVsKPI, 1)#</div>'
                    },
                    {
                        field: "ChrgActualYOY",
                        title: "Charge Actual YOY",
                        width: 140,
                        template: '<div style="text-align:right;">#=reformatDecimal(ChrgActualYOY, 1)#</div>'
                    },
                    {
                        field: "PymtActualVsKPI",
                        title: "Payments vs. KPI",
                        width: 120,
                        template: '<div style="text-align:right;">#=reformatDecimal(PymtActualVsKPI, 1)#</div>'
                    },
                    {
                        field: "PymtActualYOY",
                        title: "Payments Actual YOY",
                        width: 140,
                        template: '<div style="text-align:right;">#=reformatDecimal(PymtActualYOY, 1)#</div>'
                    },
                    {
                        field: "RevVsBdgt",
                        title: "Revenue vs. Budget",
                        width: 140,
                        template: '<div style="text-align:right;">#=reformatDecimal(RevVsBdgt, 1)#</div>'
                    },
                    {
                        field: "StmtSentL7",
                        title: "Statements Sent<br/>(7 Days)",
                        width: 120,
                        template: '<div style="text-align:right;">#=reformatInteger(StmtSentL7)#</div>'
                    },
                    {
                        field: "StmtL7perProc",
                        title: "Statements Sent<br/>(7/Chrg)",
                        width: 120,
                        template: '<div style="text-align:right;">#=reformatDecimal(StmtL7perProc, 3)#</div>'
                    },
                    {
                        field: "LttrSentL7",
                        title: "Letters Sent<br/>(7 Days)",
                        width: 120,
                        template: '<div style="text-align:right;">#=reformatInteger(LttrSentL7)#</div>'
                    },
                    {
                        field: "LttrL7perProc",
                        title: "Letters Sent<br/>(7/Chrg)",
                        width: 120,
                        template: '<div style="text-align:right;">#=reformatDecimal(LttrL7perProc, 3)#</div>'
                    },
                    {
                        field: "OBCallsL7",
                        title: "Outbound Calls<br/>(7 Days)",
                        width: 120,
                        template: '<div style="text-align:right;">#=reformatInteger(OBCallsL7)#</div>'
                    },
                    {
                        field: "OBCallL7perProc",
                        title: "Outbound Calls<br/>(7/Chrg)",
                        width: 120,
                        template: '<div style="text-align:right;">#=reformatDecimal(OBCallL7perProc, 3)#</div>'
                    },
                    {
                        field: "IBCallL7AgtHndl",
                        title: "Inbound Calls<br/>(7 Days Agent Hndl)",
                        width: 140,
                        template: '<div style="text-align:right;">#=reformatInteger(IBCallL7AgtHndl)#</div>'
                    },
                    {
                        field: "AgtHndlL7perProc",
                        title: "Inbound Calls<br/>(7 Agent/Chrg)",
                        width: 120,
                        template: '<div style="text-align:right;">#=reformatDecimal(AgtHndlL7perProc, 3)#</div>'
                    },
                    {
                        field: "IBCallL7IVRHndl",
                        title: "Inbound Calls<br/>(7 Days IVR Hndl)",
                        width: 120,
                        template: '<div style="text-align:right;">#=reformatInteger(IBCallL7IVRHndl)#</div>'
                    },
                    {
                        field: "IVRHndlL7perProc",
                        title: "Inbound Calls<br/>(7 IVR/Chrg)",
                        width: 120,
                        template: '<div style="text-align:right;">#=reformatDecimal(IVRHndlL7perProc, 3)#</div>'
                    },                    
                    {
                        field: "HndlRate",
                        title: "Handle Rate",
                        width: 120,
                        template: '<div style="text-align:right;">#=reformatDecimal(HndlRate, 1)#%</div>'
                    },                    
                    {
                        field: "AvgHoldTime",
                        title: "Avg Hold Time",
                        width: 124,
                        template: '<div style="text-align:right;">#=AvgHoldTime#</div>'
                    },
                    {
                        field: "DataCaptureProcedureCount",
                        title: "Data Capture<br/>Procedure Count",
                        width: 130,
                        template: '<div style="text-align:right;">#=reformatInteger(DataCaptureProcedureCount)#</div>'
                    },
                    {
                        field: "DataCaptureDaysOfChrg",
                        title: "Data Capture<br/>Days of Chrg",
                        width: 120,
                        template: '<div style="text-align:right;">#=reformatDecimal(DataCaptureDaysOfChrg, 2)#</div>'
                    },
                    {
                        field: "RVUperProcedure",
                        title: "RVU Per Procedure",
                        width: 130,
                        template: '<div style="text-align:right;">#=reformatDecimal(RVUperProcedure, 3)#</div>'
                    },
                    {
                    field: "AvgDaysFromLoadToCreate6Mo",
                    title: "Avg Days from<br/>Load to Create (6m)",
                    width: 150,
                    template: '<div style="text-align:right;">#=reformatDecimal(AvgDaysFromLoadToCreate6Mo, 1)#</div>'
                    },
                    {
                    field: "AvgDaysFromLoadToCreate1Mo",
                    title: "Avg Days from<br/>Load to Create (1m)",
                    width: 150,
                    template: '<div style="text-align:right;">#=reformatDecimal(AvgDaysFromLoadToCreate1Mo, 1)#</div>'
                    },
                    {
                    field: "AvgDaysFromFileToAcceptance6Mo",
                    title: "Avg Days from<br/>File to Accept (6m)",
                    width: 150,
                    template: '<div style="text-align:right;">#=reformatDecimal(AvgDaysFromFileToAcceptance6Mo, 1)#</div>'
                    },
                    {
                    field: "AvgDaysFromFileToAcceptance1Mo",
                    title: "Avg Days from<br/>File to Accept (1m)",
                    width: 150,
                    template: '<div style="text-align:right;">#=reformatDecimal(AvgDaysFromFileToAcceptance1Mo, 1)#</div>'
                    },
                    {
                    field: "AvgDaysFromCreateTo1stPayment6Mo",
                    title: "Avg Days from<br/>Create to 1st Pymt (6m)",
                    width: 160,
                    template: '<div style="text-align:right;">#=reformatDecimal(AvgDaysFromCreateTo1stPayment6Mo, 1)#</div>'
                    },
                    {
                    field: "AvgDaysFromCreateTo1stPayment1Mo",
                    title: "Avg Days from<br/>Create to 1st Pymt (1m)",
                    width: 160,
                    template: '<div style="text-align:right;">#=reformatDecimal(AvgDaysFromCreateTo1stPayment1Mo, 1)#</div>'
                    },
                    {
                    field: "AvgDaysFromDepositToPost6Mo",
                    title: "Avg Days from<br/>Deposit to Post (6m)",
                    width: 160,
                    template: '<div style="text-align:right;">#=reformatDecimal(AvgDaysFromDepositToPost6Mo, 1)#</div>'
                    },
                    {
                    field: "AvgDaysFromDepositToPost1Mo",
                    title: "Avg Days from<br/>Deposit to Post (1m)",
                    width: 160,
                    template: '<div style="text-align:right;">#=reformatDecimal(AvgDaysFromDepositToPost1Mo, 1)#</div>'
                    },
                    {
                    field: "CodingRFI6mAvg",
                    title: "Coding RFI<br/>6m Avg",
                    width: 120,
                    template: '<div style="text-align:right;">#=reformatDecimal(CodingRFI6mAvg, 1)#</div>'
                    },
                    {
                    field: "CodingRFI1mCount",
                    title: "Coding RFI<br/>1m Count",
                    width: 120,
                    template: '<div style="text-align:right;">#=reformatInteger(CodingRFI1mCount)#</div>'
                    },                     
                    {
                    field: "CodingRFI6mRespRate",
                    title: "Coding RFI<br/>6m Response%",
                    width: 130,
                    template: '<div style="text-align:right;">#=reformatDecimal(CodingRFI6mRespRate, 1)#%</div>'
                    },
                    {
                    field: "CodingRFI1mRespRate",
                    title: "Coding RFI<br/>1m Response%",
                    width: 130,
                    template: '<div style="text-align:right;">#=reformatDecimal(CodingRFI1mRespRate, 1)#%</div>'
                    },
                    {
                    field: "CodingRFI6mAdndRate",
                    title: "Coding RFI<br/>6m Addendum%",
                    width: 130,
                    template: '<div style="text-align:right;">#=reformatDecimal(CodingRFI6mAdndRate, 1)#%</div>'
                    },
                    {
                    field: "CodingRFI1mAdndRate",
                    title: "Coding RFI<br/>1m Addendum%",
                    width: 130,
                    template: '<div style="text-align:right;">#=reformatDecimal(CodingRFI1mAdndRate, 1)#%</div>'
                    },
                    {
                    field: "AppealsLast7Days",
                    title: "Appeals<br/>(7 Days)",
                    width: 120,
                    template: '<div style="text-align:right;">#=reformatInteger(AppealsLast7Days)#</div>'
                    },
                    {
                    field: "AppealsL7perProc",
                    title: "Appeals<br/>Last 7/Procedure",
                    width: 140,
                    template: '<div style="text-align:right;">#=reformatDecimal(AppealsL7perProc, 3)#</div>'
                    },
                    {
                    field: "DaysInARActual",
                    title: "Days in AR<br/>Actual",
                    width: 120,
                    template: '<div style="text-align:right;">#=reformatDecimal(DaysInARActual, 1)#</div>'
                    },
                    {
                    field: "DaysInARvsKPI",
                    title: "Days in AR<br/>vs. KPI",
                    width: 120,
                    template: '<div style="text-align:right;">#=reformatDecimal(DaysInARvsKPI, 1)#%</div>'
                    },
                    {
                    field: "ExpectedVarianceVsGCR",
                    title: "Expected Variance<br/>vs. GCR%",
                    width: 140,
                    template: '<div style="text-align:right;">#=reformatDecimal(ExpectedVarianceVsGCR, 1)#%</div>'
                    },
                    {
                    field: "ExpectedVarianceVsPayment",
                    title: "Expected Variance<br/>vs. Payment $",
                    width: 140,
                    template: '<div style="text-align:right;">#=reformatInteger(ExpectedVarianceVsPayment)#%</div>'
                    },
                    {
                    field: "WorkfilePctAll",
                    title: "Workfile %<br/>All",
                    width: 130,
                    template: '<div style="text-align:right;">#=reformatDecimal(WorkfilePctAll, 1)#%</div>'
                    },
                    {
                    field: "WorkfilePctOnHold",
                    title: "Workfile %<br/>On Hold",
                    width: 130,
                    template: '<div style="text-align:right;">#=reformatDecimal(WorkfilePctOnHold, 1)#%</div>'
                    },
                    {
                    field: "WorkfilePctCollection",
                    title: "Workfile %<br/>Collection",
                    width: 130,
                    template: '<div style="text-align:right;">#=reformatDecimal(WorkfilePctCollection, 1)#%</div>'
                    },
                    {
                    field: "ChargeCount28dActual",
                    title: "Procedure Count<br/>Actual",
                    width: 130,
                    template: '<div style="text-align:right;">#=reformatInteger(ChargeCount28dActual)#%</div>'
                    },
                    {
                    field: "ChargeCount28dKPI",
                    title: "Procedure Count<br/>KPI",
                    width: 130,
                    template: '<div style="text-align:right;">#=reformatInteger(ChargeCount28dKPI)#%</div>'
                    },
                    {
                    field: "Charges28dKPI",
                    title: "Total Charges<br/>KPI",
                    width: 130,
                    template: '<div style="text-align:right;">#=reformatInteger(Charges28dKPI)#</div>'
                    },
                    {
                    field: "Charges28dActual",
                    title: "Total Charges<br/>Actual",
                    width: 130,
                    template: '<div style="text-align:right;">$#=reformatInteger(Charges28dActual)#</div>'
                    },
                    {
                    field: "ChargeDifferenceVsKPI",
                    title: "Charge Differences<br/>vs. KPI",
                    width: 130,
                    template: '<div style="text-align:right;">$#=reformatInteger(ChargeDifferenceVsKPI)#</div>'
                    },
                    {
                    field: "ChargeDifferenceYOY",
                    title: "Charge Differences<br/>YOY",
                    width: 130,
                    template: '<div style="text-align:right;">$#=reformatInteger(ChargeDifferenceYOY)#</div>'
                    },
                    {
                    field: "Payments28dKPI",
                    title: "Total Payments<br/>KPI",
                    width: 130,
                    template: '<div style="text-align:right;">$#=reformatInteger(Payments28dKPI)#</div>'
                    },
                    {
                    field: "PaymentsActual",
                    title: "Total Payments<br/>Actual",
                    width: 130,
                    template: '<div style="text-align:right;">$#=reformatInteger(PaymentsActual)#</div>'
                    },
                    {
                    field: "PaymentDifferenceVsKPI",
                    title: "Payment Differences<br/>vs. KPI",
                    width: 130,
                    template: '<div style="text-align:right;">$#=reformatInteger(ChargeDifferenceVsKPI)#</div>'
                    },
                    {
                    field: "PaymentDifferenceYOY",
                    title: "Payment Differences<br/>YOY",
                    width: 130,
                    template: '<div style="text-align:right;">$#=reformatInteger(PaymentDifferenceYOY)#</div>'
                    }                
                ],
                dataBound: function (e) {
                    selectGridRow("grid", 0);
                    var selectedRow = $("#grid").find("tbody tr.k-state-selected");
                    var kpi = $("#grid").data("kendoGrid").dataItem(selectedRow);
                },
                change: function (e) {
                    var selectedRow = $("#grid").find("tbody tr.k-state-selected");
                    var kpi = $("#grid").data("kendoGrid").dataItem(selectedRow);
                    if ($("#selectedAppBusinessEntityID").val() != kpi.AppBusinessEntityID) {
                        reloadCommentStream("GetClientComments.aspx?dataSourceID=" + kpi.DataSourceID + "&clientID=" + kpi.ClientID + "&appBusinessEntityID=" + kpi.AppBusinessEntityID + "&region=" + kpi.RegionDisplay);
                    }
                    $("#selectedAppBusinessEntityID").val(kpi.AppBusinessEntityID);
                }
            });
        }

No answers yet. Maybe you can help?

Tags
Grid
Asked by
Andy
Top achievements
Rank 1
Share this question
or