Limiting maximum input length of cell

7 posts, 0 answers
  1. Madzie
    Madzie avatar
    65 posts
    Member since:
    Apr 2012

    Posted 13 Nov 2013 Link to this post

    Looking for how to specify the maximum length of a column  that user can edit or input !
    Like a column is of type 'number', so limiting the user to enter only 10 num/char
    For column with type 'string' , limiting to enter say 200 chars

    Is it possible with specifying just an attribute ?
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 15 Nov 2013 Link to this post

    Hello Madhuri,

     How to set custom validation rule when using the Grid is covered in this forum post:

    http://www.kendoui.com/forums/kendo-ui-framework/validation/unable-to-get-custom-validation-working-on-a-grid.aspx#BZ4GEv3P00ierYPDpIxB5w

    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Madzie
    Madzie avatar
    65 posts
    Member since:
    Apr 2012

    Posted 15 Nov 2013 Link to this post

    Thanks for this, really helpful but my requirement here is to restrict the user from entering data that exceeds the limit - like the user shouldn't be able to enter the 11th digit in a number field.
  5. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 17 Nov 2013 Link to this post

    Hello,

    Please try with the below code snippet.

    I have set length 10 in ProductName field.
    <div id="grid"></div>
    <script>
        function onGridEditing(arg) {
            arg.container.find("input[name='ProductName']").attr('maxlength', '10');
        }
        $(document).ready(function () {
            var crudServiceBaseUrl = "http://demos.kendoui.com/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: 20,
                    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,
                pageable: true,
                height: 430,
                toolbar: ["create"],
                edit: onGridEditing,
                columns: [
                    "ProductName",
                    { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "100px" },
                    { field: "UnitsInStock", title: "Units In Stock", width: "100px" },
                    { field: "Discontinued", width: "100px" },
                    { command: ["edit", "destroy"], title: " ", width: "172px" }],
                editable: "inline"
            });
        });
    </script>


    Thanks.
    Jayesh Goyani
  6. Madzie
    Madzie avatar
    65 posts
    Member since:
    Apr 2012

    Posted 18 Nov 2013 Link to this post

    Woohoo ! It works :)
    Thanks Jayesh Goyani. You rock !
  7. Michael
    Michael avatar
    26 posts
    Member since:
    Dec 2010

    Posted 28 Aug 2015 Link to this post

    As of today one still needs to use this workaround? I would think that this is a very common thing one wants to achieve, as most text fields in a database are limited in length. Nevertheless, thank you for the solutions.
  8. Scott
    Scott avatar
    6 posts
    Member since:
    May 2015

    Posted 06 Nov 2015 Link to this post

    They really need to add this to the validation object.  This is common on all of our columns on every grid we use. 

    Please get this in the next release!!

Back to Top
Kendo UI is VS 2017 Ready