The cell is set to red depending on the columnSetting.required property value. Where should this logic be applied?

Can I have a sample specific for this?

Thanks!

hi Erica,

I think I understood now your goal.

Find attached a sample that sets the red class to a cell marked as required in the column settings.

First - create a CSS class with the properties setting the cell in red:

.requiredCell {border: 1px solid red !important;}

The idea is to attach to the cell editing event and modify dynamicly based on that settings the editor class.

editCellStarting: function (e, ui) {
   var colSettings = ui.owner._colSet(null, ui.columnKey);
   if (colSettings && colSettings.required) {
      ui.editor.addClass("requiredCell");
   }
}

I've used for convenience internal function that gets the column settings, but you may write on your own cycle for looping the column settings, if you wish.

Also for convenience I've used your sample from one other post.

Please, let me know if something is still unclear.

Regards

Lyubo

I'm sorry that the sample you provided is not my goal. As mentioned above, the required cell will have the red background color painted upon the grid first loaded.

It means that end-user will see the red colored cell that indicates the field is required visually right after the grid is loaded in Edit mode, without needing physically editing the cell yet. The color will then also apply to the case that when adding a new row to the grid that those required cells alos have the red color shown.

I am attaching a screenshot to show how it looks like.

hi Erica,

I've modified the sample.

It now uses the dataRendering event to attach to each required cell dynamically a template that will paint the cell in red.

This will ensure that the grid has cells in red not only in editing mode. I'm not sure that I understand your request about the "first time",

so you may add another variable and place an IF statement that dataRendering event will add templates in a specific case.

Please let me know if that helps.

Regards

Lyubo

hi Erica,

Did you check the attachment and see how it's working with a checkbox column?

regards

Lyubo

Any updates on this?

I already did the same:

var template = "<div class='requiredCell'>${" + column.key + "}</div>";

column.template = template;

But it displays differently for a checkbox column.

hi Erica,

I'm sorry, I've provided you with a wrong code for the template. It should be looking like this:

col.template = "<div class='requiredCell'>${" + col.key + "}</div>";

Please check the new attachment and let me know if you have any questions.

Regards

Lyubo

Thanks Lyubo. Adding template as suggested works well with a text column. However, color does not show if the column contains a checkbox and a text of "<span style...>" was shown instead.

Please find the attached screenshot for the expected result that I want to achieve from your advice and the current behaviour with your suggested template.

Thanks!