Asp.Net MVC KendoUI grid

Question

@(Html.Kendo().Grid<RTM.WEB.MVC.ViewModels.SortingViewModel.ProductViewModel>()
.Name("ProductsGrid").HtmlAttributes("height:430")
.Columns(columns =>
{
columns.Bound(p => p.IsSelected).Width(50).Title("");
columns.Bound(p => p.ProductName);
columns.Bound(p => p.Price).Format("{0:C}");
columns.Bound(p => p.GroupName);
// columns.Bound(p => p.MeasurementId);
// columns.Bound(p => p.BarcodeValue);
columns.Command(comand =>
{
comand.Custom("Edit").Click("ViewEdit");
comand.Destroy();

}).Title("Commands").Width(180);

})
.DataSource(dataSource => dataSource

.Ajax()
.PageSize(10)
//.Events(events=>events.Sync("addGroupData"))
.ServerOperation(true)
.Batch(true)

.Events(events =>
{
events.Error("errorHandler");
events.Sync("addDataToResponce");
})
.Model(model =>
{
model.Id(p => p.ProductId);
model.Field(p => p.ProductId).Editable(false);
})

//                                      .Aggregates(aggregates =>
//{
//    //aggregates.Add(p => p.ProductId);
//    //aggregates.Add(p => p.ProductName);
//    aggregates.Add(p => p.Price).Sum();
//})


.Group(groups => groups.Add(p => p.GroupName))

.Create(create => create.Action("Products_Create", "Sorting"))
.Read(read => read.Action("Products_Read", "Sorting"))
.Update(update => update.Action("Products_Update", "Sorting"))
.Destroy(destroy => destroy.Action("Products_Destroy", "Sorting"))
)
.ToolBar(toolbar =>
{
toolbar.Template(@<text>
<div >
<a class="k-button" onclick="AddProduct()">Add New Product</a>
@item.SaveButton()
<a class="k-button" onclick="NewGroup()">NewGroup</a>
<a class="k-button" onclick="UnGroup()">UnGroup</a>
<label>Show products by warehouse:</label>
@(Html.Kendo().DropDownList()
.Name("warehouses")
.OptionLabel("All")
.DataTextField("Name")
.DataValueField("WarehouseId")
.AutoBind(false)
// .Events(e => e.Change("warehousesChange"))
.DataSource(ds =>
{
ds.Read("Products_Warehouses", "Sorting");

})
)
</div>
</text>);

})
.Events(events =>
{
events.DataBound("dataBound");
})
.Pageable(page => page.PageSizes(true).Numeric(false).Refresh(true).Input(true))
//.Navigatable()
.Selectable()
.ColumnMenu()
.Filterable()
.Sortable()
.Scrollable()
.Editable(editable => editable.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false))
)
public JsonResult Products_Read([DataSourceRequest]DataSourceRequest request)
{
int allcount=0;
List<ProductModel> products= DataManager.ProductRepository.GetAllProducts(request.Page, request.PageSize,ref allcount);
List<ProductViewModel> productViewModels=new List<ProductViewModel>();
foreach (var product in products)
{
productViewModels.Add(ConvertProductViewModel(product));
}
if (request.Sorts.Count != 0)
{
string member = request.Sorts.First().Member;
string sorttype = request.Sorts.First().SortDirection.ToString();
switch (member)
{
case "IsSelected":
if (sorttype == "Ascending")
{
productViewModels = productViewModels.OrderBy(p => p.IsSelected).ToList();
}
if (sorttype == "Descending")
{
productViewModels = productViewModels.OrderByDescending(p => p.IsSelected).ToList();
}
break;
case "ProductName":
if (sorttype == "Ascending")
{
productViewModels = productViewModels.OrderBy(p => p.ProductName).ToList();
}
if (sorttype == "Descending")
{
productViewModels = productViewModels.OrderByDescending(p => p.ProductName).ToList();
}
break;
case "Price":
if (sorttype == "Ascending")
{
productViewModels = productViewModels.OrderBy(p => p.Price).ToList();
}
if (sorttype == "Descending")
{
productViewModels = productViewModels.OrderByDescending(p => p.Price).ToList();
}
break;
}

}


var result = new DataSourceResult()
{
Data = productViewModels,
Total = allcount,
AggregateResults = null,
Errors = null,
};
return Json(result, JsonRequestBehavior.AllowGet);
}

This is my code.When i return data from action server paging doesn't work. I want do server paging kendo ui group grid, but response data type undefined.I need working example for group grid.It works in basic grid but don't work for group grid.

Answer 1

You should just need to update the controller method. As the sorting you are doing seems quite basic, you can use the supplied Kendo method ToDataSourceResult(DataSourceRequest request) .

Add the following to your using section in the Controller:

using Kendo.Mvc.Extensions;

Then simply return:

 return Json(productViewModels 
     .ToDataSourceResult(request, JsonRequestBehavior.AllowGet));

This should take care of any filtering, sorting, grouping, and paging for you.

You might also want to take a look at AutoMapper to more easily map objects from Product to ProductViewModel .