Problem with Foreign Key Column display while in Grid InCell edit mode.

[Michael]

I am trying to implement a drop down list in a grid using the ForeignKey editor template. The grid edit mode is InCell. The “ForeignKey.cshtml” file is in my “Shared > Editor” Templates directory, and I have decorated my ViewModel attribute with the “ForeignKey” UIHint. Everything looks great when the grid loads (the correct text value displays for each grid item. See attached screenshot). Upon attempting to edit a grid item, however, the text display value changes to its corresponding numeric id value and the dropdownlist fails to load. Basically, it just looks like a regular textbox with the foreign key ID as the value. Screenshots are attached for reference. Relevant code is also below for reference. Thanks.

Relevant ViewModel property:

[UIHint("GridForeignKey")]

public int ManagerID { get; set; }

 

Relevant Grid code within the View file:

....

.Columns(columns =>
                     {
              columns.Bound(p => p.Code).Width(120).HeaderHtmlAttributes(new { style = "height: auto; white-space: normal; vertical-align: middle;" });
                            columns.Bound(p => p.Name).Width(120).HeaderHtmlAttributes(new { style = "height: auto; white-space: normal; vertical-align: middle;" });
                            columns.Bound(p => p.StartDate).Width(120).HeaderHtmlAttributes(new { style = "height: auto; white-space: normal; vertical-align: middle;" });
                            columns.Bound(p => p.EndDate).Width(120).HeaderHtmlAttributes(new { style = "height: auto; white-space: normal; vertical-align: middle;" });
                            columns
                                .ForeignKey(p => p.ManagerID, (IEnumerable<GCEdge.Models.ViewModels.CustomerViewModels.ProjectManagerLookupViewModel>)ViewData["projectManagerLookups"], "ManagerID", "Name")
                                .EditorTemplateName("GridForeignKey")
                                .Title("Manager")
                                .Width(150)
                                .HeaderHtmlAttributes(new { style = "height: auto; white-space: normal; vertical-align: middle;" });
                            
                            columns.Bound(p => p.Active).Width(120).HeaderHtmlAttributes(new { style = "height: auto; white-space: normal; vertical-align: middle;" });
                        })

 

GridForeignKey.cshtml Editor Template:

@model object
           
@(
 Html.Kendo().DropDownListFor(m => m)    
        .OptionLabel("Please select")    
        .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
)

Controller method that loads the IEnumerable collection into the ViewData object:

private void LoadProjectViewData(int ID, string Code)
        {
            IEnumerable<ProjectManagerLookupViewModel> PMs = _context
                .Employees
                .ToList()
                .Select(e => new ProjectManagerLookupViewModel
                {
                    ManagerID = e.ID,
                    Name = e.LastName + ", " + e.FirstName
                })
                .ToList();

            ViewData["rootID"] = ID;
            ViewData["projectManagerLookups"] = PMs;

            if (ID > 0)
            {
                ViewData["rootCode"] = Code;
            }
            
            LoadCustomerLookup();
        }

 

[Michael]

Any update/suggestions on this?

[Michael]

I thought it might help to also see the grid html that's rendered. See attached screenshot. You can see that the dropdownlist values along with the  anonymous javascript function appear to be rendered correctly. It's worth noting that when I change the foreign key value by typing in another number (e.g., from 1 to 2 for example), the appropriate text value displays when the field loses focus.

[Stefan]

Hello Michael,

I was not able to reproduce the same issue on my end. I can assume that the issue is connected to the binding of the data to the editor.

Still, I can suggest checking our demo example demonstrating how to achieve the desired result:

http://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumn

Also, please check the following forum threads on a similar subject:

http://www.telerik.com/forums/kendo-ui-grid-foreign-key-dropdownlist

http://www.telerik.com/forums/asp-net-mvc-razor-grid-with-editable-foreign-key-dropdown-column

Additionally, all of our demos are available in a fully runnable Visual Studio solution which can be helpful to inspect all of the relevant files:

http://docs.telerik.com/aspnet-mvc/introduction#sample-application

If additional assistance is needed, please provide a fully runnable example, and I will gladly assist.

Regards,
Stefan
Telerik by Progress

[Peter]

Hi Michael

I have the same problem.  Do you resolve this problem?  Mind to share ?

Regards

Peter

[Stefan]

Hello, Peter,

If Michael does not see this questions I will be happy to assist as well.

If the listed below suggestions does not work, could you please share a runnable example and I will gladly inspect it.

Regards,
Stefan
Progress Telerik

[Holger]

If have the same error, but found the reason. If there's a second input on the page like the column name, e.g. there a grid column named "ProductId" an additional Search Field "ProductId", then jquery may find the search-input instead of the (dynamically rendered) grid-input. In the end, the grid input is not converted to a dropdownlist.

It would be great to have something like a prefix-option for the grid-columns or at least a scoping to the grid for the dropdownlist-template.

Regards

[Konstantin Dikov]

Hello Holger,

The editors that the Grid renders for the fields have "data-bind" and "name" attributes set to the field name and adding a prefix will break the binding mechanism. Due to this, introducing such change in the Grid will be a major breaking change in existing project and we are doing our best to avoid them at any cost. With that in mind, you can either add prefixes to the model property directly or in the names of the external editors. 


Best Regards,
Konstantin Dikov
Progress Telerik

[Holger]

Ok, but was is about my second idea, not to select the editor-input with a page-wide id selector? If the generated javascript would e.g. scope the selector to controls inside the grid-element, it would not break the control if there's a second (not dynamically generated) on the page. I agree, that there shouldn't be in general two controls with the same id on a page, but in case of the dynamical rendered controls it's out of our control.

Btw, in my case I solved the problem by creating a submodel for the filter fields, so they are now bound to "filter.field".

[Konstantin Dikov]

Hello Holger,

When the editor helpers are rendered, they are considered as separate from the Grid controls and their initializing script is generated from them and not from the Grid. This means that each helper will render its own initialization scripts (for example: kendo.syncReady(function(){jQuery(\"#UnitPrice\").kendoNumericTextBox({\"format\":\"c\"});});)

Image that you have a custom helper that you want to use as an editor. When the Grid serializes the template, it expects the helper to provide the necessary scripts for the initialization. The same applies to the Kendo editors (like NumericTextBox, DropDownList, TextBox, etc.).

I completely understand how in some cases this could be an issue, but in order to implement your idea in the Grid, this will require a set of new editors that will take into account the parent helper that will use those editors (something like GridNumericTextBoxEditor, etc.). This is something that you can actually put as a feature request in our public portal, where other developers could vote for it and increase its priority:

• http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback

 

Best Regards,
Konstantin Dikov
Progress Telerik

[Rod]

I had the same issue and it was resolved by the fix in link entered by Stefan above:

https://www.telerik.com/forums/asp-net-mvc-razor-grid-with-editable-foreign-key-dropdown-column

 

[Dipen]

Hi,

The Dropdown in the Kendo Grid is not preventing the selected value. Not even on the Kendo UI website foreignkey demo.

https://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumn

I have recorded the video of the same. PFA.

Please help me in the issue. 

In my case I am reloading the value of dropdown from server on each time when dropdown gets opened in Kendo grid. And after selection, when the focus is lost the value disappears.  

[YN]

I had the same issue with the dropdown list. always show the first one in the list, ignore the one I selected.

[Viktor Tachev]

Hello,

@Dipen The behavior shown in the attachment seems rather strange. I tried to replicate it with our ForeignKey column example, however, I was not able to. The ProductName field in the demo has validation enabled. If it is left blank validation will kick in and the user will be prompted to enter a value. Would you describe the steps that are necessary to reproduce the issue?

@Sara Would you send us a runnable sample where the behavior is replicated? This will enable us to examine the behavior locally and look for its cause. 


Regards,
Viktor Tachev
Progress Telerik

[Dipen]

Sure, I can provide you the reproduce step in the same  Foreign Key column example at https://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumn 

1. Click on Add New Record

2. Provide value for Product Name and Navigate to Category Dropdown. Select the Category

3. On leave the focus from Category Dropdown to somewhere else, the value of Category will be wiped out.

[Viktor Tachev]

Hi Dipen,

Thank you for the provided steps for replicating the behavior. This is caused by a known issue that has been fixed by the developers. The fix is currently being tested and as soon as that is complete it will be available in the next internal build.

I apologize for any inconvenience the issue may cause you.


Regards,
Viktor Tachev
Progress Telerik

[Dipen]

Thanks Viktor, for the information.

Will it be possible for you to provide the update over here once the fixed issue will be released?

[Viktor Tachev]

Hi Dipen,

The fix is now available in our latest internal build. You can get it from the download section on telerik.com after logging in with your credentials. The fix will also be included in the next official release that is scheduled to be available mid September.

Give the internal build a try and let me know how it works for you.


Regards,
Viktor Tachev
Progress Telerik