Problem at accesing the ID of the selected item of the second listview.

3 posts, 0 answers
  1. Azahara
    Azahara avatar
    2 posts
    Member since:
    May 2015

    Posted 07 May 2015 Link to this post

    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>

  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 11 May 2015 Link to this post

    Hello,

    The problem will occur because you are initializing a new listview in the success handler:
    success: function (nombre) {
        $(listaModificar).kendoListView({
            dataSource: nombre,
            template: kendo.template($("#ListViewTemplate").html())
        });
    },
    that does not have selection enabled. You could set the data to the existing widget that is initialized with the MVC wrapper in order to avoid the problem:
    success: function (nombre) {
        $(listaModificar).data("kendoListView").dataSource.data(nombre);
    },

    If you need to reinitialize the widget then you should first destroy the already existing instance and then enable the selection for the new instance.

    Also, note that the used tag names are invalid. You should set just "select" for the tag name and set any attributes via the HtmlAttributes method:
    .TagName("select").HtmlAttributes(new { multiple = true })



    Regards,
    Daniel
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Azahara
    Azahara avatar
    2 posts
    Member since:
    May 2015

    Posted 11 May 2015 in reply to Daniel Link to this post

    Thanks a lot! Now it works!
Back to Top