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
1175
igGridGroupBy - Custom Sorting
posted

Hey there,

I am looking to sort in a custom way on how fields are being grouped.  A-Z is preferred but we have another case when certain items need to be LAST.  In this example I need everyone with a title to be sorted by A-Z, then everyone without a title to always be grouped last.  Folks that are grouped last have a Boolean indicator attached to their data source.  The isAdded will be set to true.

How do I accomplish this?

 <script type="text/javascript">
        $(function () {
            $("#test").igGrid({
                autoGenerateColumns: false,
                autoCommit: true,
                primaryKey: "EmployeeDataId",
                width: "450px",
                columns: [
                    { key: "EmployeeDataId", dataType: "number", hidden: true },
                    { key: "EmployeeName", dataType: "string", headerText: "Employee Name" },
                    { key: "Title", dataType: "string", headerText: "Title" },
                    { key: "HireDate", dataType: "date", headerText: "Hire Date" },
                    { key: "IsAdded", dataType: "bool", hidden: true }
                ],
                features: [
                    { name: "Sorting" },

                    {
                        name: "GroupBy",
                        groupByAreaVisibility: "hidden",
                        columnSettings: [
                            { columnKey: "EmployeeDataId", allowGrouping: false },
                            { columnKey: "EmployeeName", allowGrouping: false },
                            { columnKey: "Title", allowGrouping: false, isGroupBy: true },
                            { columnKey: "HireDate", allowGrouping: false },
                            { columnKey: "IsAdded", allowGrouping: false }
                        ]
                    }
                ],
                dataSource: [
                    { EmployeeDataId: 1, EmployeeName: "Rich", Title: "Manager", HireDate: "10/10/1908", isAdded: false },
                    { EmployeeDataId: 2, EmployeeName: "Picky", Title: "Developer", HireDate: "11/07/2018", isAdded: false },
                    { EmployeeDataId: 3, EmployeeName: "Ryan", Title: "Developer", HireDate: "12/24/1990", isAdded: false },
                    { EmployeeDataId: 4, EmployeeName: "Aaron", Title: "Developer", HireDate: "1/09/1938", isAdded: false },
                    { EmployeeDataId: 5, EmployeeName: "Lilith", Title: "Owner", HireDate: "1/11/1999", isAdded: false },
                    { EmployeeDataId: 6, EmployeeName: "Ryu", Title: "Driver", HireDate: "2/12/1999", isAdded: false },
                    { EmployeeDataId: 7, EmployeeName: "Ken", Title: "", HireDate: "3/24/1949", isAdded: true },
                    { EmployeeDataId: 8, EmployeeName: "Balrog", Title: "", HireDate: "4/20/1969", isAdded: true },
                ]
            });
        });
    </script>
    <table id="test"></table>