Telerik Grid MVC

[Andi]

Hello,

Is there any way to change the <input> attr to <textarea></textarea> in popup?

I have gotten as far as doing some basic jquery removeClass and replaceWith. that seems to do the trick it to show the box,

but not the data. 

I know there is an example in how to do it in grid for jquery. But I am trying to see if there is another solution in mvc grid.

Any help is greatly appreciated. 

 

Thank you,

Andi.

[Alexander]

Hi Andi,

Thank you for reaching out.

The Telerik UI for ASP.NET Core Grid exposes the ability to manually incorporate a Custom Popup Editor template that can hold arbitrary HTML markup logic based on your requirements and needs. This can be achieved by using the conventional API methods of the component.

We have a dedicated GitHub example that illustrates how a custom popup editor can be integrated within the Telerik UI for ASP.NET Core Grid. You can find it available within our examples repository:

https://github.com/telerik/ui-for-aspnet-core-examples

Here is a list of all the resources used for the Custom Popup Editing approach:

• View
• Model
• Controller
• PopUp Editor Template

The example uses the following approach in order to achieve the desired result:

• Configure the Grid for Popup Editing through the .Editable() configuration and within it provide a template that will render custom Popup Grid Editor:
  

.Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("PersonPopUpEditor"))

• Initialize the Custom Popup Editor template within the "~Views\Shared\EditorTemplates" folder this is required as the Telerik UI for ASP.NET Core Grid will look for the template within this folder. It is important to note that the model properties should be bound successfully in order to a successful edit operation. You can achieve this by using the [WidgetName]For() helper initialization (highlighted in blue). For example:

 Model Field:

public class Person
{
    public DateTime BirthDate { get; set; }
}

PersonPopUpEditor:

@model Telerik.Examples.Mvc.Models.Person

<div class="k-edit-form-container">
    <h5>Customized Person edit template</h5>

    <div class="k-edit-label">
        @Html.LabelFor(model => model.BirthDate)
    </div>
    <div class="k-edit-field">
        @Html.Kendo().DateTimePickerFor(model => model.BirthDate)
        @Html.ValidationMessageFor(model => model.BirthDate)
    </div>
</div>

Please give the aforementioned suggestion a try and let me know how it works out for you.

Kind Regards,
Alexander
Progress Telerik

[Andi]

Alexander thank you for you answer I was able to find an older solution and applied to mine. In addition this is also a great help for me too. I was looking to find a solution like this.  

I used the EditorViewData , but looking at this now is def what I was looking for to simplify the pop up form for me.

EditorViewData is used to change the attribute of the actual field (example). But the TemplateName changes the whole form (example).  Thank you again.

I will save this for future refence to look at. I appreciate it. 

[Alexander]

Hi Andi,

Thank you for sharing your feedback with the community. It is greatly appreciated.