Hi,
I am trying to generate kendo ListView with cascading drop downs in it, all the other controls are working ok.
I followed the documentation and other threads in this forum with no luck
The browser not renders EntityTypeId input as drop down list
Also tried to render it in following ways:
layout.entityTypesData
= new
kendo.data.DataSource({
data: @(Html.Raw(Json.Encode(ViewBag.EntityTypes)))
});
<select data-role="dropdownlist" data-text-field="Text" data-value-field="Value" data-source="layout.entityTypesData"></select>
<select data-role="dropdownlist" data-text-field="Text" data-value-field="Value" data-bind="source:layout.entityTypesData,
value: #:EntityTypeId#"></select>
Please assist me in solving this issues
Here is my code:
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<a class="k-button k-button-icontext k-add-button" id="add-quickLink" href="#">
<span class="k-icon k-add"></span>Add new record
</a>
<div id="listView"></div>
@section
scripts
{
<script type="text/x-kendo-tmpl" id="quickLinkEditTemplate">
<div class="quickLink-view k-widget">
<span class="handler"> </span>
<span>
<input type="text" class="k-textbox
entityType" value="#:EntityTypeId#" name="EntityTypeId" id="EntityTypeId#:QuickLinkComponentId#" />
</span>
<span>
<input type="text" class="k-textbox entity" value="#:EntityId#" name="EntityId" id="EntityId#:QuickLinkComponentId#" />
</span>
<span>
<input type="text" class="k-textbox" value="#:Text#" name="Text" />
</span>
<span>
<a class="k-button k-cancel-button" href="\#"><span class="k-icon k-cancel"></span></a>
</span>
</div>
</script>
<script>
$(document).ready(function() {
layout.urls.root = "@Url.Content("~")";
layout.urls.getEntitiesForDropDownUrl = "@Url.Action("GetEntitiesForDropDownAsync")";
layout.entityTypesData = [{ Value: 1, Text: "Article" }, { Value: 2, Text: "Product" }, { Value: 3, Text: "Categories" }];
initListView();
initDropDownLists();
});
var
kendoDropDownOptions = {
autoBind: false,
optionLabel: "Select",
dataTextField: "Text",
dataValueField: "Value",
dataSource: {
type: "json",
serverFiltering: true,
transport: {
read: {
type: "POST",
url: layout.urls.getEntitiesForDropDownUrl,
dataType: "json",
contentType: "application/json"
},
parameterMap: function (data) {
return
JSON.stringify(data);
}
}
}
};
var initDropDownLists =
function() {
$(".quickLink-view").each(function () {
var entityTypeComponent = $(this).find(".entityType");
var entityComponent =
$(this).find(".entity");
entityTypeComponent.kendoDropDownList({
dataTextField: "Text",
dataValueField: "Value",
dataSource: layout.entityTypesData
});
kendoDropDownOptions.cascadeFrom = entityTypeComponent.id;
entityComponent.kendoDropDownList(kendoDropDownOptions).data("kendoDropDownList");
//entityComponent.data('kendoDropDownList').value(layout.header.viewModel.PromotionEntityId);
});
};
var initListView = function() {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
//returns
[{"QuickLinkComponentId":1,"EntityTypeId":1,"EntityId":1,"Text":"test1","SortOrder":0,"ParentId":1},{"QuickLinkComponentId":2,"EntityTypeId":2,"EntityId":1,"Text":"test2","SortOrder":0,"ParentId":1}]
url: layout.urls.root + "QuickLink",
dataType: "json"
},
update: {
url: layout.urls.root + "QuickLink/Update",
dataType: "json",
type: "POST"
},
destroy: {
url: layout.urls.root + "QuickLink/Delete",
dataType: "json",
type: "POST"
},
create: {
url: layout.urls.root + "QuickLink/Create",
dataType: "json",
type: "POST"
},
parameterMap: function(options, operation) {
if (operation != "read") {
var items = {};
$.each(data.models, function(index, item) {
for (var key in item) {
items["[" + index + "]" + "." + key] = item[key];
}
});
return items;
}
}
},
batch: true,
schema: {
model: {
id: "QuickLinkComponentId",
fields: {
QuickLinkComponentId: { editable: false, nullable: true },
}
}
}
});
var listView = $("#listView").kendoListView({
dataSource: dataSource,
template: kendo.template($("#quickLinkEditTemplate").html())
}).data("kendoListView");
$("#add-quickLink").click(function(e) {
listView.add();
e.preventDefault();
});
};
</script>
}
1 Answer, 1 is accepted
Hello Tenen,
I've stripped down the code you've posted here in order to isolate the scenario. The result is visible in the following dojo example - http://dojo.telerik.com/@rusev/oCAWu
Important bits are:
- drop down widgets are initialized on dataBound event as the template will be rendered after the widget is bound
- each `entityComponent` widget cascades from the same row `entityTypeComponent` by setting the following option `cascadeFrom: entityTypeComponent.attr("id")`
- I've also mocked the `entityComponent` configuration as follows:
cascadeFromField: "Type",dataTextField: "Text",
dataValueField: "Value",
dataSource: entityData
Regards,
Nikolay Rusev
Telerik