Hi all,
I need to make columnCssClass dynamic by a function with 2 parameters:
So, Can I get 2 parameters above?
Thanks,
Hello Quoc Tu,
In order to better understand your question, could you share with us a screen shot which shows what you want to do?
Thanks for your reply,
I want a function like my screenshot below:
$("#grid").igGrid({ dataSource: data2, primaryKey: "ID", autoCommit : true, autoGenerateColumns: true, renderCheckboxes : true, columns: [ { key: "ID", headerText: "ID", width: "20px", dataType: "string", columnCssClass: setBackgroudIro1(record, columnsetting) } ], features:[ { name: "Updating", enableAddRow: true, editMode: "row", enableDeleteRow: true } ] }); function setBackgroudIro1(item, column) { if (item.name == null) { if ((column.dataType == null) || (column.dataType != "number")) { switch (column.key) { case 'key1': return 'cssclassA'; case 'key2': return 'cssclassB'; } } } }
Can I do it?
Considering your code look like referring data item's name value, I guess that you would like to change each cell's style depending on the data bound to that record, is this correct?
If it is the case, you would have to use template instead of columnCssClass:
columns: [ { headerText: "<some_text>", key: "key1", dataType: "string", // https://jp.igniteui.com/help/igtemplating-overview // https://jp.igniteui.com/help/api/2019.1/ui.iggrid#options:columns.template template: "<td {{if ${name} === null}} class='cssclassA' {{/if}}>${key1}</td>" }, { headerText: "<some_text>", key: "key2", dataType: "date", template: "<td {{if ${name} === null}} class='cssclassB' {{/if}}>${key2}</td>" }, // ... and so on ]
Could you give it a try?
I want to get some parameters and return a class name.
Can I call a function in template property?
Help me!
You're welcome.
I'm glad to hear that.
It worked good and it helped me a lot.
Thanks for your assistance.
I'm afraid that there is not an exact functionality you want.The columnCssClass option is applied to the whole column, so you can't assign different css classes to cells in a single column.In the template option, you can call a JavaScript function and you can pass ordinary parameters, but you can't pass parameters such as data item and ${name}.
If it is necessary for you to call a Javascript function which assigns css classes to each cell depending on data item and column settings, you might want to use rowsRendered event instead. In its event handler, you would get a reference to the igGrid object. And then, you would get row's TR elements and information, cell's TD elements and information and data record bound to each row. You would be able to assign css class to each TD element, depemending on such information:
$("#grid1").igGrid({ // ... some other settings ... // https://www.igniteui.com/help/api/2019.1/ui.iggrid#events:rowsRendered rowsRendered: function(evt, ui){ // https://www.igniteui.com/help/api/2019.1/ui.iggrid#methods:rows var rowTrs = ui.owner.rows(); $.each(rowTrs, function (index, item) { if(item !== undefined && item !== null){ // https://www.igniteui.com/help/api/2019.1/ui.iggrid#methods:getElementInfo var elementInfo = ui.owner.getElementInfo(item); if(elementInfo !== undefined && elementInfo !== null){ // https://www.igniteui.com/help/api/2019.1/ui.iggrid#methods:findRecordByKey var record = ui.owner.findRecordByKey(elementInfo.rowId); if(record !== undefined && record !== null){ $(item).find("td").each(function (index, tdElement) { var cellElementInfo = ui.owner.getElementInfo(tdElement); console.log("rowId=" + cellElementInfo.rowId + ", rowIndex=" + cellElementInfo.rowIndex + ", recordIndex=" + cellElementInfo.recordIndex + ", column.dataType=" + cellElementInfo.column.dataType + ", column.columnKey=" + cellElementInfo.column.key); // Add a css class to TD element, depending on the above information $(tdElement).addClass("myStyle"); }); } } } }); } });
I hope this will help.