Kendo Grid data not binding correctly after refresh

Question

When I load the page, it is a partial page, the grid is populated with data

but once I call the refresh method like this

<button onclick="doRefresh">refresh</button>
<script type="text/javascript">
    var doRefresh = function () {
            var kendogrid = $("#this_Id").data("kendoGrid");                 
            kendogrid.refresh();
    }
</script>

it should refresh the grid rebuilding it with the datasource currently bound to the Grid. But the grid becomes empty

I think I am binding the model wrong because once I refresh the grid I loose all the data. I have tried binding the model and using the bindto method as mentioned here .

Here is my view:

 @model List<bModel>

 @(Html.Kendo().Grid(Model)
        .Name("this_Id") // template expression, to be evaluated in the master context
    .Columns(columns =>
    {
        columns.Bound(m => m.Sequence).Title("Seq.");
        columns.Bound(m => m.JobType).Title("Job Type");
        columns.Bound(m => m.Service).Title("Service");
        columns.Bound(m => m.Status).Title("Status");
        columns.Bound(m => m.PropertyType).Title("Property Type");
        columns.Bound(m => m.PropertySubType).Title("Property SubType");
        columns.Bound(m => m.Address).Title("Address");
    })
    .Sortable()
    .Selectable(s => s.Mode(GridSelectionMode.Multiple).Type(GridSelectionType.Row))
    .ClientDetailTemplateId("taskTemplate")
    .DetailTemplate(
               .......
        )
    .DataSource(dataSource => dataSource
        .Server()
        .Model(model => model.Id(jobItem => jobItem.Id))
    )
    .Read(read => read.Action("GetJobForBulkUpdate", "Project", new { jobId = "#=Id#" }))
    .Events(events => events.DetailExpand("detailExpand"))
)

And I am calling the view in panel bar like this

@(Html.Kendo().PanelBar()
      .Name("panel-bar")
      .ExpandMode(PanelBarExpandMode.Multiple)
      .ExpandAll(true)
      .Items(panel =>
      {       
          panel.Add()
              .Text("<span id='batch-update-panel-bar-job'>JOB-TASK</span>")
              .Encoded(false)
              .Content("<div id='update-model'>" + Html.Action("BatchUpdateJob", "BatchUpdate", new { projectId = Model.Id}).ToHtmlString() + "</div>");      
      })
)

and the controller method is like this

public ActionResult BatchUpdateJob(int projectId)
{
    mymodel = something;
    return PartialView("_MymodelPageJob", mymodel);
}

public ActionResult GetJobForBulkUpdate(int projectId, [DataSourceRequest] DataSourceRequest request)
    {            
           List<OfData> jobData = getData();
        return Json(jobData.ToDataSourceResult(request));
    }

Answer 1

Update: user changed the binding to Ajax and problem was data being returned was in incorrect format.Fixing the incoming data format by following the example below of ajax format helped to solve the issue.

once I call the refresh method like this grid becomes empty. kendogrid.refresh();

use correct Html.Action not sure if your controller is being hit

@Html.Action("BatchUpdateJob", "ControllerName", new { projectId = Model.Id });

you are just calling refresh on the grid with no data and of course it will show empty. So you want to auto refresh the grid based on certain setTimeout because destination data can be different after certain interval.

DO NOT USE THIS ! you are doing it in a wrong way see the documentation and clear your basics

    var kendogrid = $("#this_Id").data("kendoGrid");
    console.log(kendogrid.dataItem());
    kendogrid.refresh();

INSTEAD USE THIS -

 //read will request the server and reload only reload datasource
    $('#this_Id').data('kendoGrid').dataSource.read();

    //refresh will re-render items in grid from the current datasource
    $('#this_Id').data('kendoGrid').refresh(); 

Now ---- AS requested by user i am adding a sample demo for AJAX and server side binding .

AJAX BINDING : as discussed here on telerik documentation Ajax binding

ViewModel

 public class ProductViewModel
    {
        public int ProductID { get; set; }
        public string ProductName { get; set; }
        public short? UnitsInStock { get; set; }
    }

Grid in Razor syntax

  @(Html.Kendo().Grid<KendoGridAjaxBinding.Models.ProductViewModel>()
      .Name("grid")
      .DataSource(dataSource => dataSource
          .Ajax() 
      //Set the action method which will return the data in JSON format.    
          .Read(read => read.Action("Products_Read", "Home")) 

       )
       )
      .Columns(columns =>
      {
          columns.Bound(product => product.ProductID);
          columns.Bound(product => product.ProductName);
          columns.Bound(product => product.UnitsInStock);
      })
      .Pageable()
      .Sortable()
)

Controller

 public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request)
        {
            using (var northwind = new NorthwindEntities())
            {
                IQueryable<Product> products = northwind.Products;
                //Convert the Product entities to ProductViewModel instances.
                DataSourceResult result = products.ToDataSourceResult(request, product => new ProductViewModel
                        {
                        ProductID = product.ProductID,
                        ProductName = product.ProductName,
                        UnitsInStock = product.UnitsInStock
                        });
                return Json(result);
            }
        }

SERVER SIDE BINDING: as discussed here on telerik documentation Server side binding

There are a few ways to do this:

• Bind to the view model
• Bind to items from ViewData or ViewBag Use the
• BindTo method Pass additional data to an action method

Here is the github solution that discuss the server side binding download it and see what you are missing - Server side binding