Dropdownlist in editmode

17 posts, 1 answers
  1. Richard
    Richard avatar
    26 posts
    Member since:
    Sep 2014

    Posted 23 Oct 2014 Link to this post

    I do not quite understand how does the dropdownlist appear when I click "Edit" for inline editing?  I have my data bound to my grid but want the dropdownlist to appear for that cell when I click edit. 
  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1444 posts

    Posted 27 Oct 2014 Link to this post

    Hi Richard,

    Basically, each column that is bound to a certain field (using the field option) uses some default editor based on the field's data type. The recommended way for adding a DropDownList editor is to specify the columns.values array option. The array items will be used for:
    • Populating the DropDownList
    • Displaying the text that matches the foreign key IDs in the Grid while not in edit mode

    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Richard
    Richard avatar
    26 posts
    Member since:
    Sep 2014

    Posted 27 Oct 2014 Link to this post

    Still little confused.  I have included a code example what I am trying to achieve.  Notice I am trying to populate it with data from the Model.  Is this not correct?
  4. Richard
    Richard avatar
    26 posts
    Member since:
    Sep 2014

    Posted 27 Oct 2014 Link to this post

    Still little confused.  I have included a code example what I am trying to achieve.  Notice I am trying to populate it with data from the Model.  Is this not correct?
  5. Richard
    Richard avatar
    26 posts
    Member since:
    Sep 2014

    Posted 27 Oct 2014 Link to this post

    Having connection problems.  Here is the code.
  6. Richard
    Richard avatar
    26 posts
    Member since:
    Sep 2014

    Posted 27 Oct 2014 in reply to Richard Link to this post

    Keep losing connection
  7. Alexander Popov
    Admin
    Alexander Popov avatar
    1444 posts

    Posted 29 Oct 2014 Link to this post

    Hello Richard,

    Thank you for the provided code snippets. I reviewed them and it appears that you are using the ASP.NET MVC wrappers, where this behavior is achieved by using a ForeignKey column builder. I would suggest checking our offline demos, which provide a fully runnable example. They reside in the Kendo UI installation path, under the \wrappers\aspnetmvc\Examples directory. The files you would be interested in are: 
    • Areas\razor\Views\grid\foreignkeycolumn.cshtml
    • Controllers\Grid\ForeignKeyColumnController.cs
    • Views\Shared\EditorTemplates\GridForeignKey.cshtml

    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Richard
    Richard avatar
    26 posts
    Member since:
    Sep 2014

    Posted 17 Nov 2014 in reply to Alexander Popov Link to this post

    Using a hard coded values as an array for the dropdownlist is not feasible.  The code included is pretty self explanatory.  I am able to grab the values in editmode that are not the dropdownlist.  In looking at all the demos and examples provided by Telerik this issue is still not resolved.  If you open the view you will notice activity is bound to a property in my model.  Please correct me if I am wrong but is this not how its suppose to work?
  9. Richard
    Richard avatar
    26 posts
    Member since:
    Sep 2014

    Posted 18 Nov 2014 in reply to Alexander Popov Link to this post

    Will a foreign key column work for editing inline? 
  10. Richard
    Richard avatar
    26 posts
    Member since:
    Sep 2014

    Posted 18 Nov 2014 in reply to Alexander Popov Link to this post

    In reviewing your example I fail to understand how the ActionResult ForignKeyColumn is called to populate the dropdownlist.  So, If I understand correctly this has to fire first from a totally separate call from the model to get the data for the dropdown then....call my other method to get the data to the grid? 
  11. Alexander Popov
    Admin
    Alexander Popov avatar
    1444 posts

    Posted 19 Nov 2014 Link to this post

    Hello Richard,

    Yes, ForeignKey columns work with InLine editing. Basically, the ForeignKey column builder takes few arguments:
    • The Field to which it should be bound
    • A Collection of items (value-text pairs) which would later be used to 
      • Populate the DropDownList
      • Match the values with the corresponding text
    • The name of the value field in the item collection
    • The name of the text field
    Here is an example: 
    private void PopulateCategories()
    {
        var dataContext = new SampleEntities();
        var categories = dataContext.Categories
                    .Select(c => new CategoryViewModel {
                        CategoryID = c.CategoryID,
                        CategoryName = c.CategoryName
                    })
                    .OrderBy(e => e.CategoryName);
     
        ViewData["categories"] = categories;        
    }
     
    public ActionResult ForeignKeyColumn()
    {           
        PopulateCategories();
        return View();
    }

    columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName");
    The collection is then internally stored in a ViewData item and is later accessed from the GridForeignKey editor: 
    @model object
    @(Html.Kendo().DropDownListFor(m => m)
        .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
    )

    In case you would like to load the DropDownList items dynamically (instead of using a predefined collection), then I would suggest using a custom editor template. For example: 
    columns.Bound(p => p.SomeField)..EditorTemplateName("AjaxDropDownList");
     
    //AjaxDropDownList.cshtml
    @model object
    @(Html.Kendo().DropDownListFor(m => m)
        .DataTextField("SomeTextField")
        .DataValueField("SomeValueField")
        .DataSource(source => {
            source.Read(read => {read.Action("GetDropDownListItems", "SomeController");
            })
        })
    )
    Using this approach however, would require for you to manually match the values with the text. This could be done using client templates that make synchronous calls to the server, sending the value, getting back the text and displaying in the Grid's cell when not in edit mode.

    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  12. Richard
    Richard avatar
    26 posts
    Member since:
    Sep 2014

    Posted 19 Nov 2014 in reply to Alexander Popov Link to this post

    That is making more sense now.  I had confusion and set up both manual on one end and dynamic on the other.  Regarding the editor is it dependent on naming it with "Grid" "SomethingorAnother" in the edit templates and then referencing it like column.SomethingorAnother?  If I have more then one Foreign key would I place them all in the GridForeignKeyEditTemplate? 
  13. Richard
    Richard avatar
    26 posts
    Member since:
    Sep 2014

    Posted 19 Nov 2014 in reply to Alexander Popov Link to this post

    Im close.  Got the event working correctly to a point.  Tried the actionresult ForeignKeyColumn() but it is never hit so I removed it.  I get my data to load and when saving I get the "Name" of the dropdown but not its "ID" when updating.  Everything else is the same but when editing my collection only shows the name as changed not the ID but everything else is working. 
  14. Richard
    Richard avatar
    26 posts
    Member since:
    Sep 2014

    Posted 19 Nov 2014 in reply to Alexander Popov Link to this post

    Also when cant the foreignkeycolumn return both the value and text of the dropdownlist?  Thats my issue now is I can only get one or the other.  If I display the text I only get the value not value and text returned.
  15. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1444 posts

    Posted 21 Nov 2014 Link to this post

    Hi Richard,

    The DropDownList can return an object instead of its valueField, but in that case there is no reason to use a ForeignKey column anymore. Since the field will contain objects, one can use template to display a meaningful text (instead of an id), which is otherwise handled by the ForeignKey column builder. I would suggest checking this example and the related files in our offline demos (Views\grid\EditorTemplates\ClientCategory.cshtml). The number of ForeignKey columns does not affect the built-in template (GridForeignKey.cshtml) in any way, as it generates separate code for each column using the proper field names.

    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  16. Rashmi
    Rashmi avatar
    1 posts
    Member since:
    Apr 2018

    Posted 08 May 2018 in reply to Alexander Popov Link to this post

    I have @html.dropdown which I want to add dynamically in td (table cell) . please send code snippet
  17. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1079 posts

    Posted 10 May 2018 Link to this post

    Hello, Rashmi,

    The editor which the Kendo UI Grid for ASP.NET MVC generates is dependent on several things - the UIHint attribute, for example, points to a specific editor.

    When you say that you wish to add it dynamically, do you mean that it will be with a different data source, bound to a different field each time, etc? It is not very clear to me how the DropDownList should be displayed, however, the grid will throw a beforeEdit and an edit event when put in edit mode and you could use that event to modify the editor/editors:

    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/beforeedit
    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/edit

    If you are able to give us more details on the way things are expected to work in the application, I can give you more specific advice. A code snippet of the grid configuration and model can be very useful as well.

    Look forward to hearing back from you.

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Try our brand new, jQuery-free Angular 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