Questions on UI for ASP.NET Core Forum

1 answer

174 views

Combobox in grid sets items to object Object if selectedindex -1

Hello,

So i have this template for a combobox which looks like this:

@model ManTime.Web.ViewModels.TimeReportProjectPropertiesViewModel

@(Html.Kendo().ComboBoxFor(m => m)
.DataValueField("ProjectId")
.DataTextField("ProjectCode")
.Filter("startswith")
.ClearButton(false)
.Suggest(true)
.AutoBind(false)
.BindTo(ViewData["projects"] as IEnumerable))

The ViewModel for the combobox looks like this:

public int ProjectId { get; set; }
public int InvoicingCompanyId { get; set; }
public string ProjectCode { get; set; }

public string InvoicingCompanyName { get; set; }

public string TimeReportApprover { get; set; }

I am displaying this in a grid with the following column structure:

@(Html.Kendo().Grid<TimeReportViewModel>()
.Name("TimeReportsGrid").HtmlAttributes(new { @class = "shadow-sm" })
.Columns(columns =>
{
columns.Command(command => command.Destroy().Text(" ").IconClass("fa fa-trash-alt")).Media("(min-width: 450px)").Width(100);
columns.Command(command => command.Custom("Copy").Text(" ").Click("copyRow").IconClass("fa fa-copy")).Media("(min-width: 768px)").Width(100);
columns.Bound(p => p.ApprovalStatus).Filterable(false).Width(150).Media("(min-width: 450px)");
columns.Bound(p => p.Date).Width(200).Media("(min-width: 450px)");
columns.Bound(p => p.TimeReportProjectProperties).Sortable(false).Filterable(false).Width(180).ClientTemplate("#=TimeReportProjectProperties.ProjectCode#").Media("(min-width: 450px)");
columns.Bound(p => p.InvoicingCompany).Width(250).Sortable(false).Filterable(false).ClientTemplate("#=TimeReportProjectProperties.InvoicingCompanyName#").Media("(min-width: 450px)");
columns.Bound(p => p.Days).Width(100).Sortable(false).Filterable(false).ClientTemplate("#=Days.Days#").Media("(min-width: 450px)");
columns.Bound(p => p.IsBillable).Width(150).Media("(min-width: 450px)");
columns.Bound(p => p.Comment).Media("(min-width: 450px)");
columns.Bound(p => p.Approver).Width(250).ClientTemplate("#=TimeReportProjectProperties.TimeReportApprover#").Media("(min-width: 450px)");
columns.Template("#=resColTemplate(data)#").Title("Time Report").Media("(max-width: 450px)").Width(350);
})

The column " columns.Bound(p => p.TimeReportProjectProperties)" is the combobox-template itself and when the value of this combobox changes it also changes the columns InvoicingCompany and Approver.

To achieve this i have an event for CellClose which refreshes the grid like this "$('#TimeReportsGrid').data('kendoGrid').refresh();". This then updates the values in the grid from the selected value in the clienttemplate combobox.

The problem is that whenever a combobox value is empty (selectedindex -1) it sets all of the comboboxes in the grid value to "object Object" whenever i click on them.

This won't happen if i don't refresh the grid. However i have to refresh the grid to get the updated values on columns InvoicingCompany and Approver when the combobox value changes and cell is closed (CellClosed).

ComboBox

answered on 03 Oct 2018

3 answers

177 views

Donut chart not populating with local data

Passing local data to the chart. I pass the following class to the model of the partial view:

public class DonutChartDetails

{

public string Name { get; set; }

public string Title { get; set; }

public IEnumerable<DashValue> Items { get; set; }

public Boolean ShowLabel { get; set; }

}

public class DashValue

{

[Key]

[Required]

[DisplayName("DashItem")]

public string category { get; set; }

[Required]

[DisplayName("DashValue")]

public decimal value { get; set; }

//[DisplayName("DashDetail")]

//public string dashDetail { get; set; }

}

Here's the code for the chart:

@model DonutChartDetails

<div style="background-color:transparent;">

@(Html.Kendo().Chart(Model.Items)

.Name(Model.Name)

.Title(Model.Title)

.Legend(legend => legend.Position(ChartLegendPosition.Top)

)

.Series(series =>

{

series.Donut(model => model.value, model => model.category);

})

)

</div>

Any ideas as to why no data is showing... The Title is showing.

-Lester

Chart

answered on 01 Oct 2018

1 answer

80 views

Multiple Events in One Day - More

Hi,

I have a few events on one day. In the month view, is there a way to control how many it shows? Also, where do I control what happens when I click the "..." to view more? Thank you.

Scheduler

answered on 01 Oct 2018

1 answer

225 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

79 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

121 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

142 views

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

476 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

816 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