Grid editing popup with dropdownlist

9 posts, 0 answers
  1. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 07 Jan 2013 Link to this post

    Hello again,
    How to add a dropdownlist in the popup,when editing a grid?

    I reproduced the Popup editing on server side, with products as the data and it works fine ,and i would like now to add also the Category,so to have now a dropdownlist with all the categories,in the popup among the others.
    i noticed that for each field kendo knows what type of control to use,so assuming that,i put at columns a ForeignKey just like in inline editing example:
    @(Html.Kendo().Grid(Model)    
        .Name("Grid")
        .Columns(columns => {  
     columns.Bound(p=>p.ProductName);
     columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName");
     ....
    });
    but as a result,for categoryID i have just a textbox,so,do i need again an EditorTemplate or what?and how do i use it in this context?

    Regards
  2. Eric
    Eric avatar
    15 posts
    Member since:
    Jun 2012

    Posted 07 Jan 2013 Link to this post

    Make sure you have the editor template views added to your project. To get the foreign key to display right, you need to have 'GridForeignKey.cshtml' added to '/Views/Shared/EditorTemplates' folder. You can get these templates from the donwloaded zip file of the source or the example project. I would recommend moving the rest of them as well (for example, currency, date etc. etc.)

    See also this help resource:
    http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/editor-templates
    And this thread:
    http://www.kendoui.com/forums/ui/grid/custom-edit-item-template.aspx
  3. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 08 Jan 2013 Link to this post

    Eric, i had already that in my project because it was used in the inline editing,and when i started the test project,was a kendo ui template,which include everything need it for working with kendo elements,so i have all the kendo templates including gridForeignKey.cshml in the shared\editorTemplates
    in the same project is also the inline editing example,where i have a column with an edit button,and when i click it, the foreignkey is seen as a dropdown,and no need for an explicit template,in the viewModel there is no UiHint atribute so it's a dilema for me.

    maybe you can send me a working example starting from that popup editing example,but added the dropdown for Categories of the product in the popup.
  4. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 08 Jan 2013 Link to this post

    Damn foreignKey member,it was so easy;after a whole day of searching,i found an old post


    http://www.kendoui.com/forums/ui/grid/foreignkey-column-does-not-produce-dropdown-list-in-popup-editing.aspx


    with an example , which helped me to understand the principle of UiHint working with kendo grid,and it doesn't matter the viewmodel name,the editortemplate name,as long as you point from the main viewmodel to the wanted field to have the wanted template in the back.The foreighKey.cshtml in the Shared\EditorTemplates is only a default template to help you for simple dropdown lists.

    In the online web examples there are too many coincidences of naming,same name of viewmodel,same name of cshtml file,same name even in the name of the control,which is not good for understanding the functionality,this naming is only a convention made by microsoft,but as i tested if you point the right viewmodel and view,you have it all togheter.Ex. my main viewModel is ProductViewModel(Datasource of the grid),also i have ProductCategoryViewModel(CategoryId,CategoryName),the EditorTemplate name si CategoryProduct.cshtml,and the name of dropdownlist is Categ,so 3 different names.
    My mistake was that i made a property Category  of type ProductCategoryViewModel(CategoryID,CategoryName) in the ProductViewModel and to that, i put an uihint attribute,because that way was for inline editing whitout understanding why,
    and i should put it from the start to CategoryID from the ProductViewModel like this [UiHint("CategoryProduct")] ,also i had to hide the ProductID,with the attribute [HiddenInput(DisplayValue=false)] even if i didn't use that field in the grid,because if it is in the ProductViewModel then is shown,and you have to put it as i saw for the grid member .Model(p=>p.ProductID).
    And now is ok,i have in the popup a dropdownlist for category,of course when loading the grid i have to fill the ViewData object with all the categories.

    Also i found a different approach ,without foreignKey,
    http://www.telerik.com/community/code-library/aspnet-mvc/grid/dropdownlist-editing-in-grid-s-popup-form.aspx seems more simple,but it's more confusing for me,what method should be more appropiate?!

    Thanks anyway to all ,but because there is no comprehensive online documentation,or for clients,a detailed Help file,or something like for the Telerik RAD controls,it's a little difficult to understand every member what it does for each control and how it works especially with MVC.I enjoy this MVC tehnology because of the separation of concerns ,also i like the kendo controls,very useful and good looking,so a good api documentation would help a lot to combine this two tehnologies to build an enterprise web application.Maybe there will be in the future,but also the support team is very ok,and useful until now,so many thanks for your effort.


  5. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 09 Jan 2013 Link to this post

    still a problem.The DropdownList doesn't reflect the value from the grid,when i press Edit,or at least the display value(CategoryName) is not the category shown in the grid.i put in the UiHint my Editor Template which looks like this
    @(Html.Kendo().DropDownList()
            .Name("Category")
            .DataValueField("CategoryID")
            .DataTextField("CategoryName")
            .BindTo((System.Collections.IEnumerable)ViewData["categories"])
    )

    what could be the problem? need to have the model?

  6. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 09 Jan 2013 Link to this post

    Hi Daniel,

     Did you check the Editor Templates help topic? It describes a similar scenario. You may also consider using a foreign key column. A running foreignkey column demo is included in the sample application.

    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!
  7. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 10 Jan 2013 Link to this post

    The example is working,if i use  UIHint("GridForeignKey") on property,also now that i saw the explanations on the EditorTemplate,unfortunately i din't know that name of the control has to be same as the name of property is working also with the custom template.
    Many thanks .
  8. Robert
    Robert avatar
    32 posts
    Member since:
    Apr 2011

    Posted 13 Dec 2016 in reply to Atanas Korchev Link to this post

    Note that at least in R3 2016 release, the 'Examples' folder no longer exists in the Program Files distribution

    C:\Program Files (x86)\Telerik\UI for ASP.NET MVC R3 2016\wrappers\aspnetmvc

     

  9. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 15 Dec 2016 Link to this post

    Hello,

    The examples folder is still there and you can run them depending on the Visual Studio you used:
    C:\Program Files (x86)\Telerik\UI for ASP.NET MVC R3 2016\wrappers\aspnetmvc\Examples\VS2015

    Could you please check again?

    Regards,
    Pavlina
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top