Hi all,
i need to change headertext from iggrid columns because i need to change language.
how i can make it with javascript?
thanks for advance
Hello Ramesh,
Thank you for posting in our community.
Starting from version 16.2, igGrid provides the user with the ability to change columns collection at runtime. Having this in mind, my suggestion is handling selectionChanged event of the combo. In the event handler, the current columns collection can be retrieved, modified, according to the combo`s new selection and set back to grid`s columns option. For example:
$("#combo").igCombo({ dataSource: headers, textKey: "Text", valueKey: "Val", width: "200px", selectionChanged: function (evt, ui) { var cols = $("#grid").igGrid("option", "columns"); if(ui.items.length > 0) { cols[1].headerText = ui.items[0].data.Text; } $("#grid").igGrid("option", "columns", $.extend(true, [], cols)); }});
Attached you will find a working sampel illustrating my suggestion. From the igCombo you select teh text that will be applied to Product Name column.
Please test it on your side and let me know if you need any further assistance with this matter.
4454.igGridChangeColHeader.zip
HI,I have a similar need, I need to change the header text of a particular column based on the selection of a different combo box.How can I do this?
Perfect, i do this correctly, a lot of thanks!!!!!
Hello Ruben,
Thank you for posting in our forums.
You can refer to the following forum post discussing the same issue:
https://es.infragistics.com/community/forums/f/ignite-ui-for-javascript/86461/how-to-change-headertext/431334#431334
You may also use the headerCellRendered event handler for the purpose.
https://www.igniteui.com/help/api/2013.2/ui.iggrid#events
For example:
$("#grid1").live("iggridheadercellrendered", function (event, ui) {
var headerText, grid = ui.owner,
key = ui.columnKey,
th = ui.th;
switch (key) {
case "EmployeeID":
headerText = '<%=this.GetGlobalResourceObject("Grid", "Northwind_Employees_EmployeeID").ToString() %>';
$(th[0]).text(headerText);
break;
case "Title":
headerText = '<%=this.GetGlobalResourceObject("Grid", "Northwind_Employees_Title").ToString() %>';
case "Gender":
headerText = '<%=this.GetGlobalResourceObject("Grid", "Northwind_Employees_Gender").ToString() %>';
case "HireDate":
headerText = '<%=this.GetGlobalResourceObject("Grid", "Northwind_Employees_HireDate").ToString() %>';
case "SalariedFlag":
headerText = '<%=this.GetGlobalResourceObject("HierarchicalGrid", "SalariedFlag").ToString() %>';
}
});
Let me know if you need further assistance.