CODEWITHSUNDEEP
kendo-grid
Matt Balent
Matt Balent

Reputation: 2407

Limit user input in a cell within a KendoUI grid

I'd like to limit the user input (say 20 character limit) for a specific column in a KendoUI grid control. Here is my code for the grid (and to add a blank row)

$("button").click(function () {
var grid = $("#grid").data("kendoGrid");
grid.dataSource.insert(0, {
    itmExtId: "",
    itmDesc: ""
});
});
$(document).ready(function () {
    $("#grid").kendoGrid({
        groupable: true,
        scrollable: true,
        sortable: true,
        pageable: true,
        columns: [{ title: "Item ID", field: "itmExtId", width: 75 },
                  { title: "Desc", field: "itmDesc", width: 200 }]
        ,
        editable: true,
        toolbar: [{
            template:
            '<a class="k-button k-button-icontext k-grid-add" href="\\#">    <span class="k-icon k-add"></span>New Item</a>  <a class="k-button k-button-icontext" href="\\#">Item List</a>'
    }],
});

Can I limit the input in the fields here without setting up an external datasource?

Upvotes: 2

Views: 2293

Answers (1)

yhabib
yhabib

Reputation: 186

You could do something like this: First define a method inside the kendoGrid for the editing event.

$("#grid").kendoGrid({
    groupable: true,
    scrollable: true,
    sortable: true,
    pageable: true,
    columns: [{ title: "Item ID", field: "itmExtId", width: 75 },
              { title: "Desc", field: "itmDesc", width: 200 }]
    ,
    editable: true,
    edit: onEdit,
    toolbar: [{
        template:
        '<a class="k-button k-button-icontext k-grid-add" href="\\#">    <span class="k-icon k-add"></span>New Item</a>  <a class="k-button k-button-icontext" href="\\#">Item List</a>'
}],});

Then the function:

function onEdit(arg) {
    arg.container.find("input[name='ProductName']").attr('maxlength', '20');
}

This example is from here: Limiting maximum input length of cell

Upvotes: 2

Related Questions