【问题标题】:How can I restrict a number input between 1 to 12 in Kendo Grid Inline Editing如何在 Kendo Grid 内联编辑中将数字输入限制在 1 到 12 之间
【发布时间】:2013-10-22 10:13:05
【问题描述】:

我有一个剑道网格,一列应该是 0 到 12 之间的数字。除了 HourTimeHours 之外,其他一切都正常。我不能将最小值小于 0,但我可以为此设置超过 12。请帮忙。

schema: {
            model: {
                id: "ID",
                fields: {
                    ID: { editable: false },
                    TName: { editable: false },
                    HourTimeHours: { editable: true, type: "number", validation: { required: true, min: 0, max: 12 } },
                    Comment: { editable: true, nullable: true },
                    Reason: { editable: false, nullable: true },
                    ChargeRateText: { defaultValue: { CategoryID: "No Charge", CategoryName: "No Charge" } },
                }
            },

【问题讨论】:

  • 你能告诉我们你的网格创建代码吗?

标签: kendo-ui kendo-grid kendo-asp.net-mvc


【解决方案1】:

您必须在创建网格时为该字段指定一个编辑器。

$("#grid").kendoGrid({
    dataSource: dataSource,
    columns: [
        { field: "HourTimeHours", title: "Hours", editor: hoursDropDownEditor }],
    editable: true
});

如果你想要一个类似剑道数字文本框的东西,你的函数看起来像这样:

function hoursDropDownEditor(container, options) {
    $('<input/>')
        .appendTo(container)
        .kendoNumericTextBox({
            min: 1,
            max: 12,
            step: 1
    });
}

更新:您还可以使用模板,让用户清楚地知道该字段是可编辑的。

http://jsfiddle.net/amomsen/vcpWD/1/

【讨论】:

  • 必须从选项中添加名称字段,例如$('&lt;input name="'+options.field+'"/&gt;'),否则不会发生更新(不会取值)
【解决方案2】:

对于 Kendo UI MVC,您可以限制 Kendo Grid Inline Editing 的长度

    $("body").delegate("#percentage", "keyup", function () { 
        $("#percentage").attr('maxlength', '5');
    });

#percentage 是要编辑的单元格的 ID

columns.Bound(p => p.percentage);

所有网格:

@(Html.Kendo().Grid<Internal.Models.ExchangeRateData>()
    .Name("ExchangeGrid") 
    .Columns(columns =>
    { 
        columns.Bound(p => p.targetCurrency);
        columns.Bound(p => p.percentage);
        columns.Command(commands => { commands.Edit(); }); 
    }) 
    .Editable(edit =>
    {
        edit.Mode(GridEditMode.InLine); 
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Model(model =>
        {
            model.Id(item => item.targetCurrency);  
        }) 
        .Events(events =>
        {
            events.Sync("onSync");
        })
        .Read(read => read.Action("ExchangeRate_Read", "ExchangeRatesFortius").Data("ReadRequestData"))
        .Update(c => c.Action("Currencies_Update", "ExchangeRatesFortius")) 
    )
)

【讨论】:

    【解决方案3】:

    对于 kendo mvc,我可以使用这样的模板进行限制:

     columns.Bound(m => m.Inches)
                    .ClientTemplate("<input type=\"number\" value=#= Inches # min=\"0\" max=\"11\" step=\"1\" ></input>")
                    .Width(60);
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-09-02
      • 1970-01-01
      相关资源
      最近更新 更多