Hi team,
I' am looking for a solution,On mouse clicking on Column header of Grid, all contents(data) should re-arranged and grouped based on the clicked column. And The Column Which has been been clicked must disappear from the column.
Hello Shubha Rangaraju,
Thanks for posting in our forum.
What you need to do is to bind click event to the header and use the GroupBy and Hiding APIs.
You can bind click event to the header like:
$("selector").on("click",function(event){
});
Where as a selector you can use the .ui-widget-header class like that "#gridID .ui-widget-header" where gridID is the specific ID of your grid.
In addition, in the callback you could use Hiding and GroupBy API methods:
https://www.igniteui.com/help/api/2019.1/ui.iggridhiding#methods:hideColumn
and
https://www.igniteui.com/help/api/2019.1/ui.iggridgroupby#methods:groupByColumn
Let me know if you have any additional questions on how to use the API methods.
Best Regards,
Martin Dragnev,
Infragistics
Hi Martin Dragnev,
The below functionality is not working when I click on any particular column header in the igGrid,
$("#gridID .ui-widget-header").on("click",function(event){
Is there any other method/delegate function exists,Please let me know
Thanks & regards
Shubha
Hello Shubha,
I am glad that you find my suggestion helpful.
Please do not hesitate to ask if there is something more that i can help you.
Thank you
Martin Dragnev
I have created you a sample following the steps I mentioned above and when you click a column header the grid groups by the column key and hides it.
I am attaching it so that you can observe if that is the desired behavior.
Please let me know if you have any additional questions or concerns.
2626.sample1.rar