New to Kendo UI for jQuery? Download free 30-day trial

Change Validation Message Position

Environment

Product Progress® Kendo UI® Grid for jQuery
Operating System Windows 10 64bit
Preferred Language JavaScript

Description

How can I change the validation message position in a popup edit form when working with the Kendo UI Grid?

Solution

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:

<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;
  }

  .k-popup-edit-form .k-input{
    width: 50%
  }
</style>

<script id="edit-template" type="text/x-kendo-template">
    <dl>
      <dt><label for="ProductName">Product Name</label></dt>
      <dd><input class="k-input k-textbox k-input-solid k-input-md k-rounded-md" 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

In this article