Style broken in edit mode

[David]

Hello,

I am using an aspnetcore Grid and I noticed that the style of the edit form is different from the rest of the site.

For information, my site is setup to use the telerik bootstrap 4 style with custom colors (used the Telerik Theme Builder)

 

The problem I experience seems related to the classes used in my site versus the demo. In the demo (https://demos.telerik.com/aspnet-core/grid/editing-popup), the control classes all use a k- prefix. "k-textbox" "k-input" "k-numerictextbox". On my site, the classes are text-box single-line only. When I manually change them to k-textbox for example, the css applies and is displayed properly.

Did I configure something improperly for the classes used to be different from the demo?

Any help would be appreciated!

 

[Konstantin Dikov]

Hello David,

If you are using custom PopUp edit template you could use Kendo editors (like NumericTextBox, TextBox, DropDownList, etc.) in the template. If you are using the auto-generated template, please ensure that you have the Kendo editors in the "Views/Shared/EditorTemplates" folder for each data type that you are using.

For example, here is the "Date.cshtml" template that we provide with the installation of the suite:

@model DateTime?

@(Html.Kendo().DatePickerFor(m => m))

And here is the "Number.cshtml":

@model double?

@(Html.Kendo().NumericTextBoxFor(m => m)
      .HtmlAttributes(new { style = "width:100%" })
)

Note that you will have to set the "DataType" attribute in the model for each property:

[DataType(DataType.Date)] //This will force the Grid to use the Date.cshtml editor
public DateTime LastSupply
{
    get;
    set;
}

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik

[David]

Wow I didn't know about editor templates!

That was indeed what was missing. I hadn't created a fresh telerik aspnetcore project from scratch but rather upgraded an existing project and I guess I had missed that part. Thank you for this! Works properly now!

David

[Petter]

The editor for the jQuery version of the grid does not have this issue. In my opinion, the proposed solution with editor template seems to be wrong. I expect the grid to know what classes to put on its most basic input types. In this case put the k-textbox class on the inputs for text, and whatever is missing for numeric inputs (possibly even more types). Do you actually want us to add our own editor just to override incorrect behavior on lots of columns in many grids and several products?

[Eric R | Senior Technical Support Engineer]

Hi Petter,

For the autogenerated template, our Project Templates include the pre-built editors out-of-the-box. If they were removed, these can be found at the default installation which is noted below. 

C:\Program Files (x86)\Progress\Telerik UI for ASP.NET Core [VERSION]\wrappers\aspnetcore\EditorTemplates\razor

Alternatively, if the goal is to use a custom editor, it is correct that this will require adding a custom editor. For a full example of this, see the Creating Custom Editors for Bound Properties documentation.

Ultimately, the ASP.NET Core HTML and Tag Helpers are wrappers around the jQuery Widgets and the same functionality is available. However, it shouldn't be required to create a custom editor as described. 

Although, I may be missing something. Can you let me know if you experiencing a different issue in this scenario?

In the meantime, please let me know if you need any additional information. Thank you and I look forward to your reply.

Regards,

Eric R | Senior Technical Support Engineer
Progress Telerik

[Petter]

Thanks! This was very helpful. The project templates was not removed but never included. We started making projects first and then included Telerik components later.