Hi,
Suppose you have object of the type
var item = [ { "ID": "4711", "A": "0", "B": "yes" } ]
These objects shall be shown in an igGrid. If A==0 the text "yes" shall be shown in red otherwise in green.
For the column showing B I have specified a formatter (a function). But the formatter only gets the value as the parameter not the entire object so there seems to be no chance to evaluate the value of property A of the current rendered object.
Is there any possibility to access the current rendered object in a formatter. A workaround could be to get the key of the object currently rendered (formatted).
Thanks for your help
Michael
Hello Michael,
We will keep your comments in mind and will update the API documentation with the other parameter.
Thank you for choosing Infragistics components.
yes that helps. Please update your documentation, because it is saying that the format function is receiving the value. Only in the example it is showing that also the record is passed.
Format function takes two parameters, val and record. Using record parameter you could access the information for the row. For example:
$("#grid").igGrid({ primaryKey: "ID", autoGenerateColumns: false, columns: [ { headerText: "ID", key: "ID", dataType: "number", formatter: fomratFunc }, { headerText: "Name", key: "Name", dataType: "string" }, { headerText: "Editor Type", key: "EditorType", dataType: "string" } ], dataSource: data, features: [ { name: "Updating", enableAddRow: true, enableDeleteRow: false, editMode: "row" } ] }); function fomratFunc(val, record) { if(record.ID == 1) { //your code here } }
$("#grid").igGrid({ primaryKey: "ID", autoGenerateColumns: false, columns: [ { headerText: "ID", key: "ID", dataType: "number", formatter: fomratFunc }, { headerText: "Name", key: "Name", dataType: "string" }, { headerText: "Editor Type", key: "EditorType", dataType: "string" } ], dataSource: data, features: [ { name: "Updating", enableAddRow: true, enableDeleteRow: false, editMode: "row" } ] }); function fomratFunc(val, record) { if(record.ID == 1) { //your code here }
}
Please test this approach on your side and let me know if you need any further assistance with this matter.
thanks for the reply. Unfortunately the rendering is a bit more complex and cannot be (maintainable) achieved by using a template. That's the reason I want to use a formatter function.
It would be great if the formatter function gets - like many other event functions - the ui information, like ui.rowID, ui.value, ui. .... and maybe the object from the datasource too. That would be a great help.
I have done a workaround: Added a column that is bound to the rowID and added a formatter for that. the formatter is then getting the object from the data source by the value (which is the rowID then) and formatted based on this. But this needs a special handler for editing the cell. But it is a workaround for me now. Please add the above proposal to your list of change requests. That would be great.
Setting styling for column B based on some condition could be accomplished by using Conditional Template. Such a template could be created and set for a column via the template column option of igGrid. In this template you have a reference to all the values for particular row and the cell appearance could be changed based on any of these values. In your scenario, the template could check what is the value of column A and set the font color in column B based on this value. For example:
<!-- creating template --> <script id="colTmpl" type="text/template"> {{if parseInt(${A}) > 0 }} <span style='color:green'>${B}</span></font> {{else}} <span style='color:red'>${B}</span></font> {{/if}} </script> <script> $(function () { var items = [ { "ID": "4711", "A": "0", "B": "yes" }, { "ID": "4712", "A": "1", "B": "yes" }, { "ID": "4713", "A": "0", "B": "yes" } ] $("#grid").igGrid({ columns: [ { headerText: "ID", key: "ID", dataType: "string" }, { headerText: "A", key: "A", dataType: "string" }, { headerText: "B", key: "B", dataType: "string", template: $("#colTmpl" ).html()} ], width: "500px", dataSource: items }); }); </script>
I am also attaching a small sample illustrating my suggestion for your reference.
Please do not hesitate to contact me if you have any additional questions regarding this matter.