Kendo UI Core Grid

For those of you who do not know, Telerik has released a core version of their Kendo UI product. The Kendo UI Core is open source, that means you can use it without spending the license costs of their flagship product. This is great news for small projects that don't need the heavy lifting that comes with the full Kendo UI Product.

I have recently been working with the Kendo UI Core grid component and thought I would share some of the things that I did to make my grids flexible and UX friendly.

First, let me show you the code required to get a Kendo UI Core grid working. All I have done on the MVC Layout page is include the required Kendo UI Code JavaScript and CSS files, jQuery and also Bootstrap. I use Bootstrap because it gives nice control formatting and Kendo UI Core actually has a Bootstrap theme so my styles are kept consistent throughout the entire site.

@model IEnumerable<ViewModelUser>

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

<table id="list-grid" class="table table-bordered hidden">
   <thead>
      <tr>
         <th>
            @Html.DisplayNameFor(model => model.Id)
         </th>
         <th>
            @Html.DisplayNameFor(model => model.UserName)
         </th>
         <th>
            @Html.DisplayNameFor(model => model.FirstName)
         </th>
         <th>
            @Html.DisplayNameFor(model => model.LastName)
         </th>
         <th>
            @Html.DisplayNameFor(model => model.Email)
         </th>
         <th>
            @Html.DisplayNameFor(model => model.IsVisible)
         </th>
         <th></th>
      </tr>
   </thead>

   <tbody>
      @foreach (var item in Model)
      {
         <tr>
            <td>
               @Html.DisplayFor(modelItem => item.Id)
            </td>
            <td>
               @Html.DisplayFor(modelItem => item.UserName)
            </td>
            <td>
               @Html.DisplayFor(modelItem => item.FirstName)
            </td>
            <td>
               @Html.DisplayFor(modelItem => item.LastName)
            </td>
            <td>
               @Html.DisplayFor(modelItem => item.Email)
            </td>
            <td>
               @Html.DisplayFor(modelItem => item.IsVisible)
            </td>
            <td></td>
         </tr>
      }
   </tbody>
</table>

<script>
   $(function () {
      $("#list-grid").find("th").eq(0).hide(); // hides the Id column
      $("#list-grid").kendoGrid({
         sortable: true,
         resizable: true,
         reorderable: true,
         columnMenu: true,
         filterable: true,
         columns: [
            { field: "Id", title: "User Id", width: 50, hidden: true },
            { field: "UserName", title: "User Name", width: 120 },
            { field: "FirstName", title: "First Name" },
            { field: "LastName", title: "Surname" },
            { field: "Email", title: "Email Address" },
            { field: "IsVisible", title: "Active?", width: 100 },
            {
            command: [
            { text: "Edit", click: editItem },
            { text: "Delete", click: deleteItem }
            ],
            title: " ",
            width: 200
            }
         ]
         }).removeClass("hidden"); // displays the grid after JS and CSS have been applied
      });

</script>

Hide Columns But Don't Hide Them 

Sometimes, you want to have columns included in your grid. But you don't necessarily want them to be initially visible. I do this using JavaScript and applying the .hide() method against the TH cell that I want to hide.

$("#list-grid").find("th").eq(0).hide();

This code looks for the <code>#list-grid</code> table, finds the 0th TH element and hides it. You can do that with any column that is displayed in the table. Just remember, you do need to set the <code>hidden</code> property within the column instantiation of the <code>kendoGrid()</code> method so that the cell content is hidden too.

Stop Unformatted Table Data Showing Before CSS Is Applied 

You will notice that I have applied the <code>hidden</code> class to the table. By default, the table will not be displayed. However, you will see at the end of the <code>kendGrid()</code> method that I have chained the <code>removeClass("hidden")</code> method. This will remove the hidden class from the table once all the JavaScript and CSS have been applied. The reason for this is because slow internet connections may take time to apply CSS to the table. If this happens, there is a flash of the unformatted table before the Kendo CSS is applied. Letting JavaScript "unhide" the finished formatted table will ensure the user gets the intended formatted experience without the flash of raw content.

Until next time...