Hello,

I'm trying to built a reusable grid component with Kendo Grid (ASP.NET Core) but I'm finding some problems with its configuration.

Taking the example, https://demos.telerik.com/aspnet-core/grid/editing-custom, if we configure edition mode as PopUp, the result form doesn't show the custom field. 

Same happens if we change the grid type Grid<Kendo.Mvc.Examples.Models.ProductViewModel>() -> Grid<dynamic>(). In this case to configure fields I use the overload with (Type memberType, string memberName) params.

Do I need to configure something else?

One solution is to use the Foreign configuration, like this https://demos.telerik.com/aspnet-core/grid/foreignkeycolumn, but with grid type dynamic (Grid<dynamic>())  grid disappears and no errors are shown.

What I need would be the edition mode to be PopUp and the grid type dynamic. How can I do that?

Thank you.

Best Regards,

Ivan

Hi Ivan,

When in popup edit mode, the custom editor represents the whole content of the popup. You can find a sample which demonstrates how to create a custom popup editor in our examples repository:

• https://github.com/telerik/ui-for-aspnet-core-examples/blob/master/Kendo.Examples.Mvc/Kendo.Examples.Mvc/Views/Grid/CustomPopUpEditor.cshtml

Regards,
Georgi
Progress Telerik

Hi Georgi,

Thank you for your answer, that's very clear.

What I'm looking for is a little more complicated.

I need to know how to show a dropdownlist in a popup (popup generated automaticaly by grid like this example https://demos.telerik.com/aspnet-core/grid/editing-popup) with ForeignKey column (like this https://demos.telerik.com/aspnet-core/grid/foreignkeycolumn) on a grid with model dynamic (@(Html.Kendo().Grid<dynamic>())

Thank you.
Best Regards,
Ivan

Hello Ivan,

Generally speaking, the grid will use a drop down editor for all foreign key columns by default. However, you have to create a view named GridForeignKey.cshtml in the ~Views\Shared\EditorTemplates folder with the following content:

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

Do you have the editor configured as described above? If you do not, could you please add it and let me know if the drop down is generated?

Regards,
Georgi
Progress Telerik

Hi Georgi,

Yes, I have the editor created, as you described. Also I have included the [UIHint("GridForeignKey")] attribute to property, but It is still not working.

Regards,

Ivan

Hi Meypar,

Are you able to replicate the behavior in the sample from our examples repository?

If not, would it be possible to send me a sample where the issue can be observed so I can debug it locally?

Regards,
Georgi
Progress Telerik

Hello Meypar,

You are correct, the grid from our demo will not render the drop down as there is a ProductViewModel editor specified within the EditorTemplates folder with the following content:

<div class="product-view k-widget">
    <div class="edit-buttons">
        <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-i-check"></span></a>
        <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-i-cancel"></span></a>
    </div>
    <dl>
        <dt>Product Name</dt>
        <dd>
            @(Html.EditorFor(p => p.ProductName))
            <span data-for="ProductName" class="k-invalid-msg"></span>
        </dd>
        <dt>Unit Price</dt>
        <dd>
            @(Html.EditorFor(p => p.UnitPrice))
            <span data-for="UnitPrice" class="k-invalid-msg"></span>
        </dd>
        <dt>Units In Stock</dt>
        <dd>
            @(Html.EditorFor(p => p.UnitsInStock))
            <span data-for="UnitsInStock" class="k-invalid-msg"></span>
        </dd>
        <dt>Discontinued</dt>
        <dd>@(Html.EditorFor(p => p.Discontinued))</dd>

    </dl>
</div>

However, if you include a drop down within the above template, the grid will display it.

e.g.

@model Kendo.Mvc.Examples.Models.ProductViewModel

<div class="product-view k-widget">
    <div class="edit-buttons">
        <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-i-check"></span></a>
        <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-i-cancel"></span></a>
    </div>
    <dl>
        <dt>Product Name</dt>
        <dd>
            @(Html.EditorFor(p => p.ProductName))
            <span data-for="ProductName" class="k-invalid-msg"></span>
        </dd>
        <dt>Unit Price</dt>
        <dd>
            @(Html.EditorFor(p => p.UnitPrice))
            <span data-for="UnitPrice" class="k-invalid-msg"></span>
        </dd>
        <dt>Units In Stock</dt>
        <dd>
            @(Html.EditorFor(p => p.UnitsInStock))
            <span data-for="UnitsInStock" class="k-invalid-msg"></span>
        </dd>
        <dt>Discontinued</dt>
        <dd>@(Html.EditorFor(p => p.Discontinued))</dd>

        <dt>Category</dt>
        <dd>
            @(Html.Kendo().DropDownListFor(m => m.CategoryID)
    .BindTo(new List<string>())
            )
        </dd>
    </dl>
</div>

If the grid disappears, it probably means that an error occurs during the compilation of the view. Please make sure that you do not use any htmlFor helpers when using dynamic as this would cause an error.

Regards,
Georgi
Progress Telerik

Hello Georgi,

Thank you for your examples, I used it in other approaches, but in this case I need something different.

First of all, your code is from this example https://demos.telerik.com/aspnet-core/grid/editing-popup and the template is manually generated (I would have to create a new file with that code in the EditorTemplates folder). 

I have only 1 file with my @(Html.Kendo().Grid<dynamic>()...) and I use it as ViewComponent in several views, therefore I can not create 1 file for each view.

What I need is for the dynamic grid to build automatically a popup editor with column type ForeignKey as dropdown like this example https://demos.telerik.com/aspnet-core/grid/foreignkeycolumn but in PopUp Mode.

How can I do that?

Kind Regards,

Ivan

Hello Meypar,

Have in mind that C# is strongly typed and we depend on the type of the model to generate the editor. Basically the convention in MVC is to set the editor of certain type to match the name of the type. Using dynamic is a bit of an edge case which has its limitations and the editors is one of them as we are not able to determine which editor should edit the current field without knowing its type.

At this point I could suggest you to switch to jQuery configuration where editor are generated on the client, thus, types are not mandatory. Is that an option for you?

Regards,
Georgi
Progress Telerik

Hello Georgi,

I understand what are you saying.

I thought configuring the grid column with overload "public virtual GridBoundColumnBuilder<TModel> Bound(Type memberType, string memberName)" would fix that limitation because column has the memberType info. Maybe this could be a new feature for your next version?

I will try to switch to jQuery grid.

Kind Regards,
Ivan

Hi Meypar,

I can suggest you  to submit a feature request in our feedback portal and based on the traction it gains, we will consider implementing it.

Regards,
Georgi
Progress Telerik