Author Topic: How To Prevent Row Grouping Collapse on Grid  (Read 2283 times)

Sivakumar

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 32
    • View Profile
How To Prevent Row Grouping Collapse on Grid
« on: January 10, 2020, 06:54:52 pm »
Hi,

I want to prevent the row grouping collapse after saving changes to the grid.
The rows gets collapsed everytime the data is added/deleted/modified and saved, thus needed to be expanded again for making any further changes.
Is there a way to retain the expanded state of the rows for the grid until the complete page refresh is done?
This task is on priority. Can you please help on this?
Let me know if any other information is required. Attached grid's screenshot for reference.

Thanks.


paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6124
    • View Profile
Re: How To Prevent Row Grouping Collapse on Grid
« Reply #1 on: January 11, 2020, 09:45:42 pm »
How are you saving changes in a grid with row grouping. Please share your code or a jsfiddle.

Sivakumar

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 32
    • View Profile
Re: How To Prevent Row Grouping Collapse on Grid
« Reply #2 on: January 13, 2020, 02:47:41 pm »
//Refresh Method For Project Spend Grid
function RefreshSpentGrid() {
        if ($pfbudgrid != undefined) {
            if ($pfbudgrid.pqGrid('getInstance').grid.isDirty()) {
                if (confirm('Do you want to save data?')) {
                    PFSpentSave();
                }

            }
            $("#grid_pfBudjet").pqGrid("destroy");
            $pfbudgrid = undefined;
            BindPfBudjet();
            setScrollling();
            Getmatrix();
        }
    }

/***************************************************************************/
//Refresh Method For Project  FTE Grid
function RefreshFteGrid() {
        if ($grid != undefined) {
            if ($grid.pqGrid('getInstance').grid.isDirty()) {
                if (confirm('Do you want to save data?')) {
                    ExtLabourSave();
                }
            }
            $("#grid_prFte").pqGrid("destroy");
            $grid = undefined;
            BindPfFte();
            setScrollling();
            Getmatrix();
        }
    }

/***************************************************************************/
//Save Method for Project Spend Grid
function PFSpentSave() {
        var grid = $("#grid_pfBudjet").pqGrid('getInstance').grid;
        if (grid.saveEditCell() === false) {
            return false;
        }
        if (grid.isDirty()) {
            var changes = grid.getChanges({ format: "byVal" });

            $.ajax({
                dataType: "json",
                type: "POST",
                async: false,
                beforeSend: function (jqXHR, settings) {
                    grid.showLoading();
                },
                url: '@Url.Action("SavePrSpent")',
                data: { list: JSON.stringify(changes), projectId: projectId,year:$("#drpYear").val() },
                success: function (changes) {
                    //debugger;
                    grid.commit({ type: 'add', rows: changes.addList });
                    grid.commit({ type: 'update', rows: changes.updateList });
                    grid.commit({ type: 'delete', rows: changes.deleteList });

                    grid.history({ method: 'reset' });
                    alert("Saved Successfully!");


                },
                complete: function () {
                    grid.hideLoading();
                    RefreshSpentGrid();
                }
            });
        }
    }

/***************************************************************************/
//Save Method for Project FTE Grid
function ExtLabourSave() {
        var grid = $("#grid_prFte").pqGrid('getInstance').grid;
        if (grid.saveEditCell() === false) {
            return false;
        }
        if (grid.isDirty()) {
            var changes = grid.getChanges({ format: "byVal" });

            $.ajax({
                dataType: "json",
                type: "POST",
                async: false,
                beforeSend: function (jqXHR, settings) {
                    grid.showLoading();
                },
                url: '@Url.Action("SaveExtLabour")',
                data: { list: JSON.stringify(changes), projectId: projectId,year:$("#drpYear").val() },
                success: function (changes) {
                    //debugger;
                    grid.commit({ type: 'add', rows: changes.addList });
                    grid.commit({ type: 'update', rows: changes.updateList });
                    grid.commit({ type: 'delete', rows: changes.deleteList });

                    grid.history({ method: 'reset' });
                    alert("Saved Successfully!");
                },
                complete: function () {
                    grid.hideLoading();
                    RefreshSpentGrid();
                    RefreshFteGrid();
                }
            });
        }
    }

Note: I need to refresh the first grid on the save of second grid as some calculation is involved in the process.
I don't want both the grid to collapse after saving the second.
If I am saving only the first grid, I am able to keep the rows expanded by not calling the RefreshSpentGrid(); method in the complete block of PFSpentSave() method.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6124
    • View Profile
Re: How To Prevent Row Grouping Collapse on Grid
« Reply #3 on: January 13, 2020, 05:51:45 pm »
CRUD ( Add / Edit / Delete ) of records is supported only in plain grid and treegrid.

Row grouping and pivot is a report view and CRUD is not directly supported on it.

If you need to use CRUD with row grouping, then you can add a toggle function to present a plain view of the grid when user wants to make changes and restore the row grouping view when user is done making changes in the data.