[contact-form-7 404 "Not Found"]
Other Ways To Meet Us :info@zealousys.com
Our Blog
Nov 14

Kendo Ui With MVC

By zealousys

Kendo UI is a JavaScript toolset developed by Telerik that leverages JQuery, HTML5, CSS3, and JavaScript to provide rich UI widgets and an MVVM framework that is ‘scary fast’.

The thing that really drew me to Kendo UI in the first place is the native skinning on mobile devices. Unlike vanilla JQuery Mobile that renders the same iOS-esque view on all mobile devices Kendo UI Mobile applies specific native-looking styles for iOS, Android, and Blackberry.

Let us understand Kendo UI by taking small example with asp.net MVC.

Starting with Kendo UI with MVC first you need to register the scripts and CSS files that Kendo UI needs in the _Layout.cshtml. The actual implementation of Kendo UI is almost identical to that of JQuery which makes the ramp up time too less if you are familiar with JQuery.

Let’s start with a simple example of read-only grid mentioned below which displays the contacts with paging, filtering and sorting features.

The grid is a table containing the Name, Mode of Contact, Phone and Email columns. As you can see below, the sort, filter and paging features are enabled, so the user can interact with the grid and data using several helpful options. Let’s look at the view containing the grid configuration.

  1. @(Html.Kendo().Grid()
  2. .Name(“contactGrid”)
  3. .Columns(columns =>
  4. {
  5. columns.Bound(c => c.Name).Title(“Name”).Width(150);
  6. columns.Bound(c => c.PreferredContactMode).Title(“Mode of Contact”).Width(150);
  7. columns.Bound(c => c.Phone).Title(“Phone”).Width(120);
  8. columns.Bound(c => c.Email).Title(“Email”).Width(120);
  9. })
  10. .Pageable()
  11. .Filterable()
  12. .Sortable()
  13. .Scrollable()
  14. .AutoBind(true)
  15. .HtmlAttributes(new {style = “height:250px;”})
  16. .DataSource(dataSource => dataSource
  17. .Ajax()
  18. .ServerOperation(false)
  19. .Model(model =>
  20. {
  21. model.Id(c => c.Id);
  22. model.Field(c => c.PreferredContactMode).Editable(true).
  23. DefaultValue(new ContactMode {Id = 0, Name = string.Empty});
  24. })
  25. .Read(read => read.Action(“Read”, “Contact”))
  26. ) )

Most notably, features like Paging, Sorting, Filtering and Scrolling are available with just one line of code. The Read action is an Ajax call to the Contact controller and Read method which will return a collection of Contact objects. The Columns define the layout of columns, headers and binding to the model.

The Contact model contains the Id, Name, Phone and Email properties. It also includes the ContactMode which is a complex object including an Id and Name.

The following is the view which contains the updates for Add, Edit and Delete Contact. You will also notice the ClientTemplate applied to the ContactMode which forces the view to include the Name property in the display.

  1. @using MvcKendoUIGrid.Models
  2. @(Html.Kendo().Grid()
  3. .Name(“contactGrid”)
  4. .Columns(columns =>
  5. {
  6. columns.Command(command =>
  7. {
  8. command.Edit();
  9. command.Destroy();
  10. }).Width(180);
  11. columns.Bound(c => c.Name).Title(“Name”).Width(150);
  12. columns.Bound(c => c.PreferredContactMode).Title(“Mode of Contact”).Width(150);
  13. columns.Bound(c => c.Phone).Title(“Phone”).Width(120);
  14. columns.Bound(c => c.Email).Title(“Email”).Width(120);
  15. })
  16. .ToolBar(toolbar => toolbar.Create().Text(“Add new contact”))
  17. .Pageable()
  18. .Filterable()
  19. .Sortable()
  20. .Scrollable()
  21. .HtmlAttributes(new {style = “height:250px;”})
  22. .Editable(ed => ed.Mode(GridEditMode.InLine))
  23. .DataSource(dataSource => dataSource
  24. .Ajax()
  25. .ServerOperation(false)
  26. .Model(model =>
  27. {
  28. model.Id(c => c.Id);
  29. model.Field(c => c.PreferredContactMode)
  30. .Editable(true).
  31. DefaultValue(new ContactMode {Id = 0, Name = string.Empty});
  32. })
  33. .Read(read => read.Action(“Read”, “Contact”))
  34. .Update(update => update.Action(“Edit”, “Contact”))
  35. .Destroy(delete => delete.Action(“Delete”, “Contact”))
  36. .Create(create => create.Action(“Create”, “Contact”))
  37. )
  38. )

We have added a column command, which injects the edit button in the first column and have also added the Edit method to the controller which is responsible for calling the service to update the contract.

Moreover, we have also added the Destroy to the command which provides a Delete button. The Destroy action mentioned under DataSource defines the Contact controller delete action which will be responsible for deleting the contact. We have also added the Create command to the Toolbar which is positioned above in the grid. The DataSource Create action is invoked when the “Add new contact” button is clicked.

What Can We Build for You?


NDA From The Start
We keep your idea safe. We're always willing to sign a Non-Disclosure Agreement with you and fully protect your intellectual property.



For sales inquiry