Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Atul Pandey
70
Collapse other rows if one row is expanded in our Asp.net MVC hierarchical grid
posted

 We want collapse other rows if one row is expanded in our hierarchichal grid.

I was looking intothis post https://ko.infragistics.com/community/forums/f/ignite-ui-for-javascript/94943/collapse-other-rows-if-one-row-is-expanded

But solution given there is for Javascript, We need solution for MVC infragistic grid.

Parents
  • 17590
    Offline posted

    Hello Atul,

    The same solution, as suggested in the Tsanna`s forum post, can be applied in MVC scenario as well. What needs to be done is to attach the rowExpanding event handler to the igHierarcicalGrid in the Index.cshtml file. The only difference is that you will add the event handler after the grid`s initialization. For example:

    <body>
       @(Html.Infragistics()
                .Grid(Model)
                .ID("grid")
                .Width("100%")
                .Height("500px")
                .PrimaryKey("ID")
                .AutoGenerateColumns(false)
                .AutoGenerateLayouts(false)
                .Columns(column =>
                {
                    column.For(x => x.ProductName).HeaderText("Product Name").Width("30%");
                    column.For(x => x.CategoryName).HeaderText("Category").Width("30%");
                    column.For(x => x.UnitPrice).HeaderText("Unit Price").Width("20%").Template(" {{if parseInt(${UnitPrice}) >= 3 }} $ ${UnitPrice} <img width='10' height='15' src= 'https://www.igniteui.com/images/samples/templating-engine/colTemplateWithConditionalCell/arrowUp.gif' />{{else}}<img width='10' height='15' src= 'https://www.igniteui.com/images/samples/templating-engine/colTemplateWithConditionalCell/arrowDown.gif' />{{/if}}");
                    column.For(x => x.UnitsInStock).HeaderText("Units In Stock").Width("20%");
                })
                .Features(features =>
                {
                    features.Sorting().Type(OpType.Remote);
                    features.Paging().Type(OpType.Remote);
                    features.Filtering().Type(OpType.Remote);
                    features.Responsive().ColumnSettings(cs =>
                    {
                        cs.ColumnSetting().ColumnKey("CategoryName").Classes("ui-hidden-phone");
                        cs.ColumnSetting().ColumnKey("UnitPrice").Classes("ui-hidden-phone ui-hidden-tablet");
                    });
                })
                .DataSourceUrl(Url.Action("GetData"))
                .Render()
    )
    <script>
        //Delegate
        $(document).delegate("#grid", "iggriddatabound", function (e, args) {
            var grid = args.owner, expandedRows, i;
            expandedRows = $(args.parentrow).closest('tbody').find('tr[state=e]');
            for (i = 0; i < expandedRows.length; i++) {
                grid.collapse(expandedRows[i]);
            }
            console.log(args);
        });
    </script>
</body>

    Please test this approach on your side and let me know if you have any additional  questions regarding this matter.

Reply Children