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

Grid drag header (grouping) slow with jQuery 1.8.2?

6 Answers 129 Views

General Discussions

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

6 Answers, 1 is accepted

answered on 18 Mar 2013, 05:11 PM

Hi,

I set up an empty project to demonstrate the problem and added the grid with same code and initially it appears to work fine however once I loaded data into the grid it appears to be slower.

I was originally using the telerik ASP.NET grid control with the same dataset and did not experience any performance hit.

Only difference is Kendo connects over webservice. Web service is simple asp web service that returns a list of objects as json. Data is returning 122rows and 10 columns. Not sure if datasize affects performance of initiating dragging column headers. (Is it doing any pre-initialization to set up the grouping before it is actually dropped on to the grouping panel?)

Any suggestions?

I have never used jsbin/jsfiddle?

Also, I am using Kendo UI Web Q3 2012 not 2013. 2013 is for the asp.net controls :)

Here is the code if you are interested:
<%@ Page Language="vb" MasterPageFile="~/Site1.Master" AutoEventWireup="false" CodeBehind="TestPage1.aspx.vb" Inherits="TestTelerikGrid.TestPage1" %>

<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="HeadContent">
<title>Test</title>
<link href="css/kendo.common.min.css" rel="stylesheet" />
<link href="css/kendo.default.min.css" rel="stylesheet" />
<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.web.min.js"></script>

</asp:Content>
<asp:Content runat="server" ContentPlaceHolderID="MainContent">
<div id="grid"></div>

<script>
function getQueryStrings() {
var assoc = {};
var decode = function (s) { return decodeURIComponent(s.replace(/\+/g, " ")); };
var queryString = location.search.substring(1);
var keyValues = queryString.split('&');

for (var i in keyValues) {
var key = keyValues[i].split('=');
if (key.length > 1) {
assoc[decode(key[0])] = decode(key[1]);
}
}

return assoc;
}
var qs = getQueryStrings();

$(function () {
ds = new kendo.data.DataSource({
schema: {
data: "d"
},
transport: {
read: {
type: "POST",
contentType: "application/json",
url: "http://localhost:65328/WebServices/TestService.asmx/MyData"
},
parameterMap: function (data, type) {
switch (type) {
case "read":
return (JSON.stringify({
Account: ('A' in qs) ? qs["A"] : "",
YearPeriod: ('P' in qs) ? qs["P"] : ""
}));
break;
default:
break;
};
}
},
});

$("#grid").kendoGrid({
autobind: false,
dataSource: ds,
columns: [
{ field: "Field1", title: "Field1", width: 125 },
{ field: "Field2", title: "Field2", width: 70 },
{ field: "Field3", title: "Field3", width: 110 },
{ field: "Field4", title: "Field4", width: 110 },
{ field: "Field5", title: "Field5", width: 120 },
{ field: "Field6", title: "Field6", width: 60 },
{ field: "Field7", title: "Field7", width: 110 },
{ field: "Field8", title: "Field8", width: 110 },
{ field: "Field9", title: "Field9", width: 110 },
{ field: "Field10", title: "Field10", width: 110 }
],
editable: false,
filterable: false,
groupable: true,
sortable: false,
pageable: false,
scrollable: true,
height: 650
});
});
</script>

</asp:Content>

Accepted