Kendo UI Office Hours: Q&A with Kendo UI Team Members
The Kendo UI framework is a popular HTML5, jQuery-based tool for building modern web apps. Burke and Cody from the Kendo UI team recently joined us for a Codementor Office Hours session to answer questions about Kendo UI.
Burke Holland is a Codementor expert and a web developer living in Nashville, TN. He enjoys working with and meeting developers who are building mobile apps with jQuery / HTML5 and loves to hack on social API’s. Burke works for Telerik as a Developer Advocate focusing on Kendo UI.
Cody Lindley is a front-end/JavaScript developer and recovering Flash developer. He has an extensive background with HTML, CSS, JavaScript, and client-side performance techniques as it pertains to web development.
The text below is a summary done by the Codementor team and may vary from the original video and if you see any issues, please let us know!
What is the recommended approach to working with large datasets in a Kendo grid?
The general advice about putting large datasets in a Kendo UI Grid: Don’t do it.
Kendo UI Grid uses something similar to React.js, in which it has the notion of a virtual DOM and uses that to reserve a certain number of cells and rows. Instead of trying to stick everything into DOM, it keeps reusing those cells and rows as you scroll through it. Obviously, the DOM is not a database, so the more items you put into it and try to sort/filter/group/aggregate, things won’t work so well.
Alternatively, here is what you can do when you’re working with large sets of data:
1. Put your data on a server and let the server take care of all the filtering/sorting/grouping/aggregating. The data source will support all that so you’ll want to do all of that on the server, which will easily be the hardest part of implementation.
2. Implement paging over virtual scrolling if that’s an option to you and you can get away with the tweak. Having the user pull through pages when they need it will give you much better performance than having users scrolling and making AJAX calls while they do so. 100 rows is a good place to begin paging.
3. Reduce the number of columns on the screen as much as you possibly can.
If the number of columns become quite large and their content becomes unreadable, you can try freezing columns, and there is a demo of how to do that here.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
ShipCountry: { type: "string" },
ShipName: { type: "string" },
ShipCity: { type: "string" },
ShipAddress: { type: "string" }
}
}
},
pageSize: 30
},
height: 540,
sortable: true,
reorderable: true,
groupable: true,
resizable: true,
filterable: true,
columnMenu: true,
pageable: true,
columns: [ {
field: "OrderID",
title: "Order ID",
locked: true,
lockable: false,
width: 150
}, {
field: "ShipCountry",
title: "Ship Country",
width: 300
}, {
field: "ShipCity",
title: "Ship City",
width: 300
}, {
field: "ShipName",
title: "Ship Name",
locked: true,
width: 300
}, {
field: "ShipAddress",
lockable: false,
width: 400
}
]
});
});
</script>
</div>
</body>
</html>Basically, with this source code you’d be able to lock the first two columns and horizontally scroll over on the other three. You do it with the locked and lockable attributes, and the columns that aren’t locked can be moved. This feature has been available since the Q1 release in 2014, and it’s the best way to put more columns than you have space for on a page with Kendo UI grid.
What are the best building blocks for Kendo UI with Angular?
Burke: I think the best thing about Angular is that it’s so opinionated it tells you what kind of building blocks to use. Something I’ve been a huge fan of lately is Todd’s Angular style guide. If you’re looking for best practices on structuring in Angular applications, I highly recommend taking a look at the article. If you’re looking for best practices on Kendo UI and Angular integrations, you can check out this link.
What is the best full-fledged example of kendo UI Scheduler control?
Burke: The scheduler is a premium, commercial-grade widgets. All of the demos for Kendo UI Scheduler controls can be found here.
This is essentially an entire portion of outlook embedded into your browser, though it’s not necessarily what you want to build. There is also an AngularJS demo at the bottom, which should be enough to get you started.
If you try to edit the example, it will drop the code into the Dojo where you can play around with it and run it directly in your browser.
Since everyone is using Angular, will Kendo UI drop its MVVM?
Burke: No, we’re not going to do that. When we first launched Kendo UI’s MVVM, we had to choose between using an MVVM library that’s already in the industry or write our own. At that time, Knockout was the biggest MVVM library at the time. We looked very closely at it but chose not to use it, because any time you take a dependency on a library you can’t control, it throws all sorts of levels of complexity into the product you’re creating. We have a hard enough time just keeping up with jQuery, and jQuery is about as solid and mature as it can get in terms of frameworks.
What we did was take some lessons from Knockout and implement it in our MVVM solutions in Kendo UI, which mimics some of the best features of Knockout but also remains something we could quickly make changes to. If you do some source dive into Kendo UI, you’ll find the whole thing to be built on the idea of observability. Even Angular is actually going through the Kendo UI MVVM layer to make all the bindings happen and for it to work, so Kendo UI’s MVVM is part of the core framework and is not going to be dropped.
If you’re thinking you need to use Angular so you can get binding and declare initialization, Kendo UI actually can do most of what Angular does on its own. It doesn’t have modules/services/factories, so it does not have dependency injection. What’s better, it has routing and everything you need to build an application. The reason we provide a deep Angular integration is that people demanded it and wanted it so badly, and we work for the people. Altogether, Kendo’s MVVM is a nice alternative if you don’t buy in completely to the Angular way of doing things.
Do you prefer Angular $resource or $http
Burke: I prefer the Kendo datasource. If you’re working with Kendo UI widgets, you’d have to go through the datasource in order to get the data into the widgets. Another alternative is to use an observable array or object with widgets. Either way, you can use $resource and $http, but at some point you’ll still have to get back to using Kendo UI observables at some point. When I work with Angular I use the Kendo UI datasource because it wraps observable objects for you.
When I make a button, Should I just make a Kendo Mobile button?
Burke: Typically yes. So you’d either have an anchor—a data role button—or a button. All the Kendo UI button does is add in a click-binding at the data-click level, and then it skims the class (k-class), so it’s very simple. In the context of mobile I’d use the mobile button, and in the context of web, I’d use the button-button. If you’re concerned about the 300-miliseconds click delay, Kendo UI swallows it the same way fast-cick does. You can also include a touch support from the Kendo UI mobile where you can get a button to look for a touch first before it looks for a click.
Other posts in this Kendo UI series with Burke & Cody:
- Best practices for creating a large SPA with Kendo UI—how things fits together
- Kendo UI vs Ionic—which one should you use?
