Kendo UI Grid Speed

2 posts, 0 answers
  1. Bryan
    Bryan avatar
    14 posts
    Member since:
    Feb 2016

    Posted 19 Feb 2016 Link to this post

    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>

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 23 Feb 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top