Edit this page

Change the Validation Message Position

By design, validation messages inside the Grid are tooltips that are displayed over adjacent content.

The following example demonstrates how to change this behavior and display the validation messages at a specific position in the popup edit form of the Grid.

The approach relies on the following milestones:

Example
<style>

  /* increase the popup edit form's width to make space for validator messages */
  .k-edit-form-container {
    width: 500px;
  }

  /* add side padding */
  .k-edit-form-container dl {
    padding: 0 1em;
  }

  /* increase line height in accordance with validator messages' height */
  .k-edit-form-container dd {
    line-height: 3em;
  }

  /* override absolute positioning styles of the validator messages */
  .validator-msg,
  .validator-msg .k-tooltip {
    position: static;
    display: inline-block;
  }

  /* hide validator tooltip callouts */
  .validator-msg .k-tooltip .k-callout {
    display: none;
  }

</style>

<script id="edit-template" type="text/x-kendo-template">
    <dl>
      <dt><label for="ProductName">Product Name</label></dt>
      <dd><input class="k-textbox" data-bind="value:ProductName" name="ProductName" required="required" />
      <div class="validator-msg"><span data-for="ProductName" class="k-invalid-msg"></span></div></dd>

      <dt><label for="UnitPrice">Unit Price</label></dt>
      <dd><input data-role="numerictextbox" data-min="1" data-bind="value:UnitPrice" name="UnitPrice" required="required" />
      <div class="validator-msg"><span data-for="UnitPrice" class="k-invalid-msg"></span></div></dd>
    </dl>
</script>

<div id="grid"></div>

<script>
$(function () {
  var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",
      dataSource = new kendo.data.DataSource({
        transport: {
          read:  {
            url: crudServiceBaseUrl + "/Products",
            dataType: "jsonp"
          },
          update: {
            url: crudServiceBaseUrl + "/Products/Update",
            dataType: "jsonp"
          },
          destroy: {
            url: crudServiceBaseUrl + "/Products/Destroy",
            dataType: "jsonp"
          },
          create: {
            url: crudServiceBaseUrl + "/Products/Create",
            dataType: "jsonp"
          },
          parameterMap: function(options, operation) {
            if (operation !== "read" && options.models) {
              return {models: kendo.stringify(options.models)};
            }
          }
        },
        batch: true,
        pageSize: 5,
        schema: {
          model: {
            id: "ProductID",
            fields: {
              ProductID: { editable: false, nullable: true },
              ProductName: { validation: { required: true } },
              UnitPrice: { type: "number", validation: { required: true, min: 1} },
              Discontinued: { type: "boolean" },
              UnitsInStock: { type: "number", validation: { min: 0, required: true } }
            }
          }
        }
      });

  $("#grid").kendoGrid({
    dataSource: dataSource,
    toolbar: ["create"],
    columns: [{ field:"ProductName", title: "Product Name" },
      { field: "UnitPrice", title:"Unit Price", format: "{0:c}" },
      { command: ["edit", "destroy"], title: "&nbsp;" }],
    editable: {
      mode:"popup",
      template: $("#edit-template").html()
    }
  });
});
</script>

See Also

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy