Collapse other rows if one row is expanded in our Asp.net MVC hierarchical grid

Atul Pandey posted over 5 years ago

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.

Top Replies

17590

Offline Vasya Kacheshmarova posted over 5 years ago in reply to Atul Pandey +1
Hello Atul, Only handling rowExpanding event for the igHierarachicalGrid is enough for achieving your requirement. I mentioned the dataBount event since...view reply »

Parents

17590

Offline Vasya Kacheshmarova posted over 5 years ago

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.

70

Offline Atul Pandey posted over 5 years ago in reply to Vasya Kacheshmarova

Hi Vasya,

This is not working .

When I applied below code :

$(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);

});

Then args.parentrow is undefined and when I applied the rowExpanding event from the link you provided then it is not hitting.

I am applying code like below :

$(document).delegate("ighierarchicalgridrowexpanding","#igGrid1", function (e, args) {
debugger;
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);
});

Please provide me a sample code.

Thanks
Cancel
Reply

Cancel

Reply

17590

Offline Vasya Kacheshmarova posted over 5 years ago in reply to Atul Pandey

Hello Atul,

In the provided code snippets I noticed:

The ids used for the grid in the two event handler definitions are different: "#grid" and "#igGrid1"
In the first handler selector ("#grid") is listed first and event type (iggriddatabound) is listed second, however, for the second handler it is vice versa - first the event (ighierarchicalgridrowexpanding) and afterwards the selector("#igGrid1")

What I can suggest is try defining the event handlers consistently, with the same id and correct arguments order. For example, if we assume that the grid id is "grid" they should look like the following:

        $(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);
        });
        $(document).delegate("#grid", "ighierarchicalgridrowexpanding", function (e, args) {
            debugger;
            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);
        });

Please test this on your side and let me know whether it works on your side.

Children

17590

Offline Vasya Kacheshmarova posted over 5 years ago in reply to Atul Pandey
Hello Atul,

Only handling rowExpanding event for the igHierarachicalGrid is enough for achieving your requirement. I mentioned the dataBount event since you added a snippet in your previous response. Basically, what I am suggesting is handling the roxExpanding event with the correct id. This should be sufficient. For example:

$(document).delegate("#gridLoadOnDemand", "ighierarchicalgridrowexpanding", 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); });

Attached you will find a small sample illustrating my suggestion for your reference. Please test it on your side and let me know if you need any further assistance with this matter.

4722.HGrid_Updating_SaveChanges.rar
Cancel
Reply

Cancel
70

Offline Atul Pandey posted over 5 years ago in reply to Vasya Kacheshmarova

Hi Vasya,

I just quoted the code here for your reference , so id mismatched but now I get confused from your answer.

1. You have quoted the link above for rowExpanding , there ighierarchicalgridrowexpanding is the second parameter. I have tried this but was not working.

2. I had tried "iggriddatabound" as well but it was also not working.

3. Are you saying I have to use both event $(document).delegate("#grid", "iggriddatabound"... and $(document).delegate("#grid", "ighierarchicalgridrowexpanding"....

Thanks & Regards,

Atul
Cancel
Reply

Cancel