Dropdownlist with cascade and filter

[Xavier]

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.


[Alexander Popov]

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

 

 

[Xavier]

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.

 

 

 

 

 

 

 

 

[Xavier]

i solved the problem. I use combobox.

 

 

Thanks.

 

 

Xavier.