Tips For Using Kendo UI Core – Grids

For those of you who do not know, Telerik have released a core version of their Kendo UI product. Kendo UI Core is open source which means you can use it without spending the licence 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've 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.

Firstly, 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 #list-grid table, finds the 0th TH element and hides it. You can do the same with any column that is displayed in the table. Just remember, you do need to set the hidden property within the column instantiation of the kendoGrid() 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 hidden class to the table. By default, the table will not be displayed. However, you will see at the end of the kendGrid() method that I have chained the removeClass("hidden") 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 make sure the user gets the intended formatted experience without the flash of raw content.

Til next time ...