I am trying to do an application in which I have three related listviews. The second listview is charged in dependency of the item selected in the first one, and the third depends on the second one. When I select an item I need to pass the controller, the id of this item not its text. It works perfectly in the first listview but reaches an error in the second one.
I copy here my view:
@model PruebaTelerik.Models.CompanyGroupModel
<script type="text/x-kendo-tmpl" id="ListViewTemplate">
<option value="#:Id#">#:Description#</option>
</script>
<script>
function onChange(args) {
var dbConnObj = $("#ListAgrupaciones").data("kendoListView");
var index = dbConnObj.select().index();
var dataItem = dbConnObj.dataSource.view()[index];
var _id = dataItem.Id;
cargarDatos('Companies/LoadCompanies', "#ListCompanies", _id);
}
function cargarDatos(urlEspecifica, listaModificar, _id) {
$.ajax({
url: urlEspecifica,
type: 'POST',
contentType: 'application/json',
dataType: 'json',
data: JSON.stringify({ nombre: _id }),
success: function (nombre) {
$(listaModificar).kendoListView({
dataSource: nombre,
template: kendo.template($("#ListViewTemplate").html())
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Error: " + XMLHttpRequest.responseText);
}
});
}
function onChangeCompanies(arg) {
debugger;
var objeto = $("#ListCompanies").data("kendoListView");
debugger;
var indice = objeto.select().index();
debugger;
var item = objeto.dataSource.view()[indice];
debugger;
var _id = item.Id;
debugger;
alert(_id);
cargarDatos('Companies/LoadProducts', "#ListProducts", _id);
}
</script>
The controller has this methods:
[HttpPost]
public ActionResult LoadCompanies(string nombre)
{
int ID = -1;
int dummy;
if (Int32.TryParse(nombre, out dummy))
{
ID = dummy;
}
if (ID == 1)
{
nombre = "agrupación1";
}
if (ID == 2)
{
nombre = "agrupación2";
}
SelectListModel selectList;
List<SelectListModel> listAgrupaciones = new List<SelectListModel>();
selectList = new SelectListModel() { Id = 3, Description = nombre + " 1" };
listAgrupaciones.Add(selectList);
selectList = new SelectListModel() { Id = 4, Description = nombre + " 2" };
listAgrupaciones.Add(selectList);
return Json(listAgrupaciones, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public ActionResult LoadProducts(string nombre)
{
int ID = -1;
int dummy;
if (Int32.TryParse(nombre, out dummy))
{
ID = dummy;
}
if (ID == 1)
{
nombre = "compañía1";
}
if (ID == 2)
{
nombre = "compañía2";
}
SelectListModel selectList;
List<SelectListModel> listAgrupaciones = new List<SelectListModel>();
selectList = new SelectListModel() { Id = 1, Description = nombre + " 1" };
listAgrupaciones.Add(selectList);
selectList = new SelectListModel() { Id = 2, Description = nombre + " 2" };
listAgrupaciones.Add(selectList);
return Json(listAgrupaciones, JsonRequestBehavior.AllowGet);
}
Could anyone help me? Thanks a lot.
</script>
<article class="col-lg-12 col-md-12">
<span class="moduleTitle">
<span class="titleBox">Compañías</span>
</span>
<div class="articleContent selectMultiple">
<div class="formRow">
<div class="formItem multiple">
<label>Agrupación: </label>
@Html.Kendo().ListView(Model.CompanyGroups).Name("ListAgrupaciones").TagName("select multiple").ClientTemplateId("ListViewTemplate").BindTo(Model.CompanyGroups).Selectable(selectable => selectable.Enabled(true)).Events(events => events.Change("onChange"))
</div>
<div class="formItem multiple">
<label>Compañía: </label>
@*<select multiple>
<option>Compañía 1</option>
<option>Compañía 2</option>
<option>Compañía 3</option>
</select>*@
@Html.Kendo().ListView(Model.Companies).Name("ListCompanies").TagName("select multiple companies").ClientTemplateId("ListViewTemplate").Selectable(selectable => selectable.Mode(ListViewSelectionMode.Single).Enabled(true)).Events(events => events.Change("onChangeCompanies"))
</div>
<div class="formItem multiple ">
<label>Procedencia: </label>
@*<select multiple>
<option>Procedencia 1</option>
<option>Procedencia 2</option>
<option>Procedencia 3</option>
</select>*@
@Html.Kendo().ListView(Model.Products).Name("ListProducts").TagName("select multiple products").ClientTemplateId("ListViewTemplate").Selectable(selectable => selectable.Mode(ListViewSelectionMode.Single).Enabled(true))
</div>
</div>
</div>
</article>