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

8 posts, 1 answers
  1. Kevin
    Kevin avatar
    4 posts
    Member since:
    Oct 2013

    Posted 30 Oct 2013 Link to this post

    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.





  2. Kevin
    Kevin avatar
    4 posts
    Member since:
    Oct 2013

    Posted 30 Oct 2013 Link to this post

    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.




  3. Answer
    Kevin
    Kevin avatar
    4 posts
    Member since:
    Oct 2013

    Posted 30 Oct 2013 Link to this post

    ======= 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);
            }
  4. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2272 posts

    Posted 31 Oct 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Kunal
    Kunal avatar
    3 posts
    Member since:
    Nov 2013

    Posted 22 Nov 2013 Link to this post

    Hi,

    I  have same problem.
    Please help.
  6. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2272 posts

    Posted 22 Nov 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Kunal
    Kunal avatar
    3 posts
    Member since:
    Nov 2013

    Posted 22 Nov 2013 Link to this post

    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.
  8. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2272 posts

    Posted 22 Nov 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top