Required Field Indicator in Column Header

4 posts, 0 answers
  1. Terry
    Terry avatar
    5 posts
    Member since:
    Dec 2015

    Posted 05 Jul 2018 Link to this post

    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?

  2. Georgi
    Admin
    Georgi avatar
    698 posts

    Posted 09 Jul 2018 Link to this post

    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.
  3. Terry
    Terry avatar
    5 posts
    Member since:
    Dec 2015

    Posted 27 Jul 2018 in reply to Georgi Link to this post

    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?

  4. Georgi
    Admin
    Georgi avatar
    698 posts

    Posted 30 Jul 2018 Link to this post

    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.
Back to Top