Dropdownlist in editmode

[Richard]

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. 

[Alexander Popov]

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

 

 

[Richard]

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?

[Richard]

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?

[Richard]

Having connection problems.  Here is the code.

[Richard]

Keep losing connection

[Alexander Popov]

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

 

 

[Richard]

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?

[Richard]

Will a foreign key column work for editing inline? 

[Richard]

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? 

[Alexander Popov]

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

 

 

[Richard]

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? 

[Richard]

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. 

[Richard]

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.

[Alexander Popov]

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

 

 

[Rashmi]

I have @html.dropdown which I want to add dynamically in td (table cell) . please send code snippet

[Alex Hajigeorgieva]

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