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

20 posts, 0 answers
  1. Jon
    Jon avatar
    5 posts
    Member since:
    Apr 2007

    Posted 01 Jan 2013 Link to this post

    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")
    )
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 03 Jan 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Bernie
    Bernie avatar
    2 posts
    Member since:
    Jan 2013

    Posted 10 Jan 2013 Link to this post

    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.
  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 14 Jan 2013 Link to this post

    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!
  6. Meera
    Meera avatar
    5 posts
    Member since:
    Feb 2013

    Posted 21 Feb 2013 Link to this post

    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? 
  7. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 22 Feb 2013 Link to this post

    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!
  8. Meera
    Meera avatar
    5 posts
    Member since:
    Feb 2013

    Posted 22 Feb 2013 Link to this post

    Thank you so much! It works perfectly
  9. Henzard Kruger
    Henzard Kruger avatar
    5 posts
    Member since:
    Dec 2009

    Posted 02 Apr 2013 Link to this post

    May I have this example as just HTML and local DataSource no mvc
  10. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 04 Apr 2013 Link to this post

    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!
  11. Fusionex Corp Sdn Bhd
    Fusionex Corp Sdn Bhd avatar
    4 posts
    Member since:
    Oct 2009

    Posted 23 May 2013 Link to this post

    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

  12. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 23 May 2013 Link to this post

    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!
  13. Navin
    Navin avatar
    12 posts
    Member since:
    Dec 2012

    Posted 18 Mar 2014 in reply to Vladimir Iliev Link to this post

    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
  14. Fusionex Corp Sdn Bhd
    Fusionex Corp Sdn Bhd avatar
    4 posts
    Member since:
    Oct 2009

    Posted 18 Mar 2014 in reply to Navin Link to this post

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

    Thank you.
  15. Navin
    Navin avatar
    12 posts
    Member since:
    Dec 2012

    Posted 19 Mar 2014 in reply to Fusionex Corp Sdn Bhd Link to this post

    Can you come up with a VS 2010 solution please

    Thanks.
  16. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 21 Mar 2014 Link to this post

    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.

     
  17. Rick
    Rick avatar
    21 posts
    Member since:
    Mar 2012

    Posted 05 Sep 2014 Link to this post

    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
  18. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 08 Sep 2014 Link to this post

    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.

     
  19. Rick
    Rick avatar
    21 posts
    Member since:
    Mar 2012

    Posted 10 Sep 2014 in reply to Vladimir Iliev Link to this post

    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,
  20. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 11 Sep 2014 Link to this post

    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.

     
  21. Rick
    Rick avatar
    21 posts
    Member since:
    Mar 2012

    Posted 11 Sep 2014 in reply to Vladimir Iliev Link to this post

    I've posted a new thread: http://www.telerik.com/forums/cascaded-typeahead-textbox-in-grid. Thanks,
Back to Top
UI for ASP.NET MVC is VS 2017 Ready