[Solved] How to set required validation on row in Kendo Grid?

[Jayesh]

In my application, I have a Kendo grid, which is used to obtain the user's data (certification details). The user are provided with a Kendo grid, which have a "Add" button. Clicking on "Add" button, the user will be prompted with pop up to obtain their details.
On clicking "Submit" button, required validation are not firing with grid having no records. User are able to submit the application without entering the required data with grid. How can I force the kendo validation on button click on grid. 

 

<style>body {
  margin: 0;
}

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

td,
th {
  padding: 0;
}

a {
  background-color: transparent;
}

*,
 ::after,
 ::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}

.form-group {
  margin-bottom: 25px;
}

.form-group {
  width: auto !important;
}

.container {
  max-width: 1300px !important;
}


label {
  font-weight: normal;
}

.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  margin-bottom: 20px;
}

.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
  float: left;
}

.col-xs-12 {
  width: 100%;
}

.form-body {
  padding-bottom: 15px;
}


/* @media all and (min-width:768px) */

.col-sm-4 {
  width: 33.33%;
}


/* @media all and (min-width:768px) */

.col-sm-8 {
  width: 66.66%;
}

.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
  margin-bottom: 0px !important;
}


/* @media all and (min-width:992px) */

.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9 {
  float: left;
}


/* @media all and (min-width:992px) */

.col-md-10 {
  width: 83.33%;
}

.no-padding {
  padding: 0;
}

.container,
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}


/* @media all and (min-width:768px) */

.container {
  width: 750px;
}


/* @media all and (min-width:992px) */

.container {
  width: 970px;
}


/* @media all and (min-width:1200px) */

.container {
  width: 1170px;
}

.padding-top10 {
  padding-top: 10px;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.4285;
  color: #333;
  background-color: #fff;
}

body {
  padding-top: 10px;
  padding-bottom: 10px;
  font-family: sans-serif !important;
  font-size: 13px;
  color: #666666;
}

html {
  font-size: 10px;
  -webkit-tap-highlight-color: transparent;
}

label {
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: regular;
}


/* @media all and (min-width:768px) */

.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9 {
  float: left;
}

label.required::after {
  content: "*" !important;
  padding-left: 3px;
  color: red !important;
  left: 10px;
  position: relative;
  margin-left: -10px;
}


/* @media all and (min-width:768px) */

.form-horizontal .control-label {
  padding-top: 7px;
  margin-bottom: 0px;
  text-align: left;
  margin-bottom: 5px;
}


.k-widget,
.k-block,
.k-inline-block,
.k-draghandle {
  border-style: solid;
  border-width: 1px;
  -webkit-appearance: none;
}

.k-block,
.k-widget {
  line-height: normal;
  outline: 0;
}

th,
td {
  text-align: left;
}

a {
  color: #337ab7;
  text-decoration: none;
}

.k-block,
.k-button,
.k-header,
.k-grid-header,
.k-toolbar,
.k-grouping-header,
.k-tooltip,
.k-pager-wrap,
.k-tabstrip-items .k-item,
.k-state-hover.k-link,
.k-textbox,
.k-textbox:hover,
.k-autocomplete,
.k-dropdown-wrap,
.k-picker-wrap,
.k-numeric-wrap,
.k-state-hover.k-autocomplete,
.k-state-hover.k-dropdown-wrap,
.k-state-hover.k-picker-wrap,
.k-state-hover.k-numeric-wrap,
.k-draghandle {
  background-repeat: repeat;
  background-position: 0 center;
}

.k-floatwrap::after,
.k-slider-items::after,
.k-grid-toolbar::after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  height: 0px;
  overflow: hidden;
}

.k-grid-header {
  background-color: #e4e4e4;
  border: 1px solid #e4e4e4;
}

.k-grid-content {
  border-bottom: 1px solid #e4e4e4;
}

table {
  background-color: transparent;
}

.k-grid-header-wrap {
  border: none;
  border: 1px solid #e4e4e4;
}

.k-header,
.k-grid-header,
.k-toolbar,
.k-dropdown-wrap,
.k-picker-wrap,
.k-numeric-wrap,
.k-grouping-header,
.k-pager-wrap,
.k-textbox,
.k-button,
.k-progressbar,
.k-draghandle,
.k-autocomplete,
.k-state-highlight,
.k-tabstrip-items .k-item,
.k-panelbar .k-tabstrip-items .k-item,
.km-pane-wrapper>.km-pane>.km-view>.km-content {
  background-image: none;
  background-position: 50% 50%;
  background-color: #eeeeee;
}

.k-block,
.k-header,
.k-grid-header,
.k-toolbar,
.k-grouping-header,
.k-pager-wrap,
.k-button,
.k-draghandle,
.k-treemap-tile,
html .km-pane-wrapper .k-header {
  background-color: #eeeeee;
}

.k-header,
.k-grid-header-wrap,
.k-grid .k-grouping-header,
.k-grid-header,
.k-pager-wrap,
.k-pager-wrap .k-textbox,
.k-pager-wrap .k-link,
.k-grouping-header .k-group-indicator,
.k-gantt-toolbar .k-state-default {
  border-color: #c5c5c5;
}

.k-link {
  cursor: pointer;
  outline: 0;
  text-decoration: none;
}

.k-button,
.k-textbox,
.k-autocomplete,
div.k-window-content,
.k-tabstrip>.k-content>.km-scroll-container,
.k-block,
.k-edit-cell .k-widget,
.k-grid-edit-row .k-widget,
.k-grid-edit-row .text-box,
.km-actionsheet>li,
.km-shim {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.k-icon,
.k-tool-icon,
.k-grouping-dropclue,
.k-drop-hint,
.k-column-menu .k-sprite,
.k-grid-mobile .k-resize-handle-inner::before,
.k-grid-mobile .k-resize-handle-inner::after,
.k-pager-numbers .k-current-page .k-link::after,
.k-scheduler-toolbar>ul.k-scheduler-views>li.k-current-view>.k-link::after {
  background-image: url('Bootstrap/sprite.png');
  border-color: transparent;
}

.k-animation-container,
.k-widget,
.k-widget *,
.k-animation-container *,
.k-widget *::before,
.k-animation-container *::after,
.k-block .k-header,
.k-list-container {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.k-widget,
.k-widget * {
  -moz-background-clip: border-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}

.k-button-icontext {
  overflow: visible;
}

a.k-button {
  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
}

.k-i-plus,
.k-add {
  background-position: -32px -64px;
}

.k-grid,
.k-listview {
  position: relative;
  zoom: 1;
}

.k-block,
.k-widget,
.k-grid,
.k-slider,
.k-splitter,
.k-treeview,
.k-panelbar,
.k-content,
.k-header-column-menu {
  outline: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.k-block,
.k-widget {
  background-color: #ffffff;
}

.k-grouping-header,
.k-grid-toolbar {
  margin: 0;
  padding: .22em .2em .28em;
  cursor: default;
}

.k-grid-header-wrap,
.k-grid-footer-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-style: solid;
  border-width: 0 1px 0 0;
  zoom: 1;
}

.k-block,
.k-widget,
.k-input,
.k-textbox,
.k-group,
.k-content,
.k-header,
.k-filter-row>th,
.k-editable-area,
.k-separator,
.k-colorpicker .k-i-arrow-s,
.k-textbox>input,
.k-autocomplete,
.k-dropdown-wrap,
.k-toolbar,
.k-group-footer td,
.k-grid-footer,
.k-footer-template td,
.k-state-default,
.k-state-default .k-select,
.k-state-disabled,
.k-grid-header,
.k-grid-header-wrap,
.k-grid-header-locked,
.k-grid-footer-locked,
.k-grid-content-locked,
.k-grid td,
.k-grid td.k-state-selected,
.k-grid-footer-wrap,
.k-pager-wrap,
.k-pager-wrap .k-link,
.k-pager-refresh,
.k-grouping-header,
.k-grouping-header .k-group-indicator,
.k-panelbar>.k-item>.k-link,
.k-panel>.k-item>.k-link,
.k-panelbar .k-panel,
.k-panelbar .k-content,
.k-treemap-tile,
.k-calendar th,
.k-slider-track,
.k-splitbar,
.k-dropzone-active,
.k-tiles,
.k-toolbar,
.k-tooltip,
.k-button-group .k-tool,
.k-upload-files {
  border-color: #c5c5c5;
}

.k-block,
.k-widget,
.k-popup,
.k-content,
.k-toolbar,
.k-dropdown .k-input {
  color: #333333;
}

.k-button {
  color: #333333;
  border-color: #c5c5c5;
  background-color: #ffffff;
}

.k-widget,
.k-button {
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.2), 0px 1px 2px rgba(0, 0, 0, 0.05);
}

.k-grid,
.k-scheduler,
.k-menu,
.k-editor {
  border-radius: 2px;
}

.k-grid {
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.k-floatwrap,
.k-slider-items,
.k-grid-toolbar {
  display: inline-block;
}

.k-floatwrap,
.k-slider-items,
.k-grid-toolbar {
  display: block;
}

.k-grid-toolbar {
  border-style: solid;
  border-width: 1px 0 0;
}

.k-link:link,
.k-link:visited,
.k-state-hover.k-nav-current .k-link {
  color: #428bca;
}

.k-header,
.k-treemap-title,
.k-grid-header .k-header>.k-link {
  color: #333333;
}

.k-button,
.k-textbox,
.k-timepicker,
.k-datepicker,
.k-datetimepicker {
  display: inline-block;
  vertical-align: middle;
}

.k-grid-toolbar {
  background-color: transparent;
  border: none;
}

 :first-child.k-grid-toolbar,
.k-grouping-header+.k-grid-toolbar {
  border-width: 0 0 1px;
}

.k-grid>.k-grouping-header,
 :first-child.k-grid-header,
 :first-child.k-grid-toolbar,
.k-scheduler> :first-child.k-scheduler-toolbar {
  border-radius: 1px 1px 0 0;
}

div.k-grid-header,
div.k-grid-footer {
  padding-right: 17px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  zoom: 1;
}

.k-grid-content {
  position: relative;
  width: 100%;
  overflow: auto;
  overflow-x: auto;
  overflow-y: scroll;
  zoom: 1;
  min-height: 0px;
}

.k-grid-content-locked,
.k-grid-content,
.k-pager-wrap {
  white-space: normal;
}

.k-grid table {
  width: 100%;
  margin: 0;
  max-width: none;
  border-collapse: separate;
  border-spacing: 0;
  empty-cells: show;
  border-width: 0;
  outline: 0;
}

.k-grid-header-wrap>table,
.k-grid-header-locked>table {
  margin-bottom: -1px;
}

.k-grid-header table,
.k-grid-content table,
.k-grid-footer table,
.k-grid-content-locked>table {
  table-layout: fixed;
}

.k-grid-header th.k-header,
.k-filter-row th {
  overflow: hidden;
  border-style: solid;
  border-width: 0 0 1px 1px;
  padding: .5em .6em .4em .6em;
  font-weight: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
}

.k-grid-header th.k-header {
  vertical-align: bottom;
}

.k-grid-header .k-header,
.k-grid-header th.k-header {
  border: 1px solid #e4e4e4;
  color: #333333;
  background-color: #e4e4e4;
}

.k-grid .k-grid-header .k-header {
  white-space: normal;
}

.k-grid-header th:first-child.k-header,
.k-grid tbody td:first-child,
.k-grid tfoot td:first-child,
.k-filter-row>th:first-child {
  border-left-width: 0px;
}

.k-block,
.k-slider,
.k-splitbar,
.k-calendar,
.k-treeview,
.k-pager-wrap,
.k-grid-header .k-link,
.k-header-column-menu {
  -webkit-touch-callout: none;
}

.k-grid-header .k-link:link,
.k-grid-header .k-link:visited,
.k-grid-header .k-state-hover.k-nav-current .k-link,
.k-grouping-header .k-link {
  color: #333333;
}

.k-grid-header th.k-header>.k-link {
  display: block;
  min-height: 18px;
  line-height: 18px;
  margin: -0.5em -0.6em -0.4em -0.6em;
  padding: .5em .6em .4em .6em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.k-grid .k-grid-header .k-header .k-link {
  height: auto;
}

.k-textbox>input,
[type='text'].k-input,
[type='number'].k-input,
.k-textbox,
.k-picker-wrap .k-input,
.k-button {
  font-size: 100%;
  font-family: inherit;
  border-style: solid;
  border-width: 1px;
  -webkit-appearance: none;
}

.k-button {
  display: inline-block;
  margin: 0;
  padding: 2px 7px 2px;
  font-family: inherit;
  line-height: 1.72em;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}

.k-block,
.k-button,
.k-textbox,
.k-drag-clue,
.k-touch-scrollbar,
.k-window,
.k-window-titleless .k-window-content,
.k-window-action,
.k-inline-block,
.k-grid .k-filter-options,
.k-grouping-header .k-group-indicator,
.k-autocomplete,
.k-multiselect,
.k-combobox,
.k-dropdown,
.k-dropdown-wrap,
.k-datepicker,
.k-timepicker,
.k-colorpicker,
.k-datetimepicker,
.k-notification,
.k-numerictextbox,
.k-picker-wrap,
.k-numeric-wrap,
.k-colorpicker,
.k-list-container,
.k-calendar-container,
.k-calendar td,
.k-calendar .k-link,
.k-treeview .k-in,
.k-editor-inline,
.k-tooltip,
.k-tile,
.k-slider-track,
.k-slider-selection,
.k-upload {
  border-radius: 2px;
}

.k-button {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.k-grid-add {
  color: #336699;
}

.k-grid-toolbar .k-button {
  vertical-align: middle;
}

.k-grid .k-button {
  margin: 0 .16em;
}

.k-grid .k-button {
  border-color: transparent !important;
  background-color: transparent !important;
}

.k-icon,
.k-sprite,
.k-button-group .k-tool-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  overflow: hidden;
  background-repeat: no-repeat;
  font-size: 0px;
  line-height: 0;
  text-align: center;
  -ms-high-contrast-adjust: none;
}

.k-icon,
.k-sprite {
  background-color: transparent;
}

.k-icon,
.k-state-disabled .k-icon,
.k-column-menu .k-sprite,
.k-pager-numbers .k-current-page .k-link::after,
.k-scheduler-toolbar>ul.k-scheduler-views>li.k-current-view>.k-link::after {
  opacity: 1;
}

.k-button-icontext .k-icon,
.k-button-icontext .k-image {
  margin-right: 3px;
  margin-right: 0.3rem;
  margin-left: -3px;
  margin-left: -0.3rem;
}

 :root *>.k-icon,
 :root *>.k-sprite,
 :root *>.k-button-group .k-tool-icon {
  vertical-align: middle;
}

.k-button-icontext.k-button .k-icon,
.k-button-icontext.k-button .k-image {
  vertical-align: text-top;
}

</style>
<html>
<div class="row question form-group">
  <label class="col-sm-4 control-label required" for="ans">
                                                                TEST LABEL
                                                            </label>
  <div class="col-sm-8">
    <div class="k-grid k-widget k-valid" data-role="grid" data-grid-source="CertificationDetails" data-grid-id="ace1fa8c-d7ee-446a-96b0-d120a3a6415c" data-validate="true" required="required">
      <div class="k-header k-grid-toolbar">
        <a class="k-button k-button-icontext k-grid-add" href="#">
          <span class="k-icon k-add">
                                                                            </span>Add
        </a>
      </div>
      <div class="k-grid-header" style="padding-right: 17px;">
        <div class="k-grid-header-wrap">
          <table role="grid">
            <colgroup>
              <col>
              <col>
            </colgroup>
            <thead role="rowgroup">
              <tr role="row">
                <th class="k-header" id="e2bf1a9c-a57b-4362-970b-9128426f5c37" role="columnheader" rowspan="1" data-role="columnsorter" data-index="0" data-title="Certification Details" data-field="CertificationDetails">
                  <a class="k-link" href="#">Educational institution</a>
                </th>
                <th class="k-header" id="e6b0db25-287c-4e7e-b7d7-bc024674465b" rowspan="1" data-index="1">
                </th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
      <div class="k-grid-content">
        <table class="k-selectable" role="grid" style="-ms-touch-action: double-tap-zoom pinch-zoom;" data-role="selectable">
          <colgroup>
            <col>
            <col>
          </colgroup>
          <tbody role="rowgroup"></tbody>
        </table>
      </div>
    </div>
  </div>
</div>
</html>

I want to force user to add data to grid before submit. Please help.

[Angel Petrov]

Hello,

I am not sure how are you initializing the grid but you can try the approach from this demo. The idea is to  set validation rules inside the model. If you check the online example you will see that three fields have validation and the popup can not be close by clicking Update unless the validation passes.

Regards,
Angel Petrov
Telerik by Progress

[Jayesh]

Hello,

Thank you for the reply. 
May be my question was not clear, my requirement was to create a custom validation rule which will notify User with a validation message against the Grid , if they are trying to submit the form without entering any record to the grid. 

 

• I am having multiple grids in form. On form load, these grid will be empty , i.e. its just shows the header and "Add" button.
• User will be able to enter data to grid by clicking "Add" button, which prompt users with a popup.
• I am using template to generate the popup.
• Validation is working fine inside the popup.
• The issue is when user tries to submit a form without entering any value. The user is not prompted with any validation error or message and user are able to submit the form without entering value to required grid.
• I am using the "validate" function of kendo validator to check the validation. (shown in dojo)

Grid with pop up

 

I have created a sample application in dojo (Shared above). There on submit, you can see the validation message been raised (orange box) near the radio button control, but not against the grid control. 

Also sharing you the thread on same which I have opened with telerik forum. There you may see "gif" attachment showing the issue in live website.

https://www.telerik.com/account/support-tickets/view-ticket?threadid=1110553

 

Looking forward to receive more guidance and insight from you.

Thanks in advance,
Regards,
Jayesh Jayakumar

[Angel Petrov]

Hello,

Thank you for clarifying. In order to achieve the desired goal you can add custom validation rules as shown in this demo. As you can see, JavaScript function can be attached which to validate the form before submitting it. In your case you can check whether the grid has records added and other validation requirements that you might have pass validation.

Regards,
Angel Petrov
Progress Telerik