Questions on UI for ASP.NET Core Forum

1 answer

970 views

.Net Core / Rider / Ubuntu

Hello,

I would like use kendo asp.net core on Rider installed on Ubuntu.

is possible ? if no, a version is planned ?

Thanks for answer

General Discussions

answered on 23 Apr 2019

6 answers

1.1K+ views

Category names in line chart with dynamic series

Using this link: https://docs.telerik.com/aspnet-mvc/helpers/chart/how-to/create-dynamic-series#create-view-model-bound-dynamic-series

I managed to get a working chart with multiple series, but I can't get the category names at the same time. From the link it appears that I should be able to provide an IEnumerable (or something?) to give the list of category names (see the commented part in the code I provide below) but when I do this I just get [object] as the result. The data type is a List<string>.

@(Html.Kendo().Chart(Model.ApplicationStepsByDayResults.ValuesForLineChart)

.Name("applicationStepsByDay")

.Legend(legend => legend.Visible(true))

.SeriesDefaults(seriesDefaults =>

seriesDefaults.Line().Style(ChartLineStyle.Smooth)

)

.CategoryAxis(axis => axis

.Categories(Model.ApplicationStepsByDayResults.CategoryNames) // <- from example looks like I can add names here

.MajorGridLines(lines => lines.Visible(false))

)

.Series(series =>

{

foreach(var s in Model.ApplicationStepsByDayResults.ValuesForLineChart)

{

series.Line(s.Points).Name(s.Name);

}

})

.ValueAxis(axis => axis.Numeric()

.Labels(labels => labels.Format("{0}"))

.Line(lines => lines.Visible(false))

)

.Tooltip(tooltip => tooltip

.Visible(true)

.Shared(true)

.Format("{0}")

)

I am not sure how to use the .Categories(a => a.Categories.... to insert the category names when they are dynamic.

As a side note I can get the category names to appear is I create a field for it for each series point and use the .CategoryField(xxx) function when setting up the series but then I lose the data points.

One last question, I would love to be able to see the docs for these functions. Visual studio indicates there are overloads but the UI does not provide them and I can't find any docs on the telerik site. It would be easier to sort this out on my own if there was documentation for the MVC helper methods.

Thanks,

Brian

Chart

answered on 22 Apr 2019

1 answer

318 views

Chart tooltip does not wrap text

Is there anyway to force the text to wrap inside of a chart tool tip? I want to display a system message that is several lines long.

I cant add line break inside the template because i am only displaying one large message.

Placing it inside of a div with a defined width did not change anything.

See dataitem.SystemMessage-

<kendo-chart>

<tooltip template="<div style='word-wrap:break-word;width:auto;word-break:break-all;'>#=dataItem.SystemMessage#</div>" visible="true">

</tooltip>

</kendo-chart>

Example:

https://dojo.telerik.com/umEGOBes/4

Chart

answered on 22 Apr 2019

1 answer

149 views

MVC WriteAction

I have not found documentation on how to use the WriteAction method on your Button. Can you give me a link? I have an MVC application and I'm using a multi-step wizard that utilizes your tab strip to load PartialViews. The final page on this Wizard presents a Save button which should call my Create method on the Controller.

Button

answered on 19 Apr 2019

3 answers

84 views

Bug? when creating new projects

Using Visual Studio 2019, I believe I have encountered a new bug. When I have an existing solution, full of various .NET projects of various types, adding a new Telerik Core Project does not actually create a Telerik project.

To be specific, using the menu Extensions/Telerik/Kendo UI for ASP.NET Core/Create menu item results in the "standard" visual studio template being used. Absolutely zero Kendo/Telerik logic gets added to the resulting project. If I use the new "magic search box", located in middle of top of VS 2019 window, and enter "add new telerik core mvc" the resulting listed items actually take you to the correct launch point. That is to say the resulting project does actually contain the needed references.

While both avenues result in a newly added project to your solution, the second option appears to be the only avenue to using the pre-defined Telerik Template.

In fairness to Telerik this might actually be a Visual Studio bug.

Installer and VS Extensions

answered on 19 Apr 2019

10 answers

1.1K+ views

Complete Custom Filtering Example

Are there any links or code examples that the community could share that shows how to write totally custom column filters?

Better yet, add more content to the bottom of the existing filtering? Grids in this application contain a custom table above the grid with columns that contain list boxes where the user can select one or more items (check boxes)?

Please see attached.

Grid

answered on 19 Apr 2019

2 answers

1.0K+ views

400 Bad Request - Grid AutoBind, read and refresh

I have just started a new contract and althought I am used to using Kendo, this is my first experience using Kendo Core.
Typically I would have my controller, and my action and bind on this using

.DataSource(ds => ds.Read(r => r.Action("RefreshRecommendationGridData", "ReportLookup")))

However the firm that I am at heavily uses routing

[Authorize]

[Route("report-lookups")]

public class ReportLookupController : Controller

{

[AccessRights("Lists")]

[HttpPost]

[Route("report-lesson-recommendations/manage")]

public async Task<IActionResult> RefreshRecommendationGridData([DataSourceRequest] DataSourceRequest request)

{

var result = await _cacheService.SearchForReportLessonRecommendationsAsync(null);

return Json(result.ToDataSourceResult(request));

}

When attempting this and looking through developer tools and the network and when using

.DataSource(ds => ds.Read(r => r.Url("manage"))

I get a 400 Bad Reqest error.

I guess I am missing something, however what that is I am at a complete loss. I suspect its something quite simple, however, I cannot find anything on Telerik site that will help.

When inspecting the headers in Fiddler, I cant see anything wrong.

Grid

answered on 19 Apr 2019

4 answers

153 views

Line Chart Categories Not Displaying Correctly

Hello,

I'm trying to get my chart to display correctly. However, it seems the categories are not correct. Here is my code:

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

.Name("applicationStepsByDay")

.Legend(legend => legend.Visible(true))

.SeriesDefaults(seriesDefaults =>

seriesDefaults.Line().Style(ChartLineStyle.Smooth)

)

.CategoryAxis(axis => axis

.Categories(Model.Categories)

.MajorGridLines(lines => lines.Visible(false))

)

.Series(series =>

{

foreach (var s in Model.CDashBoardLineCounts)

{

 series.Line(model => model.countofitems)

                           .Name(s.dashcolor)

                .CategoryField("dateofCItem");

}

})

.ValueAxis(axis => axis.Numeric()

.Labels(labels => labels.Format("{0}"))

.Line(lines => lines.Visible(false))

)

.Tooltip(tooltip => tooltip

.Visible(true)

.Shared(true)

.Format("{0}")

)

public IActionResult Index()

{

CombinedDashBoard x = new CombinedDashBoard();

x.CDashBoardLineCounts = GetAllLineChartDetails();

x.Categories = new string[] { "Green", "Red", "Yellow" };

return View(x);

}

public class CombinedDashBoard

{

public List<CDashBoardModifiedPieCounts> CDashBoardPieCounts { get; set; }

public List<CDashBoardModifiedLineCounts> CDashBoardLineCounts { get; set; }

public string[] Categories { get; set; }

}

public class CDashBoardModifiedLineCounts

{

public string dashcolor { get; set; }

public string CItemName { get; set; }

public DateTime dateofCItem { get; set; }

public int countofitems { get; set; }

}

I would like to get a line in the chart for Red (that shows count of items that have the color red mapped to the dates), another line that shows all green items mapped to date per count and one for yellow.

Instead I'm getting the chart image attached

Thank you for your time

Chart

answered on 18 Apr 2019

1 answer

1.1K+ views

Autobind Grid to MVC with Route

Hi,

I have just started a new contract with a new company and my previous experience with Kendo MVC was with MVC 5 rather than Core. The other difference is that the company I am at is heavily using Routes, rather than the action and the controller in the URL to determine where the user goes \ what URL they see.

An issue that I have is that currently the action passes a model back to the view and the grid is databound with this a list that is returned from the mode. On click of a row a modal window is opened, with data that can be edited, and then on save \ formAction the posts the data, and then the method redirects to action and the page reloads in order ot refresh the grid.

What I want to acheive is to refresh the grid on modal \ window close so that we dont have to post back.

My View as it stands is

<div class="container-fluid" accessrights-modify>

<div class="btn-toolbar mb-3" role="toolbar">

<div accessrights-create class="btn-group float-right mr-2" role="group">

<button class="btn btn-primary" id="btnCreate">Create New</button>

</div>

@(Html.Kendo().Grid(Model.ReportLessonRecommendation)

.Name("listGrid")

.Columns(columns =>

{

columns.Bound(c => c.Description)

.ClientHeaderTemplate("Description");

columns.Bound(c => c.Active)

.ClientTemplate("#if(Active) {# <i class='fas fa-check'></i> # } else {# <i class='fas fa-times'></i> #} #")

.ClientHeaderTemplate("Active")

.HtmlAttributes(new { @class = "text-center" })

.Width(100);

})

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(true)

.ButtonCount(5))

.Sortable()

.Filterable()

//.Groupable()

                          .NoRecords(n => n.Template("<p>There are no records to display.</p>"))

.HtmlAttributes(new { style = "width:100%;" })

.Selectable(selectable => selectable

.Mode(GridSelectionMode.Single)

.Type(GridSelectionType.Row))

.Events(events => events

.Change("onChange")

)

.Pageable(p =>

{

p.PageSizes(new[] { 5, 10, 30, 50, 100 });

})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(50)

.ServerOperation(false)

)

@(Html.Kendo().Window()

.Name("modalRecommendationsWindow")

.Modal(true)

.Visible(false)

.MinWidth(750)

.Events(evt => evt.Close("onClose"))

.Content(@<text><div id="modalRecommendationsContent"></div></text>)

)

</div>

typically I would do a Read Action in the DataSource and direct it to my controller and my action and return a DataSourceRequest and would be something like this

<div class="container-fluid" accessrights-modify>

<div class="btn-toolbar mb-3" role="toolbar">

<div accessrights-create class="btn-group float-right mr-2" role="group">

<button class="btn btn-primary" id="btnCreate">Create New</button>

</div>

@(Html.Kendo().Grid<ReportLessonRecommendation>()

.Name("listGrid")

.Columns(columns =>

{

columns.Bound(c => c.Description)

.ClientHeaderTemplate("Description");

columns.Bound(c => c.Active)

.ClientTemplate("#if(Active) {# <i class='fas fa-check'></i> # } else {# <i class='fas fa-times'></i> #} #")

.ClientHeaderTemplate("Active")

.HtmlAttributes(new { @class = "text-center" })

.Width(100);

})

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(true)

.ButtonCount(5))

.Sortable()

.Filterable()

//.Groupable()

.AutoBind(true)

.NoRecords(n => n.Template("<p>There are no records to display.</p>"))

.HtmlAttributes(new { style = "width:100%;" })

.Selectable(selectable => selectable

.Mode(GridSelectionMode.Single)

.Type(GridSelectionType.Row))

.Events(events => events

.Change("onChange")

)

.Pageable(p =>

{

p.PageSizes(new[] { 5, 10, 30, 50, 100 });

})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(50)

.ServerOperation(false)

.Read(r => r.Action("actionName", "controller"))

)

@(Html.Kendo().Window()

.Name("modalRecommendationsWindow")

.Modal(true)

.Visible(false)

.MinWidth(750)

.Events(evt => evt.Close("onClose"))

.Content(@<text><div id="modalRecommendationsContent"></div></text>)

)

</div>

The controller is

[Route("report-lookups")]

public class ReportLookupController : Controller

{

...

}

and Method I want to his is

[AccessRights("Lists")]

[HttpGet]

[Route("report-lesson-recommendations/refresh")]

public async Task<IActionResult> RefreshRecommendations([DataSourceRequest]DataSourceRequest request)

{

var result = await _cacheService.SearchForReportLessonRecommendationsAsync(null);

return Json(result.ToDataSourceResult(request));

}

when trying to AutoBind, and refresh and dataSource.Read() this method isnt hit however I try and do it.

Any and all help will be very much appreicated.

Thanks

Simon

Grid

answered on 18 Apr 2019

4 answers

536 views

Aggregate average that excludes DataItem = 0

Is there any functionality or does anyone have a workaround so that when a grid aggregate average is calculated, it does not include those items that have a "zero" value. The field being aggregated is a of type "double" and cannot be null or empty. However, zero is basically treated in this grid as "user hasn't enter a value yet". Any help appreciated.

Grid

answered on 17 Apr 2019