grand total functionaltiy

[saravanan]

Hi,

In my project, I need a requirement to display grand total for every row at the bottom and that row should not be sortable and it should be fixed. I did not find any option like that in angular grid 

[Balaji Sekar]

Hi Saravanan, 

 

Greetings from the Syncfusion support, 

 

We suggest you to use grid aggregates to achieve your requirement. The aggregate columns are fixed, does not sort and you can render multiple aggregates for the columns as per your requirement. Please check below documentation and sample to know more about the grid aggregates, 

 

Help documentation: https://ej2.syncfusion.com/angular/documentation/grid/aggregates/#footer-aggregate 

 

Demo sample:  https://ej2.syncfusion.com/angular/demos/#/material/grid/aggregate-default 

 

Let us know if you have any concerns. 

 

Regards, 

Balaji Sekar. 

[saravanan]

Thanks Balaji Sekar for your reply.

I have a few more questions also I have attached the screenshot for the same

         1) I want to have subheader in the column header section 

         2) In the frozen column, I want to have selected row on hover on both frozen column as well as non-frozen column and finally

         3) I want to remove pagination on the bottom right side of the grid

         4) I want to bring the column chooser to the bottom right side of the grid and on clicking the column chooser it should display on top of the grid, not on the bottom 

Attachment: syncfusion_grid_a6062eb5.zip

[saravanan]

Hi,

I have one more question how can I change the date field formate of date picker in filter setting option

[Dhivya Rajendran]

Hi Saravanan, 

Thanks for your update. 

Query – 1: “I want to have sub header in the column header section” 

You can achieve your requirement by using the stacked columns. This is documented in the below help site, 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/columns/#resize-stacked-column 

 

Query – 2: “In the frozen column, I want to have selected row on hover on both frozen column as well as non-frozen column” 

 

This has been resolved in the latest source in which the hover and selection works for both the frozen and movable columns. So please update your syncfusion related packages to the latest version to include this solution. 

 

Query – 3: “I want to remove pagination on the bottom right side of the grid” 

 

This can be achieved by disabling the pager module’s enablePagerMessage property in the grid’s dataBound event as demonstrated in below code snippet, 

 

// Grid’s dataBound event function 

onDataBound() { 

    this.grid.pagerModule.pagerObj.enablePagerMessage = false; 

} 

Query – 4: “I want to bring the column chooser to the bottom right side of the grid and on clicking the column chooser it should display on top of the grid, not on the bottom ” 

You can achieve this requirement by creating a dynamic button element, binding click event to it, appending the button to the pager element in the dataBound event and in the button click event calling grid’s openColumnChooser method. This is demonstrated in below code snippet, 

// Grid’s dataBound event function 

onDataBound() { 

        if (this.flag) { 

                    . 

                    . 

            // Creates instance for an EJ2 button 

            var buttonObj = new Button({ 

                content: "Columns" 

            }) 

            // Create a button element and bind click event for it 

            var button = document.createElement('button'); 

            button.id = "columnChooser"; 

            button.onclick = this.buttonClick.bind(this); 

            button.style.marginLeft = "92%"; 

            // Append the EJ2 button instance to the created button element 

            buttonObj.appendTo(button); 

            // Insert the button element as child of pager element 

            (this.grid.pagerModule as any).element.insertBefore(button, (this.grid.pagerModule as any).element.querySelector('.e-parentmsgbar')) 

            this.flag = false; 

            // Bind open event to the column chooser module 

            (this.grid.columnChooserModule as any).dlgObj.open = this.columnChooserOpen.bind(this); 

        } 

} 

 

// Button click event function 

buttonClick() { 

        // Open column chooser 

        this.grid.openColumnChooser(); 

} 

 

// Column chooser’s open event function 

columnChooserOpen(args) { 

        // Here you can change the column chooser element's position as per your requirement 

} 

By default calling the column chooser method renders it in the grid’s center. You can change its position in the column chooser dialog’s open event which is shown in the above code snippet. 

 

Query – 5: “How can I change the date field format of date picker in filter setting option” 

This can be achieved by changing the datepicker’s format type in the grid’s actionComplete event when the requestType is “filterafteropen” and columnType is “date”. This is demonstrated in below code snippet, 

// Grid’s actionComplete event function 

actionComplete(args) { 

     if (args.requestType === "filterafteropen" && args.columnType === "date") { 

            var dateObj = args.filterModel.dlgDiv.querySelector('.e-datepicker').ej2_instances[0]; 

            dateObj.format = "d/M/y"; 

      } 

} 

We have prepared a sample based on the above queries which you can find below, 

Sample: https://stackblitz.com/edit/angular-y2zatz?file=app.component.ts 

Let us know if you have any concerns. 

Regards, 

R.Dhivya