Questions on UI for ASP.NET Core Forum

3 answers

125 views

TagHelper vs widget renderes invalid html

Hi,

When adding a textarea to a form, I get different html rendered result:

<kendo-textarea name="reason-reject" rows="5" placeholder="Specify rejection reason" on-change="">

</kendo-textarea>

@(Html.Kendo().TextArea()

.Name("invitation")

.Placeholder("Enter your text here.")

.Rows(10)

.MaxLength(200)

.HtmlAttributes(new { style = "width: 100%", required = true, data_required_msg = "Please enter a text.", data_max_msg= "Enter value between 1 and 200" })

)

Even using the simple form of widget from the samples, generated invalid html.... Can you provide any guidance ?

Is is possible with taghelper, mark the control as mandatory ?

Any help will be highly appreciated,

Manuel

TextArea

answered on 25 Mar 2021

3 answers

235 views

Missing Server-Bound Template

Hello,

In old Kendo.Mvc I was using following method to generate sever side Template for column.

Now I'm migrating project to ASP Net Core and this method is missing, is it moved to somewhere else?

public virtual GridTemplateColumnBuilder<TModel> Template( Func<TModel, object> template );

columns.Template( c => @Html.ActionLink( c[column_name].ToString(), "actionName",
new { encrypted_id = Shared.EncryptId( c[column_id] ) } )
.ToHtmlString() ).Title( "Column Title" );

Grid

answered on 25 Mar 2021

5 answers

254 views

Arrows for sub-menus move when menu is rendered

When a vertical menu is rendered, the arrow denoting a sub-menu starts out in the wrong position, left aligned against the menu item text, and then moves to its correct right aligned position.

Sometimes this is barely perceivable, but other times is very noticeable, mostly during navigation. See the attached GIF for an example of the issue.

I suspect it has something to do with page resources loading (e.g. CSS).

I am unable to reproduce this with Kendo UI in the Dojo, but this is probably because the menu is not rendered on page load.

It is mostly noticeable in Chrome, but can be seen in Edge and IE (it's difficult to tell with Edge/IE because their rendering in general is terrible).

Code used for the menu:-

@(Html.Kendo().Menu()

.Name("menu")

.Orientation(MenuOrientation.Vertical)

.HtmlAttributes(new

{

style = "width: 200px;"

})

.Items(items =>

{

items.Add().Text("Meters").Action("Index", "Meter").Items(x =>

{

x.Add().Text("Create").Action("Create", "Meter");

});

items.Add().Text("Meter Groups").Action("Index", "MeterGroup").Items(x =>

{

x.Add().Text("Create").Action("Create", "MeterGroup");

});

items.Add().Text("Meter Types").Action("Index", "MeterType").Items(x =>

{

x.Add().Text("Create").Action("Create", "MeterType");

});

items.Add().Text("Messages").Action("Index", "Message");

})

)

Menu

answered on 24 Mar 2021

1 answer

137 views

Custom Shape Gallery

What is the best way to display a sidebar gallery of my custom shapes for the diagram and allow the user to drag the items over to a diagram? There is not alot of documentation available for .Net Core.

Diagram

answered on 24 Mar 2021

1 answer

111 views

Save Kendo Pagable User Input To Persist Grid State

I'm having a problem with Kendo .Pagable. We have a webapplication that displays entries in a grid. The user can choose between 25, 50, 100, 200 entries per site. But whenever the user enters the entry edit page and goes back to the overview page it gets reset to 25 entries per page.

I could not find out how to persist the state (let's say 100 entries per page) for the grid on reload. Can you help me out?

Here the code snippet

01.GRID.DataSource(dataSource => dataSource

02. .Ajax()

03. .PageSize(25)

04. .Model(m => { m.Id(a => a.Id); })

05. .Read(read => read

06. .Action("Read", "Overview")

07. .Data("additionalGridData"))

08. .Sort(x => x.Add(y => y.Id))

09. )

10. .AutoBind(false)

11. .Filterable()

12. .Sortable(c=>c.SortMode(GridSortMode.MultipleColumn).AllowUnsort(true).ShowIndexes(true).Enabled(true))

13. .Pageable(p => p.PageSizes(new[] {25, 50, 100, 200}))

Thanks in advance!

Grid

answered on 23 Mar 2021

7 answers

2.8K+ views

Validation for DropDownList

My apologies if this is the wrong forum for this, but I am having some trouble with a dropdownlist validation

<div class="form-group">

<label asp-for="RoleModuleId" class="control-label col-md-2">Module</label>

@(Html.Kendo().DropDownListFor(c => c.RoleModuleId)

.OptionLabel("-- Select a Module --")

.HtmlAttributes(new { style = "width:21%", id = "moduleDropdown", required = "required" })

.BindTo(Model.Modules.OrderBy(c => c.Name))

.DataTextField("Name")

.DataValueField("Id"))

</div>

<div class="form-group">

<label asp-for="Name" class="control-label col-md-2">Name</label>

@(Html.Kendo().TextBox()

.Name("Name")

.HtmlAttributes(new { style = "width: 100%", placeholder = "Name of role", required = "required" })

)

</div>

With the TextBox if there is nothing selected it will give a little warning message and have the box flash red, and it will prevent the form from submitting. Similarly if nothing is selected for the dropdownlist it will prevent the form from being submitted, but will give no indication. This comes across that there is something wrong with the form, and I believe could cause some confusion.

Is this intended behavior or am I missing something?

Be well,

Bradley

DropDownList

answered on 22 Mar 2021

3 answers

167 views

Problem : Kendo Grid Dynamic with PopUp Edit Mode Mode

Hi,

I tried to use dynamic object with Grid on PopUp Edit Mode, but the popup render the elements of the DataTable instead of the columns. (view attach files).

No problem in inline mode.

How to fix this ?

I use the example here.

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

Regards.

Grid

answered on 19 Mar 2021

3 answers

125 views

Position of each item

Hello,

my request refers to the example here:
https://demos.telerik.com/aspnet-core/diagram/editing

Is it possible to set the position for each item?
It looks like the connectors are not moved to the new position, see attachment.

Maybe you could help with an example for asp.net core

Best regards,

Oliver

Diagram

answered on 19 Mar 2021

1 answer

122 views

DropDownList input flicker

The input tag used by DropDownList is sometimes briefly visible on the page while JavaScript and CSS assets are loading.

If the input tag is meant to be hidden anyway, why aren't you writing the style attribute out with the HTML from the tag helper?

Instead it's being set by the associated scripts, which means the input is visible until the script has loaded and run.

DropDownList

answered on 18 Mar 2021

4 answers

345 views

Tag Helper Wizard

I am building a wizard using tag helpers and I have a few questions.

1. How can I set the class on the step buttons?

2. I want to do some manual validation on the next button. I have the click event hooked up and the validation is working but I can't prevent the wizard from moving to the next step.

3. I want my final step to not have any buttons. Is this possible?

4. How do I disable clicking on the step number to move through the wizard?

Wizard

answered on 18 Mar 2021