Unable to add a Kendo dropdown to Kendo Grid Column

13 posts, 0 answers
  1. Jim
    Jim avatar
    25 posts
    Member since:
    Mar 2016

    Posted 25 Mar Link to this post

    I am at a loss on this. <br> I am trying to add a Kendo dropdown user control to a column in my kendo grid.

    My View Model:

        public class MainViewModel
            {
                [Display(Name = "Main")]
                [Required]
                public string Main1 { get; set; }
                public string Description { get; set; }
                [UIHint("CustomerList")]
                public CustomerViewModel Customer { get; set; }
            }

        public class CustomerViewModel
        {
            public string CustomerID { get; set; }
            public string CustomerName { get; set; }
        }

    My Grid looks like:

        @(Html.Kendo().Grid<Test.Models.MainViewModel>()
                .Name("mainGrid")
                .Columns(col =>
                {
                    col.Bound(x => x.Main1);
                    col.Bound(x => x.Customer).ClientTemplate("#=Customer.CustomerName#").Width(180);               
                    col.Bound(x => x.Contact1);
                    col.Command(x => { x.Edit(); x.Destroy(); });
                })
        )

    The Customer displays in the grid however when I go to add/edit I do not see that column.  I don't believe that its calling my user control.  <br>I am not sure why.

    This user control is in the Views folder.  I also tried moving it into the Views>Shared and the Views>Shared>DisplayTemplate folder.

    My user control:

        <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Main.Models.CustomerViewModel>" %>
       
        <%= Html.Kendo().DropDownListFor(m => m)
                .DataValueField("CustomerID")
                .DataTextField("CustomerName")
                .BindTo((System.Collections.IEnumerable)ViewData["customers"])
        %>   

    This is almost identical to the Kendo example they provide with the only difference is that they have areas setup in their project and I do not.

  2. Jim
    Jim avatar
    25 posts
    Member since:
    Mar 2016

    Posted 28 Mar in reply to Jim Link to this post

    I tried a second w ay by created a partial view in the Shared/EditorTemplates folders and called it CustomerList.cshtml

    Contents of the file are:

    @(Html.Kendo().DropDownList(m => m)

     

    .DataTextField("CustomerName")

    .DataValueField("CustomerID")

    .OptionLabel("--- Select Value ---")

    .BindTo((System.Collections.IEnumerable)ViewData["customers"])

     

     

    )

     

     

    This still doesn't work, when I go that field I see 2 text boxes (the ID and Name field) I do not see a DropDownList.

     

    Please advise.

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Jim
    Jim avatar
    25 posts
    Member since:
    Mar 2016

    Posted 28 Mar in reply to Jim Link to this post

    I now got the drop down to occur.  However I still have 2 issues:

    1) The dropdown will not show if Editable is set to Popup.

    2) When I switched Editable to InLine, its display fines.  However if I select a different value and click save the model object still has the original value.  How would I go about getting the selected value from the drop down?

  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    837 posts

    Posted 29 Mar Link to this post

    Hello Jim,

    Please review the following sample project, which demonstrates how the Grid's Popup Editor (GridEditMode.PopUp) can be customized. You can add the DropDownList in the Person view. After making a selection updating the record will persist the selected DropDownList item.

    Regards,
    Ivan Danchev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Jim
    Jim avatar
    25 posts
    Member since:
    Mar 2016

    Posted 29 Mar in reply to Ivan Danchev Link to this post

    Are you saying that the example where they use a UIHint to create a template will only work InLine and not in popup?

    If I am to create a popup then I should utilize the TemplateName in Editable?

  7. Jim
    Jim avatar
    25 posts
    Member since:
    Mar 2016

    Posted 29 Mar in reply to Jim Link to this post

    How would I initially set the dropdown value and how would I update the model when the dropdown value changes?
  8. Jim
    Jim avatar
    25 posts
    Member since:
    Mar 2016

    Posted 29 Mar in reply to Jim Link to this post

    To further clarify.  I created a template as suggested.  The template is bound to a PersonModel,  There is a property in the Person called Status.  This status field is my dropwdownlist.  I can populate the dropdownlist by setting its DataSource.

    .DataSource(ds => ds

     

    .Read("GetStatusList", "MyController")

     

     

    )

    However the initial value is not set, nor can I get the updated value back in my view model.

    Is DataSource the right way to go about this or should I be using the Bind method?

     

     

     


  9. Jim
    Jim avatar
    25 posts
    Member since:
    Mar 2016

    Posted 29 Mar in reply to Jim Link to this post

    It appears that I just need to name the dropdownlist to the same value as the property in my model.
  10. Jim
    Jim avatar
    25 posts
    Member since:
    Mar 2016

    Posted 29 Mar in reply to Jim Link to this post

    OK. The only issue that I have is that the dropdownlist does not return a value when I am adding a record.

    If I am editing a record and change the value I am fine.

     

    When I go to add I have a default value show in the dropdown.

     (By setting the value in the DataSource>Model of the grid.)

     

    Even if I select a different value from the drop down I still see null in the DataModal on the post.

    Why is this the case on a create and how do I go about resolving this?

  11. Ivan Danchev
    Admin
    Ivan Danchev avatar
    837 posts

    Posted 31 Mar Link to this post

    Hello Jim,

    This is expected when populating the DropDownList from the model because when adding a new record all of its fields are null. For this reason a better approach would be to pass the data to the DropDownList through the ViewData object. This scenario is covered in the following Code Library example, which shows how the ViewData can be used to populate the widget.

    Regards,
    Ivan Danchev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  12. Jim
    Jim avatar
    25 posts
    Member since:
    Mar 2016

    Posted 31 Mar in reply to Ivan Danchev Link to this post

    Your provided example does not work when

    .Editable(e => e.Mode(GridEditMode.PopUp))

    My grid needs to be in PopUp mode.

     

     

  13. Jim
    Jim avatar
    25 posts
    Member since:
    Mar 2016

    Posted 31 Mar in reply to Jim Link to this post

    I also tweaked my original example.

    I went back to the edit template for the form.

    I started with:

                </div> 
                    @(Html.Kendo().DropDownList()
                        .Name("Customer")
                        .DataTextField("CustomerName")
                        .DataValueField("CustomerID")
                        .DataSource(ds => ds
                            .Read("GetList", "MyController")
                        )
                        .HtmlAttributes(new { @class = "form-control"})
                    )               
                </div>
       
       And changed it to (binding)
                <div class="form-group">
                    @(Html.Kendo().DropDownListFor(m => m)
                    .Name("Customer")
                        .BindTo(ViewData["customers"] as System.Collections.IEnumerable)
                        .DataValueField("CustomerID")
                        .DataTextField("CustomerName")
                    )
                </div> 

     

    Just to make sure that you understand my issue.  I don't need the dropdownlist to be nullable. (I am setting a default value).

    However the issue is when I click the create button from the grid.  The Popup appears and the user enters their information (In this case selects an option from the Doprdownlist).  It is when the user clicks save and the model is posted back to the server do I have an issue.  All of the fields are populated except for what the user selects in the dropdownlist. (It comes back to the server as null).

     

  14. Ivan Danchev
    Admin
    Ivan Danchev avatar
    837 posts

    Posted 04 Apr Link to this post

    Hello Jim,

    Which action do you set ViewData["customers"] in? How are you trying to access the value and which action you are trying to access it in after clicking Update?
    Here's short video (refresh the page if it is not loading correctly), showing how the DropDownList's value selection works at my end in one of the examples I linked in a previous reply, both when updating an existing record and when adding a new one. The ViewData the widget is bound to is set in the Home/Index action.


    Regards,
    Ivan Danchev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready