Grid Layout Adjustment

Title:

Hello,

Sometimes while I'm binding data to grid it doesn't adjust data columns correctly, I had to reload data twice (api.load()) to have the proper adjustment.

I happened to find function called lay in learn/mvc/Grid
    api.lay() // adjust grid layout
But I couldn't manage to get it to work with me.

Issue example:
---------------------------------------------------
ID    | Name    | Desc    | Date
---------------------------------------------------
01    | Test1|testing adjustment desc|3/25/2015
02    | Test2|testing adjustment 32131|3/24/2015
03    | Test3|testing adjustment 32131|3/24/2015
---------------------------------------------------
1 | 2 | 3 | 4
---------------------------------------------------

=> After second api.load()

------------------------------------------------------------------
ID    | Name    | Desc                                     | Date
------------------------------------------------------------------
01    | Test1    | testing adjustment desc       | 3/25/2015
02    | Test2    | testing adjustment 32131    | 3/24/2015
03    | Test3    | testing adjustment 32131    | 3/24/2015
------------------------------------------------------------------
1 | 2 | 3 | 4
------------------------------------------------------------------

Code Example:

    private readonly ICrudService<GroupAccountsTreeInput> groupsAccountService;

    public ActionResult GroupsAccountsTree(GridParams g, string[] nodesAdded)
            {
                if (g.SortDirections == null)
                {
                    g.SortDirections = new[] { "asc" };
                }
    
                if (g.SortNames == null)
                {
                    g.SortNames = new[] { "AccountCode" };
                }
    
               var list =
                    this.groupsAccountService.Where(
                        o =>
                        o.FldCompanyCode.ToLower().Equals(BaseCompanyCode.ToLower())
                        && o.FldSiteCode.ToLower().Equals(BaseSiteCode.ToLower())).OrderBy(o => o.FldAccCode);
                
                IQueryable<GroupAccountsTreeInput> roots = list.Where(o => o.Level == 1).AsQueryable();
    
                var model = new GridModelBuilder<GroupAccountsTreeInput>(roots, g)
                                {
                                    Key = "AccountCode",
                                    GetChildren = (node, nodeLevel) =>
                                        {
                                            var level = node.Level + 1;
                                            var children = list.Where(o => o.AccountParentCode == node.AccountCode && o.Level == level).OrderBy(o => o.AccountCode);
    
                                            if (nodeLevel > 1 && children.Any() && g.Key == null)
                                            {
                                                return Awe.LazyNode;
                                            }
    
                                            return children.AsQueryable();
                                        },
                                    GetItem = () => 
                                        {
                                            var id = g.Key;
                                            return list.FirstOrDefault(o => o.AccountCode == id && o.Level == 2);
                                        },
                                    Map = this.MapNode
                                };
    
                return this.Json(model.Build());
            }

    private object MapNode(GroupAccountsTreeInput node)
    {
        return new{ node.AccountCode, node.AccountName, Actions = this.RenderView("GroupAccountsTreeGridActions", node)};
    }

in partial view (GroupAccountsTreeGridActions):
    <a href="#" onclick="@(Url.Awe().PopupFormAction().Url(Url.Action("Create","GroupsAccounts",new { mainGroupCode = Model.MainGroupCode, subGroupCode = Model.SubGroupCode })).Success("nodeCreated").Height(450))">AddChild</a>
    <a href="#" onclick="@(Url.Awe().PopupFormAction().Url(Url.Action("Edit", "GroupsAccounts", new { mainGroupCode = Model.MainGroupCode, subGroupCode = Model.SubGroupCode, accountCode = Model.AccountCode })).Success("nodeUpdated").Height(450))">Edit</a>
    <a href="#" onclick="@(Url.Awe().PopupFormAction().Url(Url.Action("Delete", "GroupsAccounts", new { gridId = "TreeGrid", mainGroupCode = Model.MainGroupCode, subGroupCode = Model.SubGroupCode, accountCode = Model.AccountCode })).Success("nodeDeleted").Height(200).Width(400))">Delete</a>

Index view:

    @using (Html.BeginForm())
    {
    @(Html.Awe().Grid("TreeGrid").CssClass("awe-tree").Groupable(false).Url(Url.Action("GroupsAccountsTree", "GroupsAccounts"))
                    .Columns( new Column { Width = 120, Name = "AccountCode", ClientFormat = ".AccountCode", Header = "Account Code" },
                        new Column { Name = "AccountName", ClientFormat = ".AccountName", Header = "Account Name" },
                        new Column { ClientFormat = "<td class='LeftActions'>.Actions</td>", Width = 140 }
            )
                    )
    }
    
    <script type="text/javascript">
        function refreshGrid() {
            $('#TreeGrid').data('api').reset();
            $('#TreeGrid').data('api').load(); //temp
        }
        
        var nodesAdded = [];
        $(function () {
            $('#TreeGrid').on('aweload', function () {
                nodesAdded = [];
            });
        });
    
        function nodeCreated(res) { refreshGrid(); }    
        function nodeUpdated(res) { refreshGrid(); }
        function nodeDeleted(res) { refreshGrid(); }
    </script>

Baha' Al Fataftah

asked at 25 Mar 2015

which version are you using ? any console errors ? would you be able to reproduce this in a mini project and upload, post the link here ? please read: http://aspnetawesome.com/learn/mvc/CommonProblems#Isolate-the-problem

at 25 Mar 2015 Omu
Its working normally on the mini project, I'll update next with the issue causing this or a mini project. Thanks

at 26 Mar 2015 Baha' Al Fataftah
try commenting out everything on the page but the grid, after try commenting the grid columns one by one, at the same time watch the console for errors

at 26 Mar 2015 Omu
refresh grid function needs api.load only, api.reset shouldn't be necessary; you can set GridModelBuilder.DefaultKeySort = Sort.Asc, so no need to set g.SortDirections and Names; try removing the Actions column for the moment

at 04 May 2015 Omu
was the problem solved ? if not and you can't isolate it in separate project, could you provide a live link to your app (the page with the problem)

at 15 May 2015 Omu
My app is in initial phase yet, I'll try to reproduce my case on a sample live demo very soon. Thanks

at 17 May 2015 Baha' Al Fataftah

Answers

Hello, sorry I didn't face the problem on mini project or other pages recently. While working with grid tree, I faced the same problem with layout after: Opening tree nodes then -> filtering data using drop-down and parent parameters. To fix it I called api.reset then api.load in my javascript. $('#TreeGrid').data('api').reset(); $('#TreeGrid').data('api').load();
Baha' Al Fataftah

answered at 03 May 2015
- are you using columns persistence ?
  
  at 03 May 2015 Omu
- tried both with and without, the same behavior
  
  at 03 May 2015 Baha' Al Fataftah
- please edit you question and add your view and controller code to the question; the grid helper definition + its parents and the action that returns data to the grid
  
  at 04 May 2015 Omu
- updated, when I use grid treeview with parent it is the same only extra .parent()
  
  at 04 May 2015 Baha' Al Fataftah

please Sign In to leave an answer