Dropdownlist with cascade and filter

4 posts, 0 answers
  1. Xavier
    Xavier avatar
    28 posts
    Member since:
    Dec 2010

    Posted 02 Apr 2015 Link to this post

    Hello,



    We have a grid with two fields, each field has assigned a dropdownlist. The second dropdownlist has a behavior different, this dropdowonlist has enabled option
    cascade and filtre with contains value. The question is, is it possible?

     

    I show you the scenario:  


    Code Grid

    @(Html.Kendo().Grid<FareDetailViewModel>()
                                .Name("fare_details#=FareID#")
                                .ToolBar(t =>
                                {
                                    if (User.IsInRole("Modify"))
                                    {
                                        t.Create().Text("Afegir Referencia");
                                    }
                                })
                                .Columns(columns =>
                                {
                                    columns.ForeignKey(f => f.Tipus, (System.Collections.IEnumerable)ViewBag.CatalogTypes, "Key", "Value").EditorTemplateName("CustomGridForeignKeyFareType").Width(120);
                                    //columns.ForeignKey(f => f.CatalogReference, (System.Collections.IEnumerable)ViewBag.Cataleg, "Reference", "Descripcio").EditorTemplateName("CatalegReferenceByType");
                                    columns.Bound(f => f.CatalogReference).EditorTemplateName("CatalegReferenceByType").EditorViewData(new { gridid = "fare_details#=FareID#" });
    Editor Template
    @model object
     
    @(Html.Kendo().DropDownList()
        .Name("CatalogReference" + ViewData["gridid"])
        .HtmlAttributes(new { data_bind = "value:CatalogReference" })
        .AutoBind(false)
        .OptionLabel("Select reference...")
        .DataTextField("Descripcio")
        .DataValueField("Reference")
        .Filter(FilterType.Contains)
        .MinLength(3)
        .ValuePrimitive(true)
        //.HtmlAttributes(new { data_skip = "true", data_bind = "defferedValue: object" })
        //.BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
        .DataSource(source =>
        {
            source.Read(read => read.Action("PopulateReferences", "Catalog").Data("filterTypes"))
                .ServerFiltering(true);
        })
        .CascadeFrom("Tipus")
        .HtmlAttributes(new { id = Guid.NewGuid().ToString() })
    )
    Function filterTypes
    function filterTypes() {
                return {
                    text: $("#Type").data("kendoDropDownList").value() + "|" + $("#CatalogReference" + temporalFare).data("kendoDropDownList").filterInput.val()
                };
            

    Clarification: 

    1) temporalFare the value maybe be for example fare_details26

    2) $("#CatalogReference" + temporalFare).data("kendoDropDownList").filterInput.val() ===> Presents an error: Undefined.Action on controller



    public JsonResult PopulateReferences(string text)
            {
                var param = text.Split('|');
                var type = (int)text[0];
                var search = text[1];
     
                var catalog = GetCatalog((catalogType)type).Where(c => (c.Descripcio + " " + c.Reference).Contains(search)).Select(c => new { Reference = c.Reference, Descripcio = c.Descripcio + " - " + c.Reference }).AsQueryable();
     
                return Json(catalog, JsonRequestBehavior.AllowGet);
            }


    I hope that we can
    clarify on this topic

     

     

    Thanks in advance.

     

     

    Xavier.

  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1442 posts

    Posted 06 Apr 2015 Link to this post

    Hi Xavier,

    It looks like the temporalFare is undefined in this scope, which creates an invalid selector and as a result you are unable to get the DropDownList's instance. You can verify if that is indeed the case by printing the value of the temporalFare variable. For example:  
    function filterTypes() {
        console.log(temporalFare);
        return {
            text: $("#Type").data("kendoDropDownList").value() + "|" + $("#CatalogReference" + temporalFare).data("kendoDropDownList").filterInput.val()
        };
    }


    Regards,
    Alexander Popov
    Telerik
     

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

     
  3. Xavier
    Xavier avatar
    28 posts
    Member since:
    Dec 2010

    Posted 13 Apr 2015 in reply to Alexander Popov Link to this post

    Hi Alexander,

     

    I'm sorry, the last week I was on holiday. I try this and I have not a problem. I show you the code.

     

    var temporalFare;
           function onFareDetailsEdit(e, gridName) {
               if (!e.model.isNew()) {
                   e.container.find("[name=Tipus]").data("kendoDropDownList").enable(false);
                   e.container.find("[name=CatalogReference]").data("kendoDropDownList").enable(false); //not work in cascade
                   //e.container.find("[name=CatalogReference]").closest(".k-dropdown").hide()
                   e.container.find("[name=CentreID]").data("kendoDropDownList").enable(false);
                   var ddlReference = e.container.find("[name=CatalogReference]").data("kendoDropDownList");
                   ddlReference.open();
                   setTimeout(function () { ddlReference.close() }, 250);
               } else {
                   temporalFare = gridName;
               }
           }

     

    I hope you can help me.

     

     

    Thanks in advance.

     

     

    Xavier.

     


     

     

     

     

     

     

     

  4. Xavier
    Xavier avatar
    28 posts
    Member since:
    Dec 2010

    Posted 14 Apr 2015 in reply to Xavier Link to this post

    i solved the problem. I use combobox.

     

     

    Thanks.

     

     

    Xavier.

Back to Top