Header group ejGrid customization

[Bruno Rodrigues]

Dear Support,

I'm having some issues (If we can call it an issue, anyway...) I've managed a way to modify de .CSS of the grid and put the header with a bold font. 

However, not that I don't like how the default group header is constructed, but it doesn't fit to my needs.

Is there any way, to show only the Profile name in Group Header? (Image below)

Profile A

instead of 

[Column Name]: [element text] - [item count]

Thank you in advance,

Best Reagards,

Bruno Rodrigues

[Madhu Sudhanan P]

Hi Bruno,

Thanks for using Syncfusion products.

We can achieve your requirement using group caption template feature in grid. The group caption template will allow us to customize the group caption. It can be used in grid as follows.

ej.Grid.locale["en-US"] = {

            GroupCaptionFormat: "{{:key}}",
};

The GroupCaptionFormat property of ej.Grid.locale[grid current locale] is used to customize the template of the group caption. By default its values will be  as {{:field}}: {{:key}} - {{:count}} {{if count == 1 }} item {{else}} items {{/if}}. For your kind information, we can also use {{:headerText}} in caption template to show the column header text in caption.

Please let us know if you require further assistance.

Regards,
Madhu Sudhanan. P

[Bruno Rodrigues]

Thank you for you prompt reply!

However I'm trying to understand how do I set that value to my current Grid, is it something like this:        

 $("#GridPermissions").ejGrid("model").locale = {

            GroupCaptionFormat: "{{:headerText}}",

            }

Or there is any other way to set that value?

Thank you, once again.

[Madhu Sudhanan P]

Hi Bruno,

The value set in GroupCaptionFormat property  will be used by all the grids in the page, this is due to the fact that the ej.Grid.locale[“en-US”] is a global object and hence using any properties inside the object will be applied commonly to all the grids. And so, to set a unique group caption format for a grid, we can change the GroupCaptionFormat property in the load event of the grid as follows.

  $("#Grid1").ejGrid({

                . . . . .

                load: function (args) {

                    ej.Grid.locale["en-US"]["GroupCaptionFormat"] = "{{:key}}";

                }
            });

  $("#Grid2").ejGrid({

                . . . . .

                load: function (args) {

                    ej.Grid.locale["en-US"]["GroupCaptionFormat"] = "{{:headerText}}";

                }
            });

And also if we set the property as above then the ej.Grid.locale["en-US"]["GroupCaptionFormat"] will hold the last updated value.

Please let us know if you have any queries.

Regards,
Madhu Sudhanan. P

[Bruno Rodrigues]

Madhu Sudhanan, thank you so much for your fast answer. 

I'm still having issues regarding this subject. Hoewever I guess my problems are due the lack of some libraries, probably.

The only change I notice when I add this code is that the word "item" from the default string it is changed as following: Perfil: Portal - 2 {{:headerText}}.

However I will not be bodering you with this issue, you've already help.

Best Regards,

Bruno Rodrigues

[Madhu Sudhanan P]

Hi Bruno,

We have analyzed the reported issue and we are unable to reproduce the issue at our side. Its working fine for us. And so could you please share code snippet you have tried(both grid and caption template) and also the screenshot of the issue. For your convenience we have created a simple sample with group caption template and the same can be downloaded from the below location. And the sample is created using Essential Studio v13.1.030.

Sample Location: http://www.syncfusion.com/downloads/support/forum/119468/ze/GroupCaptionTemplate-2075082939

Please refer the below table for the possible values that can be used in group caption template.

{{:field}}	Defines the field name of the current group column(in your case Perfil)
{{:key}}	Defines the current group value(in your case Profile A)
{{:count}}	Defines the number of records under the current group
{{:headerText}}	Defines the headerText value of the  current group column(header text of the column with field Perfil)

You can use the above values in the group caption template to customize your own template.

When using single grid or want to use common group caption between multiple grids then it is enough to specify the group caption template as follows in the page.

ej.Grid.locale["en-US"] = {

            //Will display `Profile A` alone in the group caption

            GroupCaptionFormat: "{{:key}}"
        };

And also in your update on June 26, 2015, you have mentioned as “how do I set that value to my current Grid” in your query and from that we understood that you want to set the unique group caption between multiple grids, to do so we have to set the group caption template in the load event as provided in our update on June 29, 2015.

Please let us know if you have any queries.

Regards,
Madhu Sudhanan. P