ASP.NET MVC & Kendo Grid Sortable

1
votes

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.

3
asp.net-mvckendo-uikendo-gridkendo-asp.net-mvc
Do you have the drag and drop functionality working? – CSharper
You will have to capture the event that fires after the drop is completed, inside that event you can fire an Ajax call and send the grid's data with it. So your controller will have the GridView bound to a list of YourModel class, and they should be ordered based on how they look in the view. That's gonna be the hardest part. I'll let you figure out how to update the database from there :) There's plenty of examples on posting Kendo Grids data. If your really struggling I'll show you how to post it. – CSharper
could you please send me an example of what you are suggesting? – John Mathison

3 Answers

1
votes

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.

1
votes

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
        }
0
votes

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