Cascading DropDownList in grid is not setting the proper initial values in edit mode

[Jon]

Hi All.  Trying to use Cascading DropDown inside a grid "in-line" edit mode. The initial values are not being set for edit mode.  Add mode is working as expected.  I tried some jQuery  to set these manually but that did not work either.

So two problems:  

1. Why aren't the initial values set during edit mode properly?
2. Why does this code fail to change the value of the dropdown - control.value("1");

Thanks
-Jonathan





Here is the Jquery/JS I used:

<script>

    function SelectedCedingCompany() { return { CedingCompanyId: $("#CedingCompanyId").val() }; }

    function SelectedCedingCompanyLine() { return { CedingCompanyLineId: $("#CedingCompanyLineId").val() }; }

 

    function CoveredLinesAndSublinesGridBeginEdit(e)

    {

        var control = e.container.find('#CedingCompanyStateId').data('kendoDropDownList');

        control.enable();

        control.value("1");

    }

</script>

My Grid looks like this:

@(Html.Kendo().Grid<ContractScope>()

    .Name("CoveredLinesAndSublinesGrid")

    .Columns(columns =>

    {

        columns.ForeignKey(c => c.CedingCompanyId, (System.Collections.IEnumerable)ViewBag.CedingCompanies, "CedingCompanyId", "CompanyName")

            .Width(100).Title("Ceding Company")

            .EditorTemplateName("Contract/ContractScopeCedingCompanyDropDown");

         

        columns.ForeignKey(c => c.CedingCompanyStateId, (System.Collections.IEnumerable)ViewBag.CedingCompanyStates, "CedingCompanyStateId", "CedingCompanyStateDescription")

            .Width(50).Title("State")

            .EditorTemplateName("Contract/ContractScopeCedingCompanyStateDropDown");

 

        columns.Command(command => { command.Custom("Edit").SendDataKeys(true); command.Edit(); }).Width(150);

    })

    .ToolBar(tb => tb.Template(

    @<text>

    <a class='k-button k-button-icontext k-grid-add ActionButton' href="#" style="padding-top:2px; padding-bottom:4px;">

        <span class="k-icon k-add"></span>Add Covered Line / Sublines

    </a>

    </text>))

    .Scrollable(s=>s.Height(300))

    .Editable(editable => editable.Mode(GridEditMode.InLine))

    .Events(events => events.Edit("CoveredLinesAndSublinesGridBeginEdit"))

    .DataSource(dataSource => dataSource

        .Ajax()       

        .Filter(filter => filter.Add(e => e.ContractId).IsEqualTo(contractID))

        .Events(events => events.Error("AjaxFailure"))

        .Model(model =>

        {

            model.Id(p => p.ContractScopeId);

            model.Field(p => p.ContractId).Editable(false);

            model.Field(p => p.ContractScopeId).Editable(false);

            model.Field(p => p.CedingCompanyId);

            model.Field(p => p.CedingCompanyStateId);

        })       

        .Read(read => read.Action("Read", "CoveredLines", new { area = "Contract" }).Type(HttpVerbs.Post))

        .Create(create => create.Action("New", "CoveredLines", new { area = "Contract", id = contractID }).Type(HttpVerbs.Post))

        .Update(update => update.Action("Update", "CoveredLines", new { area = "Contract" }).Type(HttpVerbs.Post))

        .PageSize(20)

    )   

)

My Templated  DropDown Editors:

@(Html.Kendo().DropDownList()

    .HtmlAttributes(new { id = "CedingCompanyId"})

    .DataTextField("CompanyName")

    .DataValueField("CedingCompanyId")

    .Name("CedingCompanyId")

    .DataSource(source => source

        .Read(read => read.Action("GetCedingCompanies", "CoveredLines", new { area = "Contract" })

        .Type(HttpVerbs.Post))

        .ServerFiltering(true)))

@(

    Html.Kendo().DropDownList()

    .HtmlAttributes(new { id = "CedingCompanyStateId"})

    .DataTextField("CedingCompanyStateDescription")

    .DataValueField("CedingCompanyStateId")

    .Name("CedingCompanyStateId")

    .DataSource(source => source

        .Read(read => read.Action("GetCedingCompanyStates", "CoveredLines", new { area = "Contract" })

            .Type(HttpVerbs.Post)

            .Data("SelectedCedingCompany"))

        .ServerFiltering(true))

    .Enable(true)

    .AutoBind(false)

    .CascadeFrom("CedingCompanyId")

)

[Atanas Korchev]

Hi John,

 Unfortunately we couldn't find anything problematic in the provided code. We would need a runnable sample project in order to troubleshoot. 

Regards,
Atanas Korchev
the Telerik team

[Bernie]

Hi Atanas,  Are cascading drop down lists supported in "in grid" editting?  Is there a sample application for this?  I am having the same problem, but surely dont want to create an entire sample project if the the stated functionality is not officially supported by Kendo.

[Vladimir Iliev]

Hi Jon,

For convenience I created small example to demonstrate you how to implement Grid Inline editing with cascading DropDownLists and attached it to the current thread.

Kind Regards,
Vladimir Iliev
the Telerik team

[Meera]

Thanks so much for the example. It has helped me so much. I would like to display the dropdown list text on the grid instead of the id. How can this be done? 

[Vladimir Iliev]

Hi Meera,

 
To display the text instead of the value I would suggest to use ForeignKeyColumn which binds the text to the value. For convenience I created small demo of using Kendo Grid with cascading ForeingKeyColumn and attached it to the current thread.

Kind Regards,
Vladimir Iliev
the Telerik team

[Meera]

Thank you so much! It works perfectly

[henzard]

May I have this example as just HTML and local DataSource no mvc

[Vladimir Iliev]

Hi Henzard,

 
Currently there is no such example, however I would suggest to start implementing such solution using the "Editing custom editor" demo as a baseline and let us know if you face any difficulties.

Kind Regards,
Vladimir Iliev
the Telerik team

[Fusionex Corp Sdn Bhd]

Hi,


Can your attached solution work for InCell grid? I mean
cascading drop down list in InCell grid instead of InLine grid?

I tried but it does not work.

Can you advise me the way to do that or do you have any
example?

 

Thanks

[Vladimir Iliev]

Hi Gan,

Please find the attached example of Grid with "InCell" edit mode and cascading DropDownLists.

Kind Regards,
Vladimir Iliev
the Telerik team

[Navin]

Hi I downloaded the KendoGridWithInlineCascadingForeingKeyColumn.zip and cannot open this in Visual Studio 2010. What type of project is this and what do I need to download so I can open it.

Cheers,
Navin

[Fusionex Corp Sdn Bhd]

Hi,
It is Visual Studio 2012 project.
Sorry about that.

Thank you.

[Navin]

Can you come up with a VS 2010 solution please

Thanks.

[Vladimir Iliev]

Hi Navin,

The example "KendoGridWithInlineCascadingForeingKeyColumn" from our CodeLibrary which you are referring to is VisualStudio 2010 project. Most probably the project type is not supported by your current VisualStudio installation type. For more information you can check this help article.

Kind Regards,
Vladimir Iliev
Telerik

 

 

[Rick]

Can we have cascaded autocomplete instead of ordinary DropDownList in kendo grid? The reason is we want to choose BrandName from database first, if it's not an existing BrandName, we want the ability to enter a new one. Then the choice of Model# would be depending on BrandName. If there is some model# for that brand, we list all of them and let user make a choice. If not, we allow user to enter a new model#.

Any suggestion would be highly appreciated!

Thanks

[Vladimir Iliev]

Hi Jon,

For convenience I created small example of implementing cascading ComboBoxes as editor in the Grid which also demonstrates how to add support for inserting new items into the ComboBox (check the last column of the Grid). The example is attached to the current thread.

On a side note, I would like to remind you that as a general practice it is accepted to ask different questions in separate support threads / forum posts. In this way it is much easier to follow and concentrate on the particular issue which usually leads to its faster resolving.

Kind Regards,
Vladimir Iliev
Telerik

 

 

[Rick]

Hi Vladimir,

Thank you for the example. It works but not meet my need.

I need the ability to enter new string value. Therefore, I need DataValueField to use CustomerName
in the comboBox. I changed your example to have string instead of int for customerID. And I got the following error.

System.InvalidOperationException:
The model item passed into the dictionary is null, but this dictionary
requires a non-null model item of type 'System.Int32'.

Looks like it require fixed dictionary format with int as ID and string as Name. Is there a way to get around?

Thanks a lot,

[Vladimir Iliev]

Hi Rick,

As this thread is out of the original topic, may I kindly ask you to open a new support thread for the Grid? In this way it is much easier to follow and concentrate on the particular issue which usually leads to its faster resolving.

Regards,
Vladimir Iliev
Telerik

 

 

[Rick]

I've posted a new thread: http://www.telerik.com/forums/cascaded-typeahead-textbox-in-grid. Thanks,