Questions on UI for ASP.NET Core Forum

1 answer

255 views

Grid paging not responsive with Bootstrap 4 theme

I am using Kendo UI for ASP.NET Core along with Bootstrap 4 and running into an issue with the responsive layouts of the grid on mobile devices. Upon further investigation, it appears to be a bug as I can reproduce it on the Kendo demo site.

The problem: When using the Bootstrap-v4 theme from Kendo, on mobile views the grid pager does not responsively update for the limited width as it does with other themes.

To reproduce: (I'm using Chrome) Go to https://demos.telerik.com/aspnet-core/grid/index, ensure the "Default Theme" is selected, using developer tools, toggle the device toolbar. Notice on the mobile views that the grid pager is properly formed (image attached). Now, switch back to the desktop view, select the Bootstrap-v4 theme, and again use dev tools to switch to the mobile view. The pager has not updated to properly display in a responsive fashion for the mobile device width. (image attached)

Grid

answered on 27 Sep 2018

1 answer

1.2K+ views

Editor template name

Hi.

Trying to create a custom template for event editing using SchedulerEditableSettingsBuilder.TemplateName method but template seems to be ignored no matter what folder I put the template in.

page source:

@(Html.Kendo().Scheduler<Models.ScheduledTest>()

.Name("scheduler")

.AllDaySlot(false)

.CurrentTimeMarker(true)

.Date(new DateTime(2013, 6, 13))

.StartTime(new DateTime(2013, 6, 13, 10, 00, 00))

.EndTime(new DateTime(2013, 6, 13, 23, 00, 00))

.Editable(editable =>

{

editable.TemplateName("TestEditorTemplate");

})

.EventTemplateId("test-template")

.Height(600)

.Views(views =>

{

views.DayView();

views.WeekView(weekView => weekView.Selected(true));

views.MonthView();

})

.DataSource(d => d

.Events(e => e.Error("onError"))

.Model(m =>

{

m.Id(f => f.TestId);

})

.Read("Read", "Calendar")

.Create("Create", "Calendar")

.Destroy("Destroy", "Calendar")

.Update("Update", "Calendar")

)

~/Pages/EditorTemplates/TestEditorTemplate.cshtml

@model Models.ScheduledTest

@using (Html.BeginForm())

{

<div class="k-edit-label">

@(Html.LabelFor(model => model.Title))

</div>

<div data-container-for="title" class="k-edit-field">

@(Html.TextBoxFor(model => model.Title, new { @class = "k-textbox", data_bind = "value:title" }))

</div>

}

But the template is not detected and default template is used.

Should I put the template in a different path, or is there a way to help the component detect the template?

Scheduler

answered on 26 Sep 2018

2 answers

85 views

.Net core razor helper generates double id

The problem comes with Kendo helper which generates tag with same id. Eample:

@(Html.Kendo().ListView<Odata.Client>()
.Name("myid")
.TagName("div")

bla-bla-bla

)

If I look in the browser I will find two tags with the id "myid" one defined by me and one extra generated.

The same happens with Html.Kendo().TabStrip() So I think it is general "feature".

With jquery version of the same functionality I can avoid this behaiviour ising $("#myid").kendoListView(...) and populate the tag which should be populated.

What is the solution in case of using helper on razor page?

...

General Discussions

answered on 25 Sep 2018

2 answers

139 views

Snippet insert from client script

Hello,

Is there a way to insert some html at the current cursor position, but from some jQuery script instead of using the Toolbar snippet option ?

Best regards

Henri

Editor

answered on 20 Sep 2018

2 answers

158 views

[Solved] Toolbar layout issue

Hello,

I'am facing an issue with the toolbar layout that breaks when i'm setting the editor.value from client script.

The issue occurs only when too much tools are declared. It also seams that tools exeeding the toolbar area do not correctly wrap into the "more" butto

Then, clicking into the editor area corrects the issue.

Could you please hep me workaround this issue?

Best regards

Henri

Editor

answered on 19 Sep 2018

4 answers

490 views

Change CSS of bar chart

Hello,

I am trying to give ALL my text in my bar chart a different font-size. Now when I want to put it in my own CSS. I have NO CLUE, what classes or something I need to use. I have the following classes (Yes, there is more code below and the graph shows up).:

<div class="demo-section k-content wide">
@(Html.Kendo().Chart<[private].Models.[private]>()
.Name("Samples_rapport")

By going in my chrome inspector I can do this to change all the font sizing:
text {
font-size: 9px !important;
}

Please, update the Asp.net core documentation....
Greetz,

Chili

Chart

answered on 19 Sep 2018

3 answers

845 views

Post datetime: wrong culture from inline editing

I've a asp net core 2.0 web application with razor view. I've a grid with webapi datasource.

I've added and configured the UseRequestLocalization (in the Startup.Configure)

01.var enUSCulture = new CultureInfo("en-US");

02.var supportedCultures = new[]

03. {

04. enUSCulture,

05. new CultureInfo("it-IT")

06. };

07.

08.app.UseRequestLocalization(new RequestLocalizationOptions

09.{

10. DefaultRequestCulture = new RequestCulture(enUSCulture),

11. // Formatting numbers, dates, etc.

12. SupportedCultures = supportedCultures,

13. // UI strings that we have localized.

14. SupportedUICultures = supportedCultures

15.});

In the _Layout.cshtml I've included the culture and messages javascript files

01.@{

02. var currentCultureString = System.Globalization.CultureInfo.CurrentUICulture.ToString();

03.}

04.

05.<script src="~/lib/kendo-ui/js/cultures/kendo.culture.@(currentCultureString).min.js"></script>

06.<script src="~/lib/kendo-ui/js/messages/kendo.messages.@(currentCultureString).min.js"></script>

07.

08.<script type="text/javascript">

09. kendo.culture('@currentCultureString');

10. $(document).ready(function () {

11. kendo.culture('@currentCultureString');

12. //server culture: @System.Globalization.CultureInfo.CurrentCulture.ToString()

13. //server ui culture: @System.Globalization.CultureInfo.CurrentUICulture.ToString()

14. });

15.</script>

I've verified the generated html and I can see the right culture (it-IT) with right datetime format both in display mode and inline edit mode (with datepicker in EditorTemplates). --> see the attachment

However when I click on save button, the put operation is done using en-US culture and goes wrong in the webapi --> see the attachment

Any idea as to what I am doing wrong?

Grid

answered on 19 Sep 2018

3 answers

146 views

Filter only if there are more then 10 items

Hello,

We have some DDL with more then 10 items and also with less than 10 items we use a EditorTemplate where the filter setting is: .Filter("contains")
but it makes no sense to habe a filter if there are only a few rows - in the DataBound event I wanted to disable/enable the filter like this but it doesn't work:

function FilterSetting(e) {

var ds = this.dataSource.data();

if (ds.length > 10) {

this.options.filter = "contains";

} else {

this.options.filter = "none";

}

How can I display the filter depending on how many rows are available?

robert

DropDownList

answered on 18 Sep 2018

1 answer

140 views

ContextMenu via TagHelper

I see nothing in the documentation, or any hints to it being possible via Visual Studio IntelliSense. Is this possible? If, so can an example be given?

Menu