CODEWITHSUNDEEP
c#jqueryasp.net-mvckendo-ui
Yanayaya
Yanayaya

Reputation: 2184

How do I update my KendoUI Grids datasource from the controller?

I have a Kendo Grid in my MVC application, it's method delivers data from my repository. I also have buttons that pass arrays of data to the controller to adjust the results, although the returned data is visable in the controller at the break point the grid doesn't change. How do I update the grid to use the altered data source?

Grid

@(Html.Kendo().Grid<MyProject.Models.Cars>()
.Name("grid")
.Columns(columns => {
    columns.Select().Width(50);
    columns.Bound(c => c.Id).Title("Id");
    columns.Bound(c => c.Name).Title("Name");
    })
.DataSource(dataSource => dataSource
    .Ajax()
    .ServerOperation(true)
    .Model(model => model.Id(p => p.Id))
    .Read(read => read.Action("GetTabCars", "Test"))
))

Button When you click on one of the buttons it passes an array of Id's to the controller. This works well and you can see the array in the controller and it's passed down without a problem.

function tabButton(e) {
    let filter = $(e).data("filter");
    $.ajax({
        type: "POST",
        url: "/Test/GetTabCars/",
        data: { array: filter },
        success: function (response) {
            console.log("Success");
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(jqXHR.status);
            console.log(textStatus);
            console.log(errorThrown);
        }
    })
}

Controller The controller returns all cars if no array is present. If an array is present then it selects those records and returns them. As above, this method seems to work and using break points you can see the selected data once it reaches the return data; at the final step.

public ActionResult GetTabCars(int[] array, [DataSourceRequest] DataSourceRequest request)
{
    List<Car> cars = new List<Car>();
    var car = unitOfWork.CarRepository.Get();
    DataSourceResult result = car.ToDataSourceResult(request);
    JsonResult data;

    if (array !=null)
    {
        foreach (var id in array)
        {
            cars.Add(unitOfWork.CarRepository.FindSingleOrDefault(x => x.Id == id));
        }
        data = Json(cars, JsonRequestBehavior.AllowGet);
    }
    else
    {
        data = Json(result, JsonRequestBehavior.AllowGet);
    }
    data.MaxJsonLength = int.MaxValue;
    return data;
}

Despite the above working the grid remains unchanged. Can anyone assist me with understanding why the grid doesnt update with the newly requested data?

Upvotes: 1

Views: 5368

Answers (2)

Kerlos Bekhit
Kerlos Bekhit

Reputation: 128

You can set the dataSource of the grid programmatically by using:

$("#grid").data('kendoGrid').dataSource.data(dataToSet);

Simply modify your js method like this:

function tabButton(e) {
    let filter = $(e).data("filter");
    $.ajax({
        type: "POST",
        url: "/Test/GetTabCars/",
        data: { array: filter },
        success: function (response) {
            var result = JSON.parse(response);
            $("#grid").data('kendoGrid').dataSource.data(result);
            console.log("Success");
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(jqXHR.status);
            console.log(textStatus);
            console.log(errorThrown);
        }
    })
}

Upvotes: 1

Ross Bush
Ross Bush

Reputation: 15155

You can use the read command of the datasource to refresh the grid after initialization:

function tabButton(e) {
    let filter = $(e).data("filter");
    var grid = $('#grid').data('kendoGrid');
    grid.dataSource.read({  array: filter });
    grid.refresh();
}

Upvotes: 1

Related Questions