Grid working fine with ViewBag data but not JSon, please help, already read a lot of posts here and on stackoverflow

[Kevin]

I have searched the doc, stackoverflow and the forum, there are many posts about JSon -> Grid issues discussed and resolved, but I couldn't really apply the approach and solve my problems from these.  Have spent days on it, so, please help.

Basically I have a Grid, I am currently binding data to it with ViewBag, which is working fine.

==== controller ===

ViewBag.locationInProfile = [ a method call which returns an array of  "LocationsInProfile" object]
-- definition of the LocationsInProfile object can be found below from the sample JSon data

==== Grid that works ====

@(Html.Kendo().Grid((IEnumerable<MyNameSpace.Services.LocationsInProfile>)ViewBag.locationInProfile)
            .Name("grid")
            .Columns(columns =>
                     {
                         columns.Bound(location => location._PrimaryText).Title("Primary Location");
                         columns.Bound(location => location._SecondaryText).Title("Secondary Location");
                         columns.Command(command => command.Custom("Remove").Click("RemoveLocation"));
                     }
                  )
            .Pageable()
            .HtmlAttributes(new { style = "height:380px;" })
            .Scrollable()
            .Sortable()
            .Pageable(pge => pge
                .Refresh(true)
                .PageSizes(true)
                )
            )

==== Json controller ====
 - works fine when called directly
 - in debug, can see the Grid is making request to the controller with non-empty array returned

public JsonResult ListLocationsInProfileClientID(int id)
        {
            LocationsInProfile[] res = bbc.ListLocationsInProfileClientID(id);
            return Json(res, JsonRequestBehavior.AllowGet);
        }

sample Json returning
[{"_id":3,"_ClientID":3,"_PrimaryLocation":5,"_SecondaryLocation":0,"_status":1,"_priority":1,"_PrimaryText":"San Jose","_SecondaryText":"None"},{"_id":1,"_ClientID":3,"_PrimaryLocation":6,"_SecondaryLocation":0,"_status":1,"_priority":1,"_PrimaryText":"Sydney","_SecondaryText":"None"},{"_id":6,"_ClientID":3,"_PrimaryLocation":6,"_SecondaryLocation":7,"_status":1,"_priority":1,"_PrimaryText":"Sydney","_SecondaryText":"Tokyo"}]

==== Json controller with DataSourceRequest ====
 - works fine when called directly
 - in debug, can see the Grid is making request to the controller with non-empty array returned

public JsonResult KendoListLocationsInProfileClientID([DataSourceRequest] DataSourceRequest request, int id)
        {
            LocationsInProfile[] res = bbc.ListLocationsInProfileClientID(id);
            return Json(res, JsonRequestBehavior.AllowGet);
        }

sample Json returning

[{"_id":3,"_ClientID":3,"_PrimaryLocation":5,"_SecondaryLocation":0,"_status":1,"_priority":1,"_PrimaryText":"San Jose","_SecondaryText":"None"},{"_id":1,"_ClientID":3,"_PrimaryLocation":6,"_SecondaryLocation":0,"_status":1,"_priority":1,"_PrimaryText":"Sydney","_SecondaryText":"None"},{"_id":6,"_ClientID":3,"_PrimaryLocation":6,"_SecondaryLocation":7,"_status":1,"_priority":1,"_PrimaryText":"Sydney","_SecondaryText":"Tokyo"}]

=================================================
Grid that would like to get working but never load any data from the controller, though in debug, we see the Grid is calling the controller action correctly and the controller is returning non-empty data array, but the Grid is n't showing anything.

@(Html.Kendo().Grid<MyNameSpace.Services.LocationsInProfile>()
    .Name("grid")
    .Columns(columns => {
        columns.Bound(location => location._PrimaryText).Title("Primary Location");
        columns.Bound(location => location._SecondaryText).Title("Secondary Location");
        columns.Command(command => command.Custom("Remove").Click("RemoveLocation"));
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("KendoListLocationsInProfileClientID/" + ViewBag.clientID, "BackupRest"))
     )
)

Any help would be very much appreciated.  I believe that it is just a small issue, but without the experience and knowing the right things to tweak, it is taking a lot of our time and effort to get it working.

Thanks in advance.

[Kevin]

By the way, a very strange thing to add here.

The working Grid code above was actually supposedly looking like this.
=====

        @(Html.Kendo().Grid((IEnumerable<DD.CBU.Aperture.AdvancedServicesPortal.Services.LocationsInProfile>)ViewBag.locationInProfile)
            .Name("grid")
            .DataSource(datasource => datasource
                .Ajax()
                .Read(read => read.Action("ListLocationsInProfileClientID/" + ViewBag.clientID, "BackupRest") )
            )
            .Columns(columns =>
                     {
                         columns.Bound(location => location._PrimaryText).Title("Primary Location");
                         columns.Bound(location => location._SecondaryText).Title("Secondary Location");
                         columns.Command(command => command.Custom("Remove").Click("RemoveLocation"));
                     }
                  )
            .Pageable()
            .HtmlAttributes(new { style = "height:380px;" })
            .Scrollable()
            .Sortable()
            .Pageable(pge => pge
                .Refresh(true)
                .PageSizes(true)
                )
            )

=====
But to distinguish this from the Ajax one, I have purposely removed the DataSource part of the code when posting.
And I have tested before posting, the data are still populating to the Grid correctly.

However, then, when I was about to call it the day, I somehow realised that the "Remove" button isn't working any more.  The standard code to get the item
===>      var dataItem = this.dataItem($(e.currentTarget).closest("tr")); 
is now returning "undefined object".  I didn't know what was the problem as I was changing quite a few things and at the end I found, the remove button would work again if I put the datasource part back to the Grid.  Which is really strange.  Though the data seems coming from the ViewBag correctly, but the command would require the remote call (which does fire each time) to stay to be functional.

Any idea about the behavior?  Or, is there something I have done wrong setting up the project/page?

Thanks.

[Kevin]

======= This didn't work =======
       

public JsonResult ListClients()
{
            BackupClient[] res = bbc.ListBackupClients();
            return Json(res, JsonRequestBehavior.AllowGet);
}


======= But with a slight change to this, it worked, need to do it properly =======
       

public JsonResult ListLocationsInProfileClientID([DataSourceRequest] DataSourceRequest request, int id)
        {
            LocationsInProfile[] temp = bbc.ListLocationsInProfileClientID(id);
            DataSourceResult res = temp.ToDataSourceResult(request);
            return Json(res, JsonRequestBehavior.AllowGet);
        }

[Dimiter Madjarov]

Hi Kevin,

I see that you resolved the issue with the data binding.
Do you need any further assistance on this topic?

 

Regards,
Dimiter Madjarov
Telerik

[Kunal]

Hi,

I  have same problem.
Please help.

[Dimiter Madjarov]

Hello Kunal,


What is the exact issue that you are experiencing? The resolution for the current issue is described in the previous post i.e. the Grid is expecting a JSON which is converted in a DataSourceResult via our extension method.

Regards,
Dimiter Madjarov
Telerik

[Kunal]

Hello Dimiter,

Here you can see my code

GridViewController.cs
public  JsonResult GridView([DataSourceRequest]DataSourceRequest request)
{
            {
                      Employee[] EmpList = EmployeeAdapter.GetListofEmployees(true).ToArray();
                      DataSourceResult result = EmpList.ToDataSourceResult(request);
                      return Json(result, JsonRequestBehavior.AllowGet);
            }
}

GridView.aspx
 <%: Html.Kendo().Grid<AWC.TelerikGridView.Models.Employee>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.EmpID);
        columns.Bound(p => p.EmpName);
        columns.Bound(p => p.Department);
        columns.Bound(p => p.IsActive);
        columns.Bound(p => p.SystemRole);
        columns.Bound(p => p.TaskRole);
        columns.Command(command => 
            {
                command.Destroy();
                
            }).Title("Commands").Width(300);
    })
    .ToolBar(toolbar => 
    {
        toolbar.Create();
        toolbar.Save();
    })  
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .Model(model =>
        {
            model.Id(p => p.EmpID); // Specify the property which is the unique identifier of the model
            model.Field(p => p.EmpID).Editable(false); // Make the EmpID property not editable
        })
        
        .Create(create => create.Action("Create", "GridView"))
        .Read(read => read.Action("GridView", "GridView"))
        .Update(update => update.Action("Update", "GridView"))
        .Destroy(destroy => destroy.Action("Destroy", "GridView"))
    )
    
    .Pageable()
    %>


But when I run the application it shows data in Json format on browser.
Like this
{"Data":[{"EmpID":23,"EmpName":"Adam","Department":"UX","TaskRole":"Developer","SystemRole":"EMPLOYEE","IsActive":true},{"EmpID":64,"EmpName":"Devid","Department":"Management","TaskRole":"Project Manager","SystemRole":"EMPLOYEE","IsActive":true},{"EmpID":56,"EmpName":"Mark","Department":"MS.Net","TaskRole":"Team Leader","SystemRole":"EMPLOYEE","IsActive":true}],"Total":3,"AggregateResults":null,"Errors":null}


Thanks in advance.

[Dimiter Madjarov]

Hi Kunal,


This is the expected behavior when the GridView view is opened, as the current Action returns a JSON result. This is why creating such a View is not required. You should place the Grid in a separate View (e.g. Index) and it will perform Post request to the GridView action to get the data.

Regards,
Dimiter Madjarov
Telerik

[Tariq]

in my application there different view using different tables, when i use grid in index data is displaying correctly when i use other controller and view it not working

 

[Ivan Danchev]

Hi Tariq,

I see you've posted in another thread about the issue you are facing and there is an ongoing communication it: https://www.telerik.com/forums/trouble-populating-grid-from-web-api-json

Please continue the discussion there, or open a new thread and provide all the required information that would allow us to reproduce the problematic behavior.

Regards,
Ivan Danchev
Progress Telerik