Question

我有一个kendo网格，它有内联编辑的组合框。当我为组合框添加所需的验证时，它无法正常工作。我已在以下URL中的JS filder中创建了示例。

var products = [
  {
    "ProductID": 1,
    "ProductName": "Chai",
    "Category": {
      "CategoryID": 1,
      "CategoryName": "Beverages"
    },
    "UnitPrice": "18.00"
  }, {
    "ProductID": 2,
    "ProductName": "Chang",
    "Category": {
      "CategoryID": 1,
      "CategoryName": "Beverages"
    },
    "UnitPrice": "19.00"
  }, {
    "ProductID": 3,
    "ProductName": "Aniseed Syrup",
    "CategoryID": 2,
    "Category": {
      "CategoryID": 1,
      "CategoryName": "Beverages"
    },
    "UnitPrice": "10.00"
  }, {
    "ProductID": 4,
    "ProductName": "Chef Anton's Cajun Seasoning",
    "Category": {
      "CategoryID": 2,
      "CategoryName": "Condiments"
    },
    "UnitPrice": "22.00"
  }, {
    "ProductID": 5,
    "ProductName": "Chef Anton's Gumbo Mix",
    "Category": {
      "CategoryID": 2,
      "CategoryName": "Condiments"
    },
    "UnitPrice": "21.35"
  }, {
    "ProductID": 6,
    "ProductName": "Grandma's Boysenberry Spread",
    "Category": {
      "CategoryID": 2,
      "CategoryName": "Condiments"
    },
    "UnitPrice": "25.00"
  }];


var dataSource = new kendo.data.DataSource({
  pageSize: 30,
  data: products,
  batch:true,
  schema: {
    model: {
      id: "ProductID",
      fields: {
        ProductID: {
          editable: false,
          nullable: true
        },
        ProductName: {
          validation: {
            required: true
          }
        },
        Category: {// defaultValue: { CategoryID: 1, CategoryName: "Beverages"} 
        },                               
        UnitPrice: {
          type: "number",
          validation: {
            required: true,
            min: 1
          }
        }
      }
    }
  }
});

$("#grid").kendoGrid({
  dataSource: dataSource,
  navigatable:true,  
  toolbar:["create", "save","cancel"] ,
  columns: [
    "ProductName", 
    {
      field: "Category",
      editor: comboEditor,
      template:  "#=Category.CategoryName#"
    }, 
    {
      field: "UnitPrice",
      format: "{0:c}"
    } 
  ],
  editable: true
});

function comboEditor(container, options) {

  debugger;
  $('<input data-text-field="CategoryName"  required="required" validationMessage="required" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>').appendTo(container).kendoComboBox({
    autoBind: false,  
    dataSource: {
      type: "odata",
      transport: {
        read: "http://demos.kendoui.com/service/Northwind.svc/Categories"
      }
    }
  })
}

是否有任何要添加到验证才能正常工作。

Thanz

Answer 1

使用此

function comboEditor(container, options) {

  $('<input required="required"  name="' + options.field + '"/>').appendTo(container).kendoComboBox({
    autoBind: false,  
    dataSource: {
      type: "odata",
      transport: {
        read: "http://demos.kendoui.com/service/Northwind.svc/Categories"
      }
    }
  });

  $('<span class="k-invalid-msg" data-for="' + options.field + '"></span>').appendTo(container);
}

希望这会对你有所帮助:)。

在剑道网格内的组合框中进行必要的验证

1 个答案: