We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

grand total functionaltiy

Thread ID:

Created:

Updated:

Platform:

Replies:

150331 Jan 2,2020 10:20 AM UTC Jan 7,2020 07:21 AM UTC Angular - EJ 2 4
loading
Tags: Grid
saravanan
Asked On January 2, 2020 10:20 AM UTC

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 [Syncfusion]
Replied On January 3, 2020 11:45 AM UTC

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, 
 
 
 
Let us know if you have any concerns. 
 
Regards, 
Balaji Sekar. 


saravanan
Replied On January 6, 2020 06:56 AM UTC

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
Replied On January 6, 2020 12:26 PM UTC

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

Dhivya Rajendran [Syncfusion]
Replied On January 7, 2020 07:21 AM UTC

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, 

 
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, 


Let us know if you have any concerns. 

Regards, 
R.Dhivya 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon