Kendo UI grid Editor field custom validation

Question

I want to use custom validation for my editor textbox. Yes, it can be done by adding required inside textarea input, but I want to create my own custom message. Seem schema > model > validation not working for field editor. Is there a way to do this?

full demo in here

$("#grid").kendoGrid({
  columns: [ {
    field: "fieltext", title:"Field 1", editor: textboxeditor
  } ],
  editable: true,
  scrollable: false,
  dataSource: {
    data: [ { num: 1 }, { num: 2 } ],
    schema: {
      model: {
        fields: {
          fieltext: { type: "number", validation: {required: {message: "This field is required"}} }
        }
      }
    }
  }
});

function textboxeditor(container, options) {
  $('<textarea class="k-textbox" required style="height: 50px; min-height: 80px; width: 60%; margin: 5px 0px 5px 0px; padding: 5px; min-width:80%; max-    width:80%" name="' + options.field + '" />').appendTo(container); 
}

You need a validationMessage on the control to instruct it what its required/validation message should be. demos.telerik.com/kendo-ui/validator/index — Nathaniel Flick

Nathaniel Flick Nathaniel Flick · Accepted Answer · 2019-12-04T02:55:17

Here's the answer, add "validationMessage" to the appendTo call and then click in the field and click out of the field and the validation message shows. Link to the documentation here: https://demos.telerik.com/kendo-ui/validator/index

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script></head>
<body>
  <div id="grid"></div>

<script>
  $("#grid").kendoGrid({
    columns: [ {
      field: "fieldtext", title:"Field 1", editor: textboxeditor
    } ],
    editable: true,
    scrollable: false,
    dataSource: {
      data: [ { num: 1 }, { num: 2 } ],
      schema: {
        model: {
          fields: {
            fieldtext: { type: "number" }
          }
        }
      }
    }
  });

  function textboxeditor(container, options) {
    $('<textarea class="k-textbox" required validationMessage="TEST VALIDATION" style="height: 50px; min-height: 80px; width: 60%; margin: 5px 0px 5px 0px; padding: 5px; min-width:80%; max-width:80%" name="' + options.field + '" />').appendTo(container);
  }
</script>  
</body>
</html>

Kendo UI grid Editor field custom validation

1 Answers