Grid Panel Remote Loading

  1. #1

    Grid Panel Remote Loading

    Hi,

    I am making my first app in EXT.net in MVC 4.

    My problem is I make a call to my action to get data to load into my Grid Panel like so passing in a model as a parameter. This all works fine:
    Ext.Ajax.request({
                url: '../Tools/Test',
                jsonData: Ext.JSON.encode({ model: previewModel }),
                success: function (response) {                                
                    Ext.Msg.alert("Info", "Returned Data: " + response.responseText);
                    App.PreviewGP.getStore().loadData(response);
                },
                failure: function (response) {
                    Ext.Msg.alert("Error", response.responseText);
                }
            });
    In My action, I create a new Array and pass this back to the Ajax call

    [HttpPost]
            public ActionResult Test(Example model)
            {
                var result = model.OfficeModels.Select(office => new PreviewModel
                            {
                                GroupId = office.GroupId,
                                NodeId = office.NodeId
                            }).ToArray();
                return Json(new {data = result}, JsonRequestBehavior.AllowGet);
            }
    The pop up in the Success response has this data:

    Returned Data: {"data":[{"GroupId":40000003,"NodeId":32}]}
    So we know that data is coming back.

    My Grid Panel looks like so:

    pitem.Add(Html.X().GridPanel()
                                                    .ID("PreviewGP")
                                                    .Title("Preview")
                                                    .Header(true)
                                                    .Border(false)
                                                    .Margins("5 5 5 5")
                                                    .Frame(true)
                                                    .Flex(1)
                                                    .Store(neighborStore => neighborStore.Add(Html.X().Store()
                                                                            .AutoLoad(false)
                                                                            .ID("PreviewStore")
                                                                            .Reader(reader => reader.Add(Html.X().JsonReader().Root("data")))
                                                                            .Model(model => model.Add(Html.X().Model()
                                                                                                            .Fields(fields =>
                                                                                                                        {
                                                                                                                            fields.Add(Html.X().ModelField().Name("GroupId"));
                                                                                                                            fields.Add(Html.X().ModelField().Name("NodeId"));
                                                                                                                        }))
                                                                                                )
                                                                                ))                                                                            
                                                    .ColumnModel(columnModel =>
                                                                    {
                                                                        columnModel.Columns.Add(Html.X().Column().Text(_ServerInformation.GroupID_Text).DataIndex("GroupId"));
                                                                        columnModel.Columns.Add(Html.X().Column().Text(_ServerInformation.NodeID_Text).DataIndex("NodeId").Flex(1));                                                                
                                                                    })                                                
                                                    .View(view => view.Add(Html.X().GridView()))
                                        );
    However all that happens is a few blank rows appear in the Grid but no data.

    Has anyone any idea why this is not working?

    Thanks in advance for any help.
  2. #2
    I have tried stripped this right back to basics but still cannot get it to work.

    I have a function that is called when a button is pressed:

    function NextStep2() {
                var jsonData = {
                "employees": [
                    { "firstName": "John", "lastName": "Doe" },
                    { "firstName": "Anna", "lastName": "Smith" },
                    { "firstName": "Peter", "lastName": "Jones" }
                ]
            };
            App.PreviewGP.show(); 
            App.PreviewGP.getStore().loadData(jsonData);
        }
    I've changed the Grid Model, Reader Root and Columns to reflect the Json it is receiving but still nothing.

    Html.X().GridPanel()
              .ID("PreviewGP")                                                                    
              .Store(neighborStore => neighborStore.Add(Html.X().Store()
              .AutoLoad(false)
              .ID("PreviewStore")
              .PageSize(5)
              .Reader(reader => reader.Add(Html.X().JsonReader().Root("employees")))
              .Model(model => model.Add(Html.X().Model()
                         .Fields(fields =>
                                  {
                                        fields.Add(Html.X().ModelField().Name("firstName"));
                                        fields.Add(Html.X().ModelField().Name("lastName"));
                                                                                                                                                                                                                                                            }))
                          )
                  ))
                  .ColumnModel(columnModel =>
                           {
                            columnModel.Columns.Add(Html.X().Column().Text(_ServerInformation.GroupID_Text).DataIndex("firstName"));
                            columnModel.Columns.Add(Html.X().Column().Text(_ServerInformation.NodeID_Text).DataIndex("lastName").Flex(1));
                            })
                   .View(view => view.Add(Html.X().GridView()))
    I am beginning to the think there might be some issue with reader. I've used firebug and the data never gets inserted into the grid so it's not a case of the grid hiding it or anything.

    Can anyone point me in the right direction on this please?
  3. #3
    Well I eventually got it to work after many hours wasted.

    The solution was to change my success method to

    success: function (response) {
                    var jsonData = Ext.JSON.decode(response.responseText);
                    var result = jsonData.data;                
                    App.PreviewGP.getStore().loadData(result);
                },

Similar Threads

  1. Replies: 4
    Last Post: Jan 21, 2013, 7:23 AM
  2. Add a Loading Screen to a Grid Panel
    By adipoaca in forum 1.x Help
    Replies: 2
    Last Post: Nov 11, 2011, 10:26 AM
  3. [CLOSED] How to set an image to a grid panel column when is loading?
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 19, 2010, 5:20 PM
  4. Remote Combox ObjectDataSource Loading Bug
    By protactinium in forum 1.x Help
    Replies: 2
    Last Post: Feb 08, 2010, 7:25 PM
  5. [CLOSED] Panel deferred loading with grid in Merge mode
    By tdracz in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Sep 14, 2009, 1:38 PM

Tags for this Thread

Posting Permissions