Today I want to share a little Kendo UI Combobox customization, one that I hope you’ll find useful: restoring the previous value on an invalid entry. Often we see validation, especially numeric validation on a range for example, use coercion to simply force the value to either the highest or lowest number. This certainly prevents invalid entry, but the user experience isn’t all that great in every scenario. What may be preferred, for an allowed range of 0-10, and if the user intends to change a 3 to a 4 and instead accidentally enters 44, would be to just restore the value of 3 (not coerce to 10).
In my last blog, I showed some examples of dates in a Kendo UI Grid. This time, let’s look at checkboxes. True/False data in the Kendo UI Grid is always interesting to work with. A checkbox makes sense for boolean values, but they come with some expectation from the user’s point of view. They see a checkbox, and they want to be able to click it! Entering an Edit mode and then clicking the checkbox just doesn’t cut it.
If you are working with tabular data, then chances are your users want to see it in a grid. And in my experience if you put the data in a grid, those users are going to export that data to Excel! Of course. Well, if you were lucky enough to be using a Kendo UI Grid, then the pain of exporting that grid data to an Excel spreadsheet is a lot less….painful.
I’ve been using Kendo UI for many years now and I continue to be impressed with the many ways it can be extended and customized. Recently, I had a client request a Kendo Grid customization that at first glance seemed like it might require some code changes, but in the end, it could all be done purely with CSS. Here is the scenario as a CSS customization example: by default, the Kendo Grid shows the sort icon immediately after the header text and when using the column menu with a filter applied, it highlights the border around the column menu…
I use the Kendo UI Grid. I use it a lot, in fact. And one thing I’ve found is that tabular data, in its pure form with columns and rows is, well, boring. But with column templates, you can add visualizations inside the grid itself. Sure, you probably already knew that adding a visualization makes for a better user experience. But did you know it could be so easy?
In my previous post, I demonstrated a simple natural sort that could be used to generate a sortable string that has mixed letters and numbers by padding the numeric portions of the string. As demonstrated in that post, alphanumeric strings may not sort the way users expect if it uses the standard ASCII sort instead of a natural sort:
// ASCII sort
// natural sort
While it is true that we could implement our own IComparer in C#, by using a string extension method, we can generate a sort-friendly string that can easily be used outside of your C# service. In this post, I’ll show you how…
One thing I really like about using Kendo UI is the frequency of updates and the number of new or improved features in each release. I don’t always have the time to read all of the release notes, so it is a nice surprise when I discover something I didn’t know about. This isn’t a brand-new feature, but a new discovery for me this week has been multi-column headers. I remember having the requirement a few years ago to build a grid with group headers that spanned more than one column. It was certainly possible, but it took more templating…
I have been having some fun with Kendo UI map visualizations recently by combining CSS3 styling with custom marker elements. Applying custom data-based HTML elements to the map opens up endless possibilities for mapping, and the Kendo map makes it really straightforward. If your data has a geographic component, then viewing it on a map is a powerful visualization.
Today I was working on a Kendo UI Mobile application and I ran into a situation where I had a ListView widget and I wanted to handle the click event on the widget itself as well as having buttons in each ListView item and handle their click events. Right away I knew I would have to stop the event from bubbling up when one of the buttons was clicked. This typically isn’t a problem, I would just use the stopPropagation function that comes along with the event…but I quickly found that Kendo UI widget events do not provide the stopPropagation method. In order to…
In my previous post I detailed a feature where users can upload files to the Sitefinity Document Library asynchronously. However, the interface for doing so was a bit basic. There was an HTML file input that automatically uploaded the selected file immediately. It worked, but the user wasn’t left with much to do with the link that was returned. Extending Kendo UI Editor functionality, however, can be used to make the return value more useful and make the whole user experience much better. This post will show you how to take the feature and add it to the set of…
A brain-tickling demonstration of how different ways of adding data to a Kendo DataSource can affect the behavior of cancelChanges() and a quick dive into the source code to explain why
Kendo DataSources are a foundational component of many of Kendo’s widgets and indeed of many data-driven applications. The Kendo docs point out that they are shareable, but their example only shares them among different widgets. Sharing them among multiple observable ViewModels, however, is fraught with pitfalls, many of which I have recently felt the displeasure of stumbling into. As usual, diagnosing the problem led to some interesting insights on how Kendo bindings work, so let’s take a look together. Initial Setup In this first JSBin, I’ve configured a DataSource and then used it in a ViewModel which is then bound…
In our first 2 exercises, we completed a simple Kendo widget initialization and output using PhantomJS. But if you want to use this technique for something a little more complex with a few more widgets and a more complicated UI, it’s likely you will also want to know how to debug when things don’t go as planned.
Ever needed to create one of those range-style sliders for Dates or Times? Like what you might see when selecting flight times for airline tickets – show me flights that take off after 7am, but before 12pm, thanks! You can do something similar with the Kendo UI RangeSlider widget. But let me point out a few tips to help.
In my previous post and example, we created a simple PhantomJS export-to-PDF project that loaded a page with a Kendo ListView and exported it to a PDF. In that code, we used data that already existed in the phantomexport.js file. But that isn’t really a good example, since in the real world that data would be fetched externally and then fed to the export process.
Kendo Model’s defaultValues are only applied if you don’t pass a values object during construction. When Kendo maintainers said they wouldn’t fix it, I decided to create a subclass that does and share it.
Imagine this: You are developing a web page that displays data in a grid but you also want to be able to show various other views and aggregations outside the grid. How would you do it? You could hook up event handlers to the grid’s DataSource and manually update everything when the data changes. But wouldn’t it be nicer if you could just declare MVVM bindings and let the bindings detect all the changes? I think so. Let me know you how it’s done. Scalar bindings First, let’s talk about scalar bindings such at the text and value bindings. You…
Kendo UI DataViz is a collection of components targeting data visualization such as charts, gauges and diagrams. These elements are indispensable in any application that deals with data aggregation and data presentation. When you develop an application, it is seldom that you are satisfied with the default theme (or the other themes) that Kendo UI offers because oftentimes you need to make your application look and behave like the original mockups that the designers put together. Just like other popular presentation frameworks, Kendo UI offers a Theme Builder that allows you to create your “unique” and custom theme. With a bit of…
I have been doing some research into browser-less exports of some Kendo UI widgets on an existing page, and I am really liking PhantomJS as a solution for my needs. PhantomJS is targeted more for testing, but in this case I was looking for a way to create a PDF report of a Kendo UI widget server-side that could be saved and emailed as a snapshot-in-time of some particular data.
Why SignalR? For most Kendo projects that I’ve been involved with, Kendo UI consumes JSON data originating from an ASP.NET controller (either a JsonResult action or a WebAPI action). The lifecycle is pretty straight-forward: the DataSource reads the initial data, and then a separate AJAX postback is performed for each create, update, and destroy operation. The problem with this is that the user is looking at a snapshot of the data. Suppose that another user is also looking at that data, and decides to change it. How do we alert the first user that their data is stale and needs…