This is a migrated thread and some comments may be shown as answers.

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

19 Answers 662 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 01 Jan 2013, 10:37 PM
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")
)

19 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 03 Jan 2013, 03:45 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Bernie
Top achievements
Rank 1
answered on 10 Jan 2013, 05:33 PM
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.
0
Vladimir Iliev
Telerik team
answered on 14 Jan 2013, 11:08 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Meera
Top achievements
Rank 1
answered on 21 Feb 2013, 08:27 PM
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? 
0
Vladimir Iliev
Telerik team
answered on 22 Feb 2013, 06:42 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Meera
Top achievements
Rank 1
answered on 22 Feb 2013, 03:18 PM
Thank you so much! It works perfectly
0
henzard
Top achievements
Rank 1
answered on 02 Apr 2013, 07:33 PM
May I have this example as just HTML and local DataSource no mvc
0
Vladimir Iliev
Telerik team
answered on 04 Apr 2013, 01:55 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Fusionex Corp Sdn Bhd
Top achievements
Rank 1
answered on 23 May 2013, 01:01 PM
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

0
Vladimir Iliev
Telerik team
answered on 23 May 2013, 01:14 PM
Hi Gan,

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

Kind Regards,
Vladimir Iliev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Navin
Top achievements
Rank 1
answered on 18 Mar 2014, 10:47 PM
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
0
Fusionex Corp Sdn Bhd
Top achievements
Rank 1
answered on 19 Mar 2014, 04:24 AM
Hi,
It is Visual Studio 2012 project.
Sorry about that.

Thank you.
0
Navin
Top achievements
Rank 1
answered on 19 Mar 2014, 03:42 PM
Can you come up with a VS 2010 solution please

Thanks.
0
Vladimir Iliev
Telerik team
answered on 21 Mar 2014, 01:41 PM
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
 

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

 
0
Rick
Top achievements
Rank 1
answered on 05 Sep 2014, 05:45 PM
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
0
Vladimir Iliev
Telerik team
answered on 08 Sep 2014, 05:50 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Rick
Top achievements
Rank 1
answered on 10 Sep 2014, 07:19 PM
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,
0
Vladimir Iliev
Telerik team
answered on 11 Sep 2014, 07:31 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Rick
Top achievements
Rank 1
answered on 11 Sep 2014, 06:01 PM
I've posted a new thread: http://www.telerik.com/forums/cascaded-typeahead-textbox-in-grid. Thanks,
Tags
Grid
Asked by
Jon
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Bernie
Top achievements
Rank 1
Vladimir Iliev
Telerik team
Meera
Top achievements
Rank 1
henzard
Top achievements
Rank 1
Fusionex Corp Sdn Bhd
Top achievements
Rank 1
Navin
Top achievements
Rank 1
Rick
Top achievements
Rank 1
Share this question
or