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>

I am having trouble getting ng-click to work. 

Here is a dojo of what I would like to do. 

http://dojo.telerik.com/IFuRE/2

I don't really need to use buttons or templates in my case, I would like to be able to click anywhere on a tile and have that trigger a function with the dataitem that was clicked.

I did find this example here:

http://dojo.telerik.com/@SiliconSoul/uMORu

But this is not really the angular way to do this, I would like to use a function on my controller and have the scope come through etc.

Regards,

Ivan

Just wondering why the effects and animations are using inline style to be created?

Is there not an option to use css classes?

The only problem I am having was that I wanted to extend and create some custom effects however because they are currently using inline styles it will overwrite any styles I apply via a class.

For example: http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist

If it was simply adding a class of .fadeIn and .fadeOut then I could create a custom css class for the transitions and change fadeIn to .mycustomclass 

However is it not switching class style it is adding inline styles and I can't locate where the JS is that adds these inline styles and 'fadeIn' is declared. Are you able to advise where these are being set at all so worst case I can just copy one of them and rename the effect and set the inline styles that would ideally be a class

When migrating from Kendo UI from v 2014.3.1316 to 2015.2.624 hidden grid columns became visible and layout was defected.

Please see attached image for differences. 

No other code was changed in the migration besides using the following new version: (*note: same problem with 2016.1 version)

http://kendo.cdn.telerik.com/2015.2.624/js/kendo.all.min.js

Hi everyone, I searched for a long time for that issue, and that's why I am telling the solutions to everyone.

We need to enable and disable grouping dynamically.  

Also, when grouping is enable, we need to change the pageSize because grouping doesn't work well with small page size if your data cover more than 1 page.

These are the non-working solutions: 

That is the working solution: (you absolutely need to set BOTH)

If you call

If you really want to do that "1 shot", you need to set both.
You can test it there: http://dojo.telerik.com/aJEkA/6

Maybe Kendo can fix the setOptions to check if the "other" variable needs to be updated as well, to make it work like dataSource.pageSize() method.

I believe this function can work using k-denied but still not very good with the JS for the tool suite. I have two treeviews. I'm working on a screen where once a treeview is persisted to the DB, a user could go back and update it with new nodes, a reordering of nodes or deleting the nodes.

How can I validate that if a node is dragged from the left tree to the right tree, that if the ID (identified by ext_model_id) exists, don't drop on the tree? How can I see if the node is even there? Do I use the data-uid?

 Help would be appreciated.

 I am working with the Gantt and I'm to try implement the Event "edit" for prevent edition in something tasks.... (using  e.defaultPrevent() )

The problem is... the function show an error in my project BUT also in the Example ONLINE...



You can repeat in:

http://dojo.telerik.com/oyaFU   (The gantt online in dojo.telerik.com)

You have add the event edit:...

edit: function (e) {
                e.preventDefault();
}



And you have open the Console of the Browser and at do clic... and show this...  (added a image)



I am to do something wrong?.. Or is a something Bug?  I used Google Chrome...

I need your help..



Thanks!! 

I have two entities Competencies and Roles. These are both created by the user and stored in the database.

On a specific screen the user select certain Competencies and certain Roles. These then have to be displayed in a matrix.

They will then use check boxes to link the Competencies and Roles.
Each competency will be linked to several of the roles.
This matrix is completely dynamic as I do not know how many columns there will be or the names of the columns.

I know that there will be a Competency Id column and a Competency Name column. Each row will have one or more roles.
We use kendo grids throughout the application so I want to use a kendo grid.

I have tried many different ways of doing this. I have successfully passed in a System.Data.DataTable which works but is cumbersome to create. We use NHibernate and it is easier to create a model. The most successful way that I have that uses a model is as follows:

public class BasicRowModel
  {
    public string CompetencyId { get; set; }
    public string CompetencyName { get; set; }
    public List<BasicTrainingRoleModel> Roles { get; set; }
  }

public class BasicTrainingRoleModel
  {
    public string RoleName { get; set; }
    public bool RoleVal { get; set; }
  }

My view is as follows:
@model IEnumerable<BasicRowModel>
@using Models
@using System.Linq;

@{
    ViewBag.Title = "DynamicGrid2";
}

<h2>DynamicGrid2</h2>

@section scripts
{
  <script type="text/javascript" src="@Url.Content("~/Scripts/Training.js")"></script>

}

@{
  ViewBag.Title = "Administration";
  Layout = "~/Views/Shared/_Layout.cshtml";
}


@(Html.Kendo().Grid(Model)
  .Name("RoleCompsTable")
  .Columns(columns =>
  {
    columns.Bound(r => r.CompetencyId)
      .Hidden();
    columns.Bound(r => r.CompetencyName)
      .Title("Competency");
    for (int c = 0; c < ViewBag.RoleCount; c++)
    {
      //columns.Template(@<text>@item.Roles[c].RoleVal.ToString()</text>).Title(ViewBag.Roles[c]);
      columns.Bound(r => r.Roles[c].RoleVal).Title(ViewBag.Roles[c]);
    }
    //columns.Bound(r => r.Roles[0].RoleVal).Title(ViewBag.Roles[0]);
    //columns.Bound(r => r.Roles[1].RoleVal).Title(ViewBag.Roles[1]);
    //columns.Bound(r => r.Roles[2].RoleVal).Title(ViewBag.Roles[2])

  }))

The for loop does not work with either the columns.Bound or the template. It results in an out of range error. When stepping into this code it works fine but it is afterwards that the error occurs.
Exception Details: System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection.
Parameter name: index

Source Error:

Line 31:     for (int c = 0; c < ViewBag.RoleCount; c++)
Line 32:     {
Line 33:columns.Template(@<text>@item.Roles[c].RoleVal.ToString()</text>).Title(ViewBag.Roles[c]);
Line 34:       //columns.Bound(r => r.Roles[c].RoleVal).Title(ViewBag.Roles[c]);
Line 35:     }


When I comment out the for loop and uncomment the columns.Bound lines it works perfectly with the attached result. Obviously this is not a solution for me as it is dynamic and I do not know how many columns there will be. Why does the for loop not work for this?



Regards
Tyler