Hi there, I am currently seeking a solution of igGrid in order to have a dynamic header. For example: I would like to have an igGrid of
Name, Age, Job, Attribute 1, Attribute 2, Attribute 3, Attribute 4, ......
Best regards.
Hello Anh,
Thank you for posting in our community.
In order to ensure that I will provide you better and more accurate support I will need some additional information about your requirement.
By design igGrid has columns option which contains array of column objects. Every column object has headerText option which sets the column header text. For example:
$(".selector").igGrid({ autoGenerateColumns: false, columns: [ { headerText: "Your header text", key: "Name", dataType: "string" }, ] });
$(".selector").igGrid({
$(
".selector"
).igGrid({
autoGenerateColumns:
false
,
columns: [
{ headerText:
"Your header text"
, key:
"Name"
, dataType:
"string"
},
]
});
If this is not what you are looking for please feel free to get back to me with more clarifications.
Looking forward to hearing from you.
Hello Vasya,
Thanks for your reply.
I would like to know if ignite grid is existing any solution that would help me insert array of headers in middle of others:
var question = [ "A-1", "A-2", "A-3", "B-1", .....];
The question list size would be un-fixed depended on situation. Results that I exepected to have would look like:
Test Id, Test Name, Student Code, Student Name, A-1, A-2, A-3, B-1, ... , Total score.
In KnockoutJs, I could use "for-each binding without a container element" (Reference here) as solution .
Looking for your reply
Thank you for your brief explanation.
Based on your scenario I assume that you do not only want to add only headers but to add new columns based on the varying number of questions. If this is the case the columns collection of the igGrid should be changed based on the questions count. My suggestion in this case is to get reference to the questions variable in order to get the number of columns that should be added in the collection. Afterwards, you could loop trough every value in the questions collection, create column definition (including header, type, width etc.) and add it in the columns' collection. After the collection is ready the grid could be destroyed and created again in order to apply the new columns collection.
I created a small sample illustrating my suggestion for your reference. In my sample I am initially displaying test results for the first semester. When a button is clicked tests for the second semester are loaded in the grid. Since that there are more questions in the second semester test I am creating a new columns collection. For example:
$("#grid").igGrid({ dataSource: data, primaryKey: "ID", width: "100%", defaultColumnWidth : 200, avgRowHeight: 60, autoGenerateColumns: true }); $("#changeColSett").click(function () { $.ajax({ url: '@Url.Action("GetData")' }).success(function (data) { var cols = [], obj, colType; obj = data[0]; for (var key1 in obj) { colType = typeof (data[0][key1]); cols.push({ //set all your requred column settings here headerText: key1, key: key1, width: '200px', dataType: colType }) } $("#grid").igGrid("destroy"); $("#grid").igGrid({ dataSource: data, autoGenerateColumns: false, columns: cols }) }); });
$("#grid").igGrid({ dataSource: data, primaryKey: "ID", width: "100%", defaultColumnWidth : 200, avgRowHeight: 60, autoGenerateColumns: true }); $("#changeColSett").click(function () { $.ajax({ url: '@Url.Action("GetData")' }).success(function (data) { var cols = [], obj, colType; obj = data[0]; for (var key1 in obj) { colType = typeof (data[0][key1]);
cols.push({ //set all your requred column settings here headerText: key1, key: key1, width: '200px', dataType: colType }) } $("#grid").igGrid("destroy"); $("#grid").igGrid({ dataSource: data, autoGenerateColumns: false, columns: cols }) }); });
I am also attaching my sample for your reference.
Please have a look at the provded sampel and let me know if you have any additional questions afterwards.
Please let me know if you have any additional questions regarding this matter.
Thank you for choosing Infragistics components.