I'm using Angular slickgrid and I want to change the cell color if the value is present in that cell.
Note: I want the color only for the cell not the whole row.
Is there any best way to iterate over all the cells and set the color or any equivalent solution?
I have a requirement to show the different cell colors depending on the data. Red color if the data is coming from the server and not changed (not dirty). If the data is edited or added new row (dirty), the cell color would be blue. I have updated the question.
function renderCellWithColor(cellNode, row, dataContext, colDef) {
if (dataContext[colDef.field] != ""){
$(cellNode).addClass("requiredClass"))
}
}
I'm using this function using enableAsyncPostRender. This does not work if I edit or add new row.
Use the option cssClass on the column definition or use a Custom Formatter returning an object following the FormatterResultObject, see Wikis Custom Formatter - FormatterResultObject - Wiki and sample - Wiki, the FormatterResultObject has the advantage of applying the CSS class to the cell container via the property addClasses and using the formatter object is the only way to get access to the cell container.
Related
I am new to Kendo world. And I need a help regarding the Kendo spreadsheet k-right class that's applied on the columns of spreadsheet.In my spreadsheet I have multiple tabs.each tabs can have different number of columns.But the last column is what I need as I need to bind a drop-down to the every row of that column for data selection. In my code I am using the class named k-spreadsheet-active-cell and k-right to identify the rightmost column position. But it's coming as undefined as k-right class is not getting applied. It's working fine for the tab which has max columns..for the lesser ones it's not getting applied.
Trying to read over Kendo site ,not getting any relevant info. Any help is hugely appreciated. Thanks.
You can handle the selectSheet event (documentation) to get the active spreadsheet when it changes.
You can then get the spreadsheet's column definitions by calling the toJSON method (documentation).
Finally you can get the last column definition by using some JavaScript (or jQuery) magic.
Here's an example that you can use when initializing the spreadsheet component:
selectSheet: function(arg) {
var json = arg.sheet.toJSON();
if (json.columns) {
var lastColumn = json.columns[json.columns.length - 1];
// do whatever it is you need to do with the lastColumn variable
}
}
In kendo tree list, how to change the color of entire child row depending on certain data value?
I tried the method mentioned here: How to change color of row depending on a row's value in a Kendo UI Grid
it does not work, any other solution?
Thanks in advance.
You can iterate through rows in dataBound event and set classes or whatever you want there.
Example
I am looking to create a bunch of filters on a Kendo Grid but these filters are for hidden columns.
I want to display the filter (perhaps moving it outside the grid area with jQuery) but keep the entire column hidden.
Any suggestions?
Use the dataSource.filter method for that implementation.
$('#GridName').data().kendoGrid.dataSource.filter({field:"hiddenColumnName",operator:"gt",value:42});
If for some reason you want to extract these filter descriptors from the Grid you can use the filter method without parameters. An object will be returned which will contain how exactly the Grid is filtered.
Please notice that this approach does not even require to have the columns hidden (you can skip declaring them at all). The whole objects (with all fields) are available by default on the client.
Is there a way to update formatter on a single cell of a column dynamically. I'm able to change the formatter for the entire column using
$(jQuery('#grid').jqGrid('setColProp', 'colName', {formatter: ''})).trigger('reloadGrid')
However when I use code below the grid refreshes but with no changes.
$(jQuery('#grid').jqGrid('setCell', j, 'colName', '','',{formatter: ''})).trigger('reloadGrid')
No, the formatter is for the whole column, not a single cell. If you need this level of granularity, you will need to use a custom formatter function with logic that can somehow detect that you are in that particular cell - such as by using the row object to get the row ID.
I want to set the JQGRID row bgcolor depends upon the condition? How to do it? Im using php.
Thanks in advance,
look at jqGrid Coloring an entire line in Grid based upon a cells value. You should examine current row values after data loading (inside of loadComplete for example). For the elements where you want change the background-color you should remove 'ui-widget-content' css class and then add another class which defines the color which you want.