This is a migrated thread and some comments may be shown as answers.

Required Field Indicator in Column Header

3 Answers 241 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Terry
Top achievements
Rank 1
Terry asked on 05 Jul 2018, 05:48 PM

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?

3 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 09 Jul 2018, 10:49 AM
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:



Regards,
Georgi
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Terry
Top achievements
Rank 1
answered on 27 Jul 2018, 05:47 PM

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?

0
Georgi
Telerik team
answered on 30 Jul 2018, 07:19 AM
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:



Regards,
Georgi
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Terry
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Terry
Top achievements
Rank 1
Share this question
or