Questions on UI for ASP.NET MVC Forum

1 answer

139 views

Binding scatterline to local data with date axis does not work

For my data in the following class:

public class MyModel

{

public double Value { get; set; }

public DateTime Date { get; set; }

}

I have a chart with the following configuration:

@(Html.Kendo().Chart<MyModel>()

.Name("MyChart")

.Series(series =>

{

series.ScatterLine(MyIEnumerableData)

.Fields("Date", "Value")

.Style(ChartScatterLineStyle.Smooth)

.Markers(m => m.Visible(false))

.Highlight(h => h.Visible(false))

.Labels(false)

.Name("Series1");

})

.XAxis(x => x

.Date()

.Title(title => title.Text("Date"))

)

.YAxis(y => y

.Numeric()

.Title(title => title.Text("Value"))

)

The axis range is correct, but the line is not displayed.

Examining the data contained in the widget on the page, the Date field is populated with (example): "/Date(1156934074549)/" instead of correctly-formed datetimes.

If I change my model to use a string instead of a datetime, and convert the datetime with .toString("yyyy-MM-dd HH:mm:ss"), the kendo widget appears to understand the data correctly, and it draws the line. This is fine as a workaround, but I should not need to convert the data like this.

Why does the kendo widget not understand datetime data? There is no override when specifying the fields to indicate the data type, and there is no method in the series definition to do this, either.

Chart

answered on 15 Mar 2019

1 answer

89 views

Images in cell

Is there anyway at all to add an image to a cell? We need a logo in the header. If that is not possible if we import one from the server is there a way to keep the image in place that is already there?

Spreadsheet

answered on 12 Mar 2019

6 answers

955 views

ListView inside a client template

I have a Grid with Ajax binding. One of the columns uses a client template with a ListView. Looks like that list view does not get initialized and bound, the grid cell where the ListView should be is rendered empty. The code for ListView is there it just does not get executed apparently. It does work with server-bound grid.

@(

Html.Kendo().Grid<CollegeAnnouncement>().Name("ItemsList2")

.Columns(col =>

{

col.Bound(i => i).ClientTemplate("<input type='checkbox' #if(Active){#checked='checked'#}# />").Title("Active?");

col.Bound(i => i.Heading).Encoded(false);

col.Bound(i => i.StartDate).Format("{0:MM/dd/yyyy}");

col.Bound(i => i.EndDate).Format("{0:MM/dd/yyyy}");

col.Bound(i => i).ClientTemplate(Html.Kendo().ListView<string>()

.Name("ItemRoles#=CollegeAnnouncementID#")

.TagName("div")

.HtmlAttributes(new { @class = "itemRolesList" })

.DataSource(ds => ds.Read(read => read.Action("ItemRolesGet", "CollegeAnnouncements")

.Data("{itemID: #=CollegeAnnouncementID#}"))).ClientTemplateId("roleItemTemplate")

.ToClientTemplate().ToHtmlString());

col.Bound(i => i).ClientTemplate("<a href='" + Url.Action("ItemDelete", new { itemID = "#=CollegeAnnouncementID#" }) + "'>Delete</a>");

})

.DataSource(ds => ds.Ajax().Read(read => read.Action("CollegeAnnouncementsList", "CollegeAnnouncements")).Model(m => m.Id("CollegeAnnouncementID")))

.Pageable()

)

ListView

answered on 12 Mar 2019

5 answers

1.5K+ views

Tooltips on Column Headings

I have a grid, with several columns with headings that are much too long to display. I have overcome this, by using a header template, with a bootstrap tooltip on it.
This works fine, however, if the column is made filterable, the filter icon is displayed in the wrong place, and is also the wrong colour.

col.Bound(o => o.Referral24HrsMedFit).ClientTemplate("#=Referral24HrsMedFit_Glyph#").HeaderTemplate(

"<span data-toggle='tooltip' data-placement='top' title='Referral to all agencies within 24hrs of being medically fit'>Ref..</span>"

);

Is there any way to prevent this?

Grid

answered on 12 Mar 2019

1 answer

92 views

Exel along with template

Current I have something like

.ToolBar(tools =>
{
tools.Excel();
tools.Template(
@<text>
<div class="show-declined-checkbox-group">
<input class="k-checkbox" id="ShowDeclinedItemsCheckBox" name="ShowDeclinedItemsCheckBox" type="checkbox">
<label class="k-checkbox-label" for="ShowDeclinedItemsCheckBox">Show Declined Items</label>
</div>
<div class="show-appoved-checkbox-group">
<input class="k-checkbox" id="ShowApprovedItemsCheckBox" name="ShowApprovedItemsCheckBox" type="checkbox">
<label class="k-checkbox-label" for="ShowApprovedItemsCheckBox">Items to be Approved</label>
<span id="needs-approval-span" class="badge badge-light"></span>
</div>
</text>
);
})

But I don't see the 'Export to Excel' button. Is the template somehow overriding the Excel button? How do I have both the Excel button and a "custom" toolbar?

Thank you

Grid

answered on 12 Mar 2019

6 answers

150 views

TableEditing tool disabled in editor

Working on upgrading to version 2019.1.115. On upgrade it appears that the Table Editor tool is functioning, but the quick select buttons are all disabled (see attached). This also appears to be the case in the demo version on https://demos.telerik.com/aspnet-mvc/editor/all-tools (image also attached). Is there any way to fix this? Is it a known issue? Thanks!

Editor

answered on 12 Mar 2019

7 answers

335 views

Controlling RecurrenceEditor.

Hi there,

I would like to disable or remove the <li> containing the "never" radiobutton, to force the user to set an end for the task. I managed to do this on the edit-event, but only for existing tasks. When I tried to hook the "change"-event of the recurrenceEditor, I couldn't get the selector $(':radio[value="never"]') to work. This part is undocumented, and a bit hard to "guess". Anyone got a hint?

Some example code:

01.<div data-container-for="recurrenceRule" class="k-edit-field">

02. <div data-bind="value:recurrenceRule" id="recurrenceEditorDiv"></div>

03. <script>

04. $(function() {

05. $("\#recurrenceEditorDiv").kendoRecurrenceEditor(

06. {

07. frequencies: ["never", "weekly"],

08. change: function(e) {

09. // This would be nice if it worked

10. var rb = e.container.find(".k-recur-end-never");

11. rb.attr('disabled', 'disabled');

12.

13. // Or this. This works in the grid's "edit"-event

14. var li = e.container.find(".k-recur-end-never")

15. .parent()

16. .parent();

17. li.remove();

18. },

19. messages: {

20. end: {

21. after: " efter ",

22. occurrence: " händelse(r)",

23. label: "Slut",

24. never: " aldrig",

25. on: " på "

26. },

27. frequencies: {

28. weekly: "per vecka",

29. never: "aldrig",

30. },

31. offsetPositions: {

32. first: "första",

33. second: "andra",

34. third: "tredje",

35. fourth: "fjärde",

36. last: "sista"

37. },

38. weekly: {

39. interval: " vecka(or)",

40. repeatEvery: "Intervall",

41. repeatOn: "Dagar "

42. },

43. weekdays: {

44. day: "Dag",

45. weekday: "Veckodag",

46. weekend: "Helgdag"

47. }

48. }

49. });

50. });

51. <\/script>

52.</div>

Scheduler

answered on 12 Mar 2019

2 answers

1.0K+ views

"n is not a constructor"

I am using version 2019.1.220 with Kendo UI for ASP.NET MVC, having upgraded recently from 2016.1.112, and I am now getting a Javascript error: "n is not a constructor". My chart is fairly simple:

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

.Name("AppErrorsChart")

.Title("Error BreakDown By % Frequency?")

.Legend(legend => legend

.Position(ChartLegendPosition.Top)

)

.Series(series =>

{

series.Pie<int>(model => model.Count, model => model.Type)

.Labels(labels => labels

.Visible(true)

.Template("#= category # - #= kendo.format('{0:P}', percentage)#")

);

})

.Tooltip(tooltip => tooltip.Visible(true).Template("#= dataItem.Error# (#= value#)").Color("#FFF"))

.Events(e => e.SeriesClick("onCategorySeriesClick").AxisLabelClick("onCategorySeriesClick")

)

Here is a Dojo that I created that demonstrates this: https://dojo.telerik.com/OBUzIVif

The error is in kendo.web.js, as shown in the attached screenshot.

Please advise on a course of action. Thank you.

Chart

answered on 11 Mar 2019

3 answers

510 views

Why many Web Font Icon showed black triangle?

Hello,

I try to use some web font icons on my project buttons but found many of them showed as same black small triangle. for example 'k-i-search' displayed as expected. but 'k-i-folder-open' and many others always showed as black triangle. Could any one tell me how to resolve the issue?

Thanks.

@(Html.Kendo().Button()
    .Name("search")
    .Tag("span")
    .Content("Search")
    .Icon("k-icon k-i-search") <--Good
)

@(Html.Kendo().Button()
    .Name("open")
    .Tag("span")
    .Content("Open")
    .Icon("k-icon k-i-folder-open") <--showed black triangle
)

Button

answered on 08 Mar 2019

3 answers

379 views

Hierarchical display in a list view

Hi,

I want to display the forum like list view using Telerik Kendo ListView and did not find any proper solution. I did not want to use the hierarchical grid or the treelist view since I did not want to display it like a grid. Please let me know if there is any solution which I can try. I am using the below versions.

IDE: Visual Studio 2015 Professional

.Net Framework : 4.6.2

UI for ASP.NET MVC : 2017.3.1018.545

SQL Server : SQL Server 2016

I want something like the below link. Not exactly the same but wanted to reuse list view with hierarchy.

https://social.msdn.microsoft.com/Forums/vstudio/en-US/6df3b1bc-bbd8-493b-aaf2-26cdb9ee36b9/does-anybody-know-how-to-convert-a-ipicturedisp-to-an-outlook-picture?forum=outlookdev

ListView

answered on 08 Mar 2019