[英]Binding a KendoUI dropdownlist on demand
IF I have a kendo dropdownlist as follows 如果我有一个如下的剑道下拉列表
@(Html.Kendo().DropDownList()
.Name("products")
.DataTextField("ProductName")
.DataValueField("ProductID")
.DataSource(source => {
source.Read(read =>
{
read.Action("GetProducts", "Home");
});
})
)
This loads when my page loads. 这会在我的页面加载时加载。 Is there a way to code it such that it only loads when I invoke it to load via javscript? 有没有办法对它进行编码,只有在我通过javscript调用它时才加载它?
Initialise DataSource on sever side without executing Read. 在服务器端初始化DataSource而不执行Read。 For eg., .DataSource(source => {source.Type = "json"}). 例如,.DataSource(source => {source.Type =“json”})。 On Client side event handler, you can retrieve JSON data using ajax and attach to dropdownlist datasource as : 在客户端事件处理程序上,您可以使用ajax检索JSON数据并附加到dropdownlist数据源,如下所示:
var dataretrieved = <ajax query here>
$("#products").data("kendoDropDownList").dataSource.data(dataretrieved );
Alternatively, 或者,
In server side code do not define datasource. 在服务器端代码中,不定义数据源。 In your client side event handler define the datasource of the dropdownlist. 在客户端事件处理程序中定义下拉列表的数据源。 For eg., 例如,
$("#products").data("kendoDropDownList").dataSource = new kendo.data.DataSource({
type: "json",
data: dataretrieved
});
Note datatype is indicated as part of datasource definition. 注意数据类型表示为数据源定义的一部分。
If you wanted to load data first time when you open the dropdownlist, you can set AutoBind = false
and add an OptionLabel
like this: 如果要在打开下拉列表时第一次加载数据,可以设置AutoBind = false
并添加如下所示的OptionLabel
:
@(Html.Kendo().DropDownList() .Name("products") .DataTextField("ProductName") .DataValueField("ProductID") .OptionLabel(new { ProductID = -1, ProductName= "Select Product"}) .DataSource(source => { source.Read(read => { read.Action("GetProducts", "Home"); }); }) .AutoBind(false) )
You have to be sure to use an option label with id
and name
, otherwise it will not be displayed. 您必须确保使用带有id
和name
的选项标签,否则将不会显示。
Create one JS function and put this code inside in it. 创建一个JS函数并将此代码放入其中。 and call that function when you need. 并在需要时调用该函数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.