edit Grid grouping template

[Mauro]

how to edit grid grouping template

[Aurobindo]

Can I add the groupable column and inline editing feature both in a Data Grid?

[Martin]

Hello, 

the two features are compatible, please check this Dojo example for reference.

[Alex Hajigeorgieva]

Hello, Mauro,

The Kendo UI Grid public API offers two group templates - groupHeaderTemplate and groupFooterTemplate:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.groupheadertemplate
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.groupfootertemplate

Have a look and let me know if you need further assistance with either of the templates. Should you need to achieve something not covered by the groupHeader.groupFooter templates, please provide more details so I can advise accordingly.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Mauro]

hello, Alex

1) I need the whole line to be clickable.
2) The lines of the grouping are hidden by default

 

[Alex Hajigeorgieva]

Hi, Mauro,

To use the whole grouping row of the Kendo UI Grid to collapse and expand groups, you could add a "click" handler which targets them and then programmatically find and click the expand/collapse icons. 

$(".k-grouping-row").on("click", function(e){
  $(e.target).find(".k-icon").click();
});

To indicate that it the row is "clickable", then also add a CSS rule for the row:

<style>
  .k-grouping-row {
    cursor:pointer;
  }
</style>

Here is a  runnable Dojo for your convenience:

https://dojo.telerik.com/@bubblemaster/OyaziyoV

Regarding the second requirement - "The lines of the grouping are hidden by default", I suppose that you wish to collapse the groups initially? If this is the case, you can have a look at the knowledge base article at:

https://docs.telerik.com/kendo-ui/knowledge-base/grid-collapse-groups

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Mauro]

ok

thank you very much