Kendo UI Archives - Falafel Software Blog

Kendo UI Combobox Customized: Previous Value Restore

By | JavaScript, Kendo UI | No Comments

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).

Read More

Kendo UI Grid with Two Kinds of Checkboxes

By | Kendo UI | No Comments

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.

Read More

Kendo UI Customization with CSS

By | CSS, HTML5, Kendo UI | One Comment

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…

Read More

Kendo Grid Custom Column Sort

By | HTML5, JavaScript, Kendo UI | No Comments

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:

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…

Read More

Kendo Grid Multi-Level Headers

By | HTML5, Kendo UI | No Comments

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…

Read More

Kendo UI: Prevent Event Bubbling in Mobile ListView

By | Kendo UI, News | One Comment

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…

Read More

Extending Kendo UI Editor Functionality in Sitefinity

By | C#, JavaScript, Kendo UI, Sitefinity | One Comment

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…

Read More

The Hazards of Shared Kendo DataSources

By | HTML5, JavaScript, Kendo UI, News | One Comment

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…

Read More

Learning to Export Kendo UI Widgets without a Browser Using PhantomJS Part 3: Debugging

By | .NET, HTML5, JavaScript, Kendo UI, News | One Comment

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.

Read More

Learning to Export Kendo UI Widgets without a Browser Using PhantomJS Part 2: External Input

By | JavaScript, Kendo UI, News | One Comment

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.

Read More

Make a Kendo MVVM calculated field depend on DataSource data

By | Kendo UI, MVVM | One Comment

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…

Read More

Learning to Export Kendo UI Widgets without a Browser Using PhantomJS: Part 1

By | News | 5 Comments

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.

Read More

How to use SignalR with Kendo UI

By | .NET, ASP.NET, Kendo UI, News | 4 Comments

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…

Read More