Required Field Indicator in Column Header

[Terry]

I have a grid that uses inline editing, with several of the columns containing required data.  When in add/edit mode, I need to add an asterisk to the column header label of each "required" field.  I know that the required fields are set properly, as I get a required validation error when leaving these fields blank during either an add or update.

I've looked through the documentation for datasource and datesource.data objects, but no luck.  Where can I locate the required property for each column/field in the grid data?

[Georgi]

Hello Terry,

A possible solution is to add the asterisk to the header of the column within the edit event handler and then remove them when the save event is triggered.

e.g.

edit: function(e){

  var grid = this;
  e.container.find('td').each(function (_, x) {
    var cell = $(x);
    var input = cell.find('input[name]');

    if (!cell.hasClass('k-command-cell') && input.attr('required')) {
      var headerCell = grid.thead.find('th:eq('+cell.index()+')')
      headerCell.append($('<span class="asterisk"></span>'))
    }
  })

},
save:function(){
  $('.asterisk').remove();
}

Below you will find a small sample which demonstrates the above approach:

• https://dojo.telerik.com/elEFitOv

Regards,
Georgi
Progress Telerik

[Terry]

This worked out very well for me.  Thanks!

Now I am being asked to do something similar for a gird that uses inCell editing, except that this time, the client want the required icon to be displayed at the time the gird is initiated.  This means that the inputs are not available until an editable cell is clicked.  How can I retrieve the required fields in this scenario?

[Georgi]

Hi Terry,

A possible solution is to set the asterisk within the dataBound event handler and retrieve the required fields through the model configuration.

e.g.

dataBound: function(e){
$('.asterisk').remove();
  var grid = this;
  grid.thead.find('th').each(function (_, x) {
    var cell = $(x);

    if (cell.attr('data-field') &&
        grid.dataSource.options.schema.model.fields[cell.attr('data-field')].validation.required) {
      cell.append($('<span class="asterisk"></span>'))
    }
  })

}

Below you will find a modified version of the sample from previous message:

• http://dojo.telerik.com/aSIKaXUD

Regards,
Georgi
Progress Telerik