2016-08-30 172 views
0

我有一段html,其中包含一组相当大的输入控件,这些输入控件是从服务器返回的一组JSON数据中动态生成的。Kendo重新绑定下拉列表数据源

HTML控件是根据JSON数据以及与它们关联的项目构建的。

DropDownList的选择项目,采用的属性的约束:

data-bind='source: sourceObject'
data-text-field='optionText'
data-value-field='optionValue'

这是创建输入选择控制的JavaScript:

function CreateSelectList(label, i, name) { 
    var element = '<select data-bind=\'source:reportFormData.FormField[' + i + '].Options.Option\' data-value-field=\'optionValue\' data-text-field=\'optionText\' id=\'' + name + '\' name=\'' + name + '\' data-role=\'dropdownlist\'></select>'; 
    return CreateFormField(label, element); 
} 

问题:我需要选择性地修改数据下拉菜单中的一个。我无法弄清楚如何以编程方式更改数据源。

这不起作用:

var ddlData = $("#ddl_location").data("kendoDropDownList"); 
ddlData.setDataSource(jsonData.Option); 

也没有这样的:

$("#ddl_location").kendoDropDownList({ 
    dataTextField: "optionText", 
    dataValueField: "optionValue", 
    dataSource: jsonData.Option 
}); 

我也尝试调用这些后:

ddlData.trigger("change"); 
ddlData.refresh(); 

jsonData.Option是等效格式到原来的JSON元素Report.FormField[i].Options.Option例如"Option": [ {"optionText": "All", "optionValue": "0"}, ...
这里的区别在于它是需要替换原始数据源的新数据子集。

这里是从全JSON一个摘录用于最初创建控件:

{ 
"Report": { 
    "report_id": "1", 
    "FormField": [{ 
     "description": "End DateTime Picker", 
     "name": "end_date", 
     "label": "End Date", 
     "FieldType": "datepicker", 
     "displayOrder": "2", 
     "isRequired": "1", 
     "requiredFieldValidationMessage": "End Date is required." 
    }, 
    { 
     "description": "Client", 
     "name": "ddl_client", 
     "label": "Client", 
     "FieldType": "dropdownlist", 
     "displayOrder": "3", 
     "isRequired": "0", 
     "Options": { 
      "Option": [{ 
       "optionText": "All", 
       "optionValue": "0" 
      }, 
      { 
       "optionText": "*Airport Business Center", 
       "optionValue": "68955" 
      }, 
      { 
       "optionText": "*Cushman & Wakefield", 
       "optionValue": "68996" 
      }, 
      { 
       "optionText": "*IBMC College ", 
       "optionValue": "68804" 
      } 
      ... 
    } 
+0

貌似'FormField [I] .Options'可并不总是可用。你是否试图用多个列表设置多个DropDownLists? –

+0

@SunnyPatel'i'指的是输入控制编号'i',它可以是一个下拉列表,日期选择器,文本框等。它只有一个'.Options'元素,如果它的类型为'dropdownlist',这个工作正常,表格生成的很好。在表单已经生成之后,我需要修改一个dropdownlist数据源。那有意义吗? –

+0

您是否尝试过将数据包装到DataSource对象中以查看它是否有所作为? ''(“#ddl_location”)。data(“kendoDropDownList”)。setDataSource(new kendo.data.DataSource({data:jsonData.Option}))''。您也可以通过调用'ddlData.trigger(“databound”);'手动触发数据源更新。 –

回答

0

使用读()上的dataSource:

var ddlData = $("#ddl_location").data("kendoDropDownList"); 
ddlData.setDataSource(jsonData.Option); 
ddlData.dataSource.read();