2013-08-08 4 views
0

I 인라인 편집시 콤보 상자가있는 검도 그리드가 있습니다. 콤보 상자에 필요한 유효성 검사를 추가하면 작동하지 않습니다. 다음 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

답변

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

희망이 당신을 도울 것입니다 :)