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

Style broken in edit mode

5 Answers 113 Views
Grid
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 02 May 2019, 01:34 PM

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!

 

5 Answers, 1 is accepted

Sort by
0
Accepted
Konstantin Dikov
Telerik team
answered on 07 May 2019, 10:10 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
David
Top achievements
Rank 1
answered on 15 Aug 2019, 05:53 PM

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

0
Petter
Top achievements
Rank 1
answered on 26 Oct 2020, 08:34 AM
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?
0
Eric R | Senior Technical Support Engineer
Telerik team
answered on 28 Oct 2020, 06:57 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Petter
Top achievements
Rank 1
answered on 29 Oct 2020, 09:00 AM
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.
Tags
Grid
Asked by
David
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
David
Top achievements
Rank 1
Petter
Top achievements
Rank 1
Eric R | Senior Technical Support Engineer
Telerik team
Share this question
or