Grid Refresh Foreign Key Columns

[Kaloyan]

Hello!

I have posted the question before and I thought that I managed to fix the issue but it turns out that I made a mistake. I contacted the support but we still haven't figured out how to fix the problem. I also think that it is pretty hard to understand the issue so I am posting it here and I hope that someone will be able to help.

Basically I have 2 grids on one screen. One shows the Positions in a company, the other shows the staff and their positions. So far so good. The staff grid has a foreign key to the positions table because you know these positions change and they can be updated, so our staff model only holds an id of the specific position. Both Grids are on the same screen and are ajax bound. I have a mechanism that refreshes both grids if there is a change. (dataSource.read() does the trick). I have attached scheme.

I do not want to refresh the screen. I saw from a demo in the docs that when I have a foreign key to some table the Grid uses ViewData to pass the values and map them to their specific Ids. A problem occurs when I edit the Position name in the first grid (the positions grid) and try to refresh the second one (the staff grid). As the staff grid holds only the id of the postion and as we cannot update the ViewData without refreshing the screen, the value remains the same even after I refresh the staff grid. I can edit the staff and change their positions but if I edit the grid from the positions grid, the changes are not visible in the staff gird without refreshing.

 

I have popup edit mode enabled with custom editor for the staff gird and there is a drop down for the foreign key column (postion name) which is beign updated when I refresh the grid and thats fine (it is bound to ajax so we don't have problem here). We need the foreign key columns Ajax bound, not ViewData bound. Of course I could edit my model and add a extra field to hold my Position title and pass it to the screen and use it instead of foreign key but that's not the idea.

 

I repeat:

• I don't want to refresh the page.
• I have attached a scheme.

 

Here is some source code that I use:

View (only the staff grid, that's what's important):

@(Html.Kendo().Grid<Models.Staff>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Name);
        columns.ForeignKey(p => p.PositionId, (System.Collections.IEnumerable)ViewData["positions"], "Id", "PositionName");
    })
    .ToolBar(toolBar =>
        {
            toolBar.Create();
        })
    .Editable(editable => editable.Mode(GridEditMode.PopUp))
    .Filterable()
    .Groupable()
    .Pageable()
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(100)
        .ServerOperation(false)
        .Read(read => read.Action("Staff_Read", "Staff"))
        .Update(update => update.Action("Staff_Update", "Staff"))
        .Create(create => create.Action("Staff_Create", "Staff"))
    )
)

 

Controller(the index method that fills the ViewData):

public ActionResult Index ()
{
    ViewData["positions"] = context.Positions.Select(position => new
    {
        Id = position .Id,
        PositionName = position.PositionName
    });
    return View();
}

 

Hope I explained it good enough and someone could help me.

Kind Regards,
Kaloyan Manev

[Kaloyan]

That's the old topic and it only has useful URLs to stack overflow. They say that the thing I want is impossible. Could it be implemented in future?

https://www.telerik.com/forums/telerik-asp-net-mvc-grid-foreign-key-refresh

[Viktor Tachev]

Hello Kaloyan,

I will post the suggestion from the ticket you have submitted for reference. If you have additional questions I suggest we continue the conversation in a single thread - either this one or the support ticket. 

The ForeignKey column needs a static collection that contains the values and text for the field. This way values from the column are matched to the corresponding text. 

Since in your scenario the data in the table used in the ForeignKey column will be changed I suggested using a custom editor instead of ForeignKey column. Remove the ForeignKeyColumn and replace it with a column using custom editor:

 

columns.Bound(p => p.Category).ClientTemplate("#=Category.CategoryName#").Width(180);

The Category field in the Model will look like shown below. Note the UIHint attribute.

[UIHint("ClientCategory")]
public CategoryViewModel Category
{
    get;
    set;
}

The UIHint attribute will specify the name of the partial View where the editor will be defined. The content of that editor would look like this:

@model Kendo.Mvc.Examples.Models.CategoryViewModel

@(Html.Kendo().DropDownListFor(m => m)
        .DataValueField("CategoryID")
        .DataTextField("CategoryName")
        .DataSource(source =>
            source.Read(read => read.Action("GetCategories", "ComboBox"))
        )
)

As result the GetCategories Action will be fired when the Dropdown is opened. In that action you can read the records from the corresponding database table. Thus, the new values will be displayed accordingly. 

More information on using custom editors in the Grid component is available in this article. 


Regards,
Viktor Tachev
Progress Telerik

[Kaloyan]

Hi Viktor,

Your solutions works and that's great! Anyway could we expect in future that it will be possible to bind foreignKey column to a remote collection? I mean is there any plans for such feature? Could I make a suggestion?

[Viktor Tachev]

Hi Kaloyan,

I am glad that the suggested approach is working for you. 

If you would like to request a feature to be included out of the box for the components I can suggest submitting a request in our UserVoice portal. This way the users can vote for the feature. Based on the traction the request gathers with the community the developers will consider implementing it in a future release. 

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

Regards,
Viktor Tachev
Progress Telerik