Kendo UI Grid Speed

[Bryan]

Would like some assistance on improving performance using Kendo UI Grids.

I am writing my web pages in Domino Xpages. Using a Rest Service to return my data sets. 

My load times when I go from page to page (or when I have to refresh the page via a delete) are from 1.4 to 4.5 seconds. This really seems slow to me, as I only have 10 records or so. Almost all of the stylesheets and javascript is being cached, so I don't think that is the problem.

I have attached a screen shot the shows the page took 1.55 seconds to load, but the time on the right hand side only adds up to 57 milliseconds. Where is the other delay coming from.

Here is my code:

 

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom"
xmlns:xe="http://www.ibm.com/xsp/coreex" createForm="false"
style="background-position:center left">

<xp:this.resources>
<xp:styleSheet href="/cc_CommonButtonPanel.css" />
<xp:styleSheet href="/cc_CommonDataView.css" />
</xp:this.resources>



<link rel="stylesheet" href="KendoUI/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="KendoUI/styles/kendo.bootstrap.min.css" />
<script src="KendoUI/js/jquery.min.js"></script>
<script src="KendoUI/js/kendo.all.min.js"></script>


<xp:div styleClass="container-fluid" style="margin-right:15.0px">
<xp:div styleClass="row" style="margin-bottom:15.0px" id="divGrid">

<xe:jsonRpcService id="jsonRpcService1"
serviceName="rpc1">
<xe:this.methods>
<xe:remoteMethod name="buildPC">
<xe:this.arguments>
<xe:remoteMethodArg type="string"
name="docUNID">
</xe:remoteMethodArg>a</xe:this.arguments>
</xe:remoteMethod>
<xe:remoteMethod name="deleteDoc">
<xe:this.arguments>
<xe:remoteMethodArg type="string"
name="docUNID">
</xe:remoteMethodArg>
</xe:this.arguments>
<xe:this.script><![CDATA[var db = session.getCurrentDatabase();
var doc:NotesDocument = db.getDocumentByUNID(docUNID);
doc.remove(true);]]></xe:this.script>
</xe:remoteMethod>
</xe:this.methods>
</xe:jsonRpcService>
<xc:cc_CommonButtonPanel>
<xp:this.facets>
<xc:cc_CommonSearchBar xp:key="facetRight"></xc:cc_CommonSearchBar>
<xp:span xp:key="facetLeft">
<xp:button value="Add New PC To Inventory" id="button2" styleClass="btn-primary dashBtn">
<xp:this.rendered><![CDATA[#{javascript:
return userBean.canCreateDocs;
}]]></xp:this.rendered>
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action>
<xp:openPage name="/xpFormPC.xsp" target="newDocument" />
</xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button id="button1"
styleClass="btn-primary dashBtn" value="Build PC">
<xp:eventHandler event="onclick"
submit="true" refreshMode="complete">
<xp:this.action>
<xp:openPage name="/xpFormPC.xsp"
target="newDocument" />
</xp:this.action>
<xp:this.script><![CDATA[var grid = $("#grid").data("kendoGrid");
var selectedItem = grid.dataItem(grid.select());
if (selectedItem == null)
{alert("You must select one document")}
else
{rpc1.buildPC(selectedItem.docUNID)
}]]></xp:this.script>
</xp:eventHandler>
</xp:button>
<xp:button value="Delete" id="button3"
styleClass="btn-danger dashBtn">
<xp:eventHandler event="onclick"
submit="false">
<xp:this.script><![CDATA[var grid = $("#grid").data("kendoGrid");
var selectedItem = grid.dataItem(grid.select());
if (selectedItem == null)
{alert("You must select one document")}
else
{rpc1.deleteDoc(selectedItem.docUNID)
$('#grid').data('kendoGrid').refresh();
}]]></xp:this.script>
</xp:eventHandler></xp:button>
</xp:span>
</xp:this.facets>
</xc:cc_CommonButtonPanel>
</xp:div>
<div class="row" id="grid">
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[$(document).ready( function() {


// Double Click On row
$("#grid").on(
"dblclick",
" tbody > tr",
function() {
var grid = $("#grid").data("kendoGrid");
var row = grid.dataItem($(this));
window.open(
"xpFormPC.xsp" + "?OpenDocument=" + row.docUNID,
"_self");
});


// Add hover effect
addExtraStylingToGrid = function() {
$("table.k-focusable tbody tr ").hover( function() {
$(this).toggleClass("k-state-hover");
});
};


// Search
$("#search").keyup( function() {
var val = $('#search').val();
$("#grid").data("kendoGrid").dataSource.filter( {
logic : "or",
filters : [ {
field : "serialNumber",
operator : "contains",
value : val
}, {
field : "officeLoc",
operator : "contains",
value : val
}, {
field : "model",
operator : "contains",
value : val
} ]
});
});


// Grid
grid = $("#grid").kendoGrid( {
dataSource : {
transport : {
read : "rsPC.xsp/PC1"
},
     pageSize : 20
},
columns : [ {
field : "serialNumber",
title : "Serial Number"
}, {
field : "officeLoc",
title : "Office Location"
}, {
field : "model",
title : "Model"
} ],
change : onChange,
edit : onEdit,
reorderable : true,
scrollable : true,
pageable : true,
sortable : true,
groupable : false,
filterable : true,
selectable : true,
dataBound : addExtraStylingToGrid
});


// Edit
function onEdit(e) {
}


// Change
function onChange(args) {
var model = this.dataItem(this.select());
ID = model.ID;
}
;


});]]></xp:this.value>
</xp:scriptBlock></div>
</xp:div>
</xp:view>

[Alexander Valchev]

Hello Bryan,

How much is takes for the dataSource read response to be retrieved from the server?
If you are retrieving large data set it is better to use server side pagination.

Regards,
Alexander Valchev
Telerik