This is a migrated thread and some comments may be shown as answers.

Editing custom editor - Not working in PopUp Mode & Dynamic

11 Answers 1307 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Meypar asked on 09 Jan 2020, 04:51 PM

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

11 Answers, 1 is accepted

answered on 20 Jan 2020, 09:29 AM

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

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.

answered on 29 Jan 2020, 09:17 AM

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

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.

answered on 30 Jan 2020, 09:06 AM

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

answered on 04 Feb 2020, 09:45 AM

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

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.