ASP.NET MVC & Kendo Grid Sortable

Question

I'm new using MVC and Kendo.

I have this controller:

    public ActionResult Index()
    {
        db.Configuration.ProxyCreationEnabled = false;
        return View(db.students.ToList());
    }

The View has this:

@model IEnumerable<MVC_Test1.Models.student>

@{
ViewBag.Title = "Index";
}

<h2>Index</h2>

@(Html.Kendo().Grid(Model)
.Name("Grid")
.Pageable(pager => pager
    .PageSizes(new[] { 2, 3, 4 })
    .ButtonCount(5)) 
.Sortable()
.Selectable()
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(2)
    .ServerOperation(false)
 )
.Columns(columns =>
{
    columns.Bound(p => p.FirstName).Title("Name");
    columns.Bound(p => p.MiddleName).Title("Middle");
    columns.Bound(p => p.LastName).Title("Lastname");
    columns.Bound(p => p.EnrollmentDate).Format("{0:" + System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern + "}").Title("Created");
    columns.Command(commands =>
    {
        commands.Custom("Options");
    }).Title("Options").Width(200);
})

• First I need to order the list by a property named "OrderPos" the Model students has.
• I'd like to drag and drop the rows to change the order and automatically update the database. So when I drag and drop a row it chages the field "OrderPos" in the database.

I have see the kendo sortable widget, but I don't know how to mix everything to have this working. Here is the demo: http://demos.telerik.com/kendo-ui/sortable/integration-grid

Thank you.

Answer 1

Have you looked at their example here: http://demos.telerik.com/aspnet-mvc/sortable/integration-grid ?

They have the grid + sortable working with the MVC helpers.

Answer 2

Post the Grid to the server on some event

var gridData = $("#ProposalGridX").data("kendoGrid");

            $.ajax({
                url: "/GridPost/PersonPost",
                type: 'POST',
                data: JSON.stringify(gridData.dataSource.view()),
                dataType: 'json',
                contentType: 'application/json',
                success: function (data) {

                }
            });


        [HttpPost]
        public JsonResult PersonPost(List<QPM.Models.PortfolioViewModel> model)
        {
            //model will contain gridview
            //update OrderPos
        }

Answer 3

You'll want to handle the change event of the Sortable widget, and do an ajax post in there to update values on the server-side.

See the events demo for more info: http://demos.telerik.com/aspnet-mvc/sortable/events