Building Sitefinity MVC Widgets with KendoUI Grid

Building Sitefinity MVC Widgets with KendoUI Grid

September 27, 2013 0 Comments

The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.

Building Sitefinity MVC widgets with KendoUI controls has some specifics that I will outline in this blog post.

By default the Kendo Grid can be directly bound to the MVC Action that will return the json for populating the databound control. In Sitefinity CMS, however, it is necessary to bind the Kendo Grid to an artificial URL that returns the json result to populate the Kendo Grid.

Here is how this is done:

1. In the MVC View use Kendo Grid bound to a relative to the current application URL which doesn`t represent any page, but its artificial one that will only be used to bind the Grid.

@(Html.Kendo().Grid<EmployeesModel>().Name("employeesGrid").Columns(
    columns =>
    {
        columns.Bound(e => e.Name);
        columns.Bound(e => e.Age);
    })
    .Pageable()
    .DataSource(ds => ds.Ajax()
        .Read(a => a.Url("/json/employees/listemployees"))
        .Model(m => {
            m.Id(p => p.Name);
            m.Field(p => p.Age);
        }))
)

2. The ActionResult that populates the Grid with data is:

[HttpPost]
        public ActionResult ListEmployees(DataSourceRequest request)
        {
            var pagingParam = int.Parse(HttpContext.Request.Form["page"]);
            var pageSizeParam = int.Parse(HttpContext.Request.Form["pageSize"]);
 
            var employees = new List<EmployeesModel>()
            {
                new EmployeesModel() { Name = "Jane Doe", Age = 23, BirthDate = DateTime.Now, SocialSecurityNumber = "015-23-2356" },
                new EmployeesModel() { Name = "John Smith", Age = 32, BirthDate = DateTime.Now, SocialSecurityNumber = "015-23-2356" },
            };
            var result = employees.ToDataSourceResult(request);
            return Json(result, JsonRequestBehavior.AllowGet);
        }

3. The artificial route to which the Grid is bound is registered in Global.asax as shown below.

protected void Application_Start(object sender, EventArgs e)
       {
           Bootstrapper.MVC.MapRoute("json", "json/{controller}/{action}/{id}", new { controller = "Employees", action = "ListEmployees", id = (string)null });
       }

The sample source code can be downloaded here. KendoUI for MVC has to also be installed for the site to use the Kendo controls, here is the documentation for this.

Stanislav Velikov

Stanislav Velikov is a Tech Support Engineer at Telerik. He joined the Sitefinity Support team in April 2011.

Comments
Comments are disabled in preview mode.
Topics
 
 
Latest Stories in
Your Inbox
Subscribe
More From Progress
d12fcc0bdb669b804e7f71198c9619a7
5 Questions Automakers Should Ask to Improve Asset Uptime
Download Whitepaper
 
SF_MQ_WCM
2018 Gartner Magic Quadrant Web Content Management (WCM)
Download Whitepaper
 
What-Serverless-Means-For-Enterprice-Apps-Kinvey
What Serverless Means for Enterprise Apps
Watch Webinar