If open a nested row of a parent then previous opened nested row will close

[VigneshVpn]

Hi,

I need to open a only one nested row at a time. if i try to open a another nested row for same parent row then it will close the previous row and open the newly clicked nested row. I also tried using beforeRowExpand() event but it not work for me. its dificult to find the previous and current expanded rows in a same parent row.

Thanks in advance,
Vignesh

[paramvir]

Nested rows belong to different parent rows ( not same parent row ).

In beforeRowExpand event, iterate over all dataModel.data and find the rows having

rowData.pq_detail.show == true and set show value to false

[VigneshVpn]

I tried by,

beforeRowExpand: function (event, ui) {
            var dataList = $grid.pqGrid('option', 'dataModel.data');
            dataList.map(function (elem, index) {
                if (elem.pq_detail && elem.pq_detail.show) {
                    elem.pq_detail.show = false;
                }
            });
        }

But its allow to open another row at same time when already a row was open. and after that it fails to open and close.

plz help me on this.

if i expand a row then it will have to automatically close existing opened row, and allow to open then new clicked row.

Thanks,
Vignesh

[paramvir]

Add refresh after the loop.

Code: [Select]

beforeRowExpand: function (event, ui) {
            var dataList = $grid.pqGrid('option', 'dataModel.data');
            dataList.map(function (elem, index) {
                if (elem.pq_detail && elem.pq_detail.show) {
                    elem.pq_detail.show = false;
                }
            });
            $grid.pqGrid('refresh');
        }


[VigneshVpn]

!!!WOW....cool....

This is what i needed. Its worked Thanks.

Another question its working for Main grid. Now i need the same logic for detailModel.

I tried,
beforeRowExpand: function (event, ui) {
                var dataList = $grid.pqGrid('option', 'dataModel.data');
                dataList.map(function (elem, index) {
                    if (elem.pq_detail && elem.pq_detail.show) {
                        if (elem.row != ui.rowData.parent_row) {
                            elem.pq_detail.show = false;
                        } else {
                            var childList = dataList[0].pq_detail.child.pqGrid('option', 'dataModel.data');
                            childList.map(function (elem) {
                                if (elem.pq_cellselect && elem.pq_cellselect.pq_detail) {
                                    elem.pq_cellselect.pq_detail = false;
                                }
                            });
                        }
                    }
                });
                $grid.pqGrid('refresh');
}

but its not working.
I need to close like same in nested rows. do you have any idea?

Thanks,
Vignesh.

[VigneshVpn]

hello....any updates? plz help me on this to update?

[paramvir]

Do you mean you have 3 levels of nesting? If yes then code for 2nd level would be same as that of 1st level except reference to $grid for 2nd levels

[VigneshVpn]

Hi,

I tried using following code. it works only for 2 click of expand. if i clicked 3rd row it's not working.

I called this also in the beforeRowExpand(). and refer the data from the nested grid data.

var subContinentModel = function (data) {
        var json = [{ 'select': 'Select Function' }, { "Counter": "Counter" }, { "Timer": "Timer" }];
        var $subGridJson = {
            dataModel: {
                data: data,
                location: "local"
            },
            colModel: [
                { title: "", minWidth: 27, maxWidth: 27, type: "detail", resizable: false, editable: false, sortable: false },
                { title: 'Display Name', dataIndx: 'display_name', editor: displayControl },
                {
                    title: 'Function 1', dataIndx: 'functiontype1', editor: {
                        type: 'select',
                        options: json,
                        init: function (ui) {
                            var rowData = ui.rowData;
                            ui.$cell.find('select').change(function (evt) {
                                $grid.pqGrid("refresh");
                            });
                        }
                    }
                }
            ],
            height: 'flex',
            width: "70%",
            editModel: {
                clicksToEdit: 1
            },
            showHeader: true,
            numberCell: { show: false },
            showBottom: false,
            columnBorders: false,
            scrollModel: { autoFit: true, flexContent: true },
            showTop: false,
            beforeRowExpand: function (event, ui) {
                var dataList = $subGridJson.dataModel.data
                dataList.map(function (elem, index) {
                    if (elem.pq_detail && elem.pq_detail.show) {
                        elem.pq_detail.show = false;
                    }
                });
                $grid.pqGrid('refresh');
            }
};

This is the code of nested grid. Plz help me on this.

Thanks,
Vignesh.

[paramvir]

you are refreshing the main grid in beforeRowExpand event of child grid, that's why seem to be the problem.

Instead take reference to the grid which fires the event using "this" variable inside the event; you can use the same generic function for all levels.

[VigneshVpn]

Woooooow..................fantastic. its worked. and awesome. Thanks and thank you so much PqGrid team.