Telerik Forums
UI for ASP.NET Core Forum
8 answers
738 views

NetCore 3.0.0-preview3-27503-5 
Telerik.UI.for.AspNet.Core Nuget package v2019.1.412-internal
Visual Studio 2019 v16.0.1

I have a view with multiple line charts, bar charts and pie charts. I have a view model that contains the data for each graph as well as labels and colours. I am using DataSource read and passing an extra parameter which is a date from a kendo date picker control. The controller function is correctly called and the view model populated and returned. I can see from the visual studio output window that there are no errors and using the Network tab in Chrome developer tools the data is correctly returned with a status 200. However when i change the date to a month where i have no data the graph is refreshed once when the date picker is closed and once again when i think it should be populated with the updated view model returned from the read. However the graph shows the previous data. Again using the Network tab I can see that the data is nulls as expected. I have included my code below. Looking at the examples, mostly which are for the Grid control, they return a list from the controller function and use the ToDataSourceResult() function. I have tried return Json(new [] {vm}.ToDataSourceResult()); with no success. Could you explain where I am going wrong

 

The attached image shows the data returned for March but the partial graph still showing the data for April

<!-- view snippet -->
<div class="row">
    <div class="col-12 col-sm-4 col-md-3 col-md-2">
        <div id="month" class="k-content">
            <h5 style="margin-top: 2em;">Select month:</h5>
            @(Html.Kendo().DatePicker()
              .Name("monthpicker")
              .Start(CalendarView.Year)
              .Depth(CalendarView.Year)
              .Format("MMMM yyyy")
              .Events(e => e.Change("monthpickerChange"))
              .Max(DateTime.Now)
              .Value(value)
              .Footer(false)
              .HtmlAttributes(new { style = "width: 100%", title = "monthpicker" })
            )
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12 col-sm-12">
        <div class="k-content wide">
            @(Html.Kendo().Chart<CustomerSurveyViewModel>()
                .Name("chartMonthlyRatings")
                .Title($"Ratings for {DateTime.Now.ToString("MMMM, yyyy")}")
                .Legend(legend => legend
                    .Position(ChartLegendPosition.Bottom)
                )
                .DataSource(datasource =>
                {
                    datasource.Read(read =>
                    {
                        read.Action("GetRatingsForMonth", "Home").Data("getMonthDate");
                    });
                })
                .ChartArea(chartArea => chartArea
                    .Background("transparent")
                )
                .SeriesDefaults(seriesDefaults =>
                    seriesDefaults.Line().Style(ChartLineStyle.Smooth)
                )
                .Series(series =>
                {
                    series.Line(Model.MonthRatings1).Name(Model.Names[0]);
                    series.Line(Model.MonthRatings2).Name(Model.Names[1]);
                    series.Line(Model.MonthRatings3).Name(Model.Names[2]);
                    series.Line(Model.MonthRatings4).Name(Model.Names[3]);
                    series.Line(Model.MonthRatings5).Name(Model.Names[4]);
                })
                .SeriesColors(Model.Colours.ToArray<string>())
                .CategoryAxis(axis => axis
                    .Categories("01", "02", "03", "04", "05", "06", "07", "08", "09", "10",
                                "11", "12", "13", "14", "15", "16", "17", "18", "19", "20",
                                "21", "22", "23", "24", "25", "26", "27", "28", "29", "30",
                                "31")
                    .MajorGridLines(lines => lines.Visible(false))
                )
                .ValueAxis(axis => axis
                    .Numeric().Labels(labels => labels.Format("{0}"))
                    .Line(line => line.Visible(false))
                    .AxisCrossingValue(0)
                )
                .Tooltip(tooltip => tooltip
                    .Visible(true)
                    .Format("{0}")
                )
            )
        </div>
    </div>
</div>

        [HttpPost]
        public async Task<IActionResult> GetRatingsForMonth(DateTime dateSelected)
        {
            int daysInMonth = DateTime.DaysInMonth(dateSelected.Year, dateSelected.Month);
            var existingEntries = await firebaseClient.Child("CustomerSurveys")
                                                      .OrderByKey()
                                                      .OnceAsync<CustomerSurvey>();

            var data = existingEntries.Where(x => (x.Object.TimeStamp.Month == dateSelected.Month &&
                                                   x.Object.TimeStamp.Year == dateSelected.Year))
                                      .Select(x => x.Object);

            CustomerSurveyViewModel vm = new CustomerSurveyViewModel();
            for (int i = 1; i <= daysInMonth; i++)
            {
                var count = data.Where(x => (x.Rating == 1 && (int)x.TimeStamp.Day == i)).Select(x => x).Count();
                if (count > 0)
                    vm.MonthRatings1.Add(count);
                else
                    vm.MonthRatings1.Add(null);
            }
            for (int i = 1; i <= daysInMonth; i++)
            {
                var count = data.Where(x => (x.Rating == 2 && (int)x.TimeStamp.Day == i)).Select(x => x).Count();
                if (count > 0)
                    vm.MonthRatings2.Add(count);
                else
                    vm.MonthRatings2.Add(null);
            }
            for (int i = 1; i <= daysInMonth; i++)
            {
                var count = data.Where(x => (x.Rating == 3 && (int)x.TimeStamp.Day == i)).Select(x => x).Count();
                if (count > 0)
                    vm.MonthRatings3.Add(count);
                else
                    vm.MonthRatings3.Add(null);
            }
            for (int i = 1; i <= daysInMonth; i++)
            {
                var count = data.Where(x => (x.Rating == 4 && (int)x.TimeStamp.Day == i)).Select(x => x).Count();
                if (count > 0)
                    vm.MonthRatings4.Add(count);
                else
                    vm.MonthRatings4.Add(null);
            }
            for (int i = 1; i <= daysInMonth; i++)
            {
                var count = data.Where(x => (x.Rating == 5 && (int)x.TimeStamp.Day == i)).Select(x => x).Count();
                if (count > 0)
                    vm.MonthRatings5.Add(count);
                else
                    vm.MonthRatings5.Add(null);
            }

            return Json(vm);
        }

 

// View Model
    public class CustomerSurveyViewModel
    {
        public List<int> BeginningOfTime { get; set; } = new List<int>();

        public List<int?> ThisWeeksRatings1 { get; set; } = new List<int?>();
        public List<int?> ThisWeeksRatings2 { get; set; } = new List<int?>();
        public List<int?> ThisWeeksRatings3 { get; set; } = new List<int?>();
        public List<int?> ThisWeeksRatings4 { get; set; } = new List<int?>();
        public List<int?> ThisWeeksRatings5 { get; set; } = new List<int?>();

        public List<int?> LastWeeksRatings1 { get; set; } = new List<int?>();
        public List<int?> LastWeeksRatings2 { get; set; } = new List<int?>();
        public List<int?> LastWeeksRatings3 { get; set; } = new List<int?>();
        public List<int?> LastWeeksRatings4 { get; set; } = new List<int?>();
        public List<int?> LastWeeksRatings5 { get; set; } = new List<int?>();

        public List<int?> DateRatings1 { get; set; } = new List<int?>();
        public List<int?> DateRatings2 { get; set; } = new List<int?>();
        public List<int?> DateRatings3 { get; set; } = new List<int?>();
        public List<int?> DateRatings4 { get; set; } = new List<int?>();
        public List<int?> DateRatings5 { get; set; } = new List<int?>();

        public List<int?> MonthRatings1 { get; set; } = new List<int?>();
        public List<int?> MonthRatings2 { get; set; } = new List<int?>();
        public List<int?> MonthRatings3 { get; set; } = new List<int?>();
        public List<int?> MonthRatings4 { get; set; } = new List<int?>();
        public List<int?> MonthRatings5 { get; set; } = new List<int?>();

        public List<int?> YearRatings1 { get; set; } = new List<int?>();
        public List<int?> YearRatings2 { get; set; } = new List<int?>();
        public List<int?> YearRatings3 { get; set; } = new List<int?>();
        public List<int?> YearRatings4 { get; set; } = new List<int?>();
        public List<int?> YearRatings5 { get; set; } = new List<int?>();

        public List<string> Categories { get; set; } = new List<string>();
        // colours
        public List<string> Colours { get; set; } = new List<string>();
        // names
        public List<string> Names { get; set; } = new List<string>();


        public CustomerSurveyViewModel()
        {
            Colours.Add("#E21E2B");
            Colours.Add("#F4572E");
            Colours.Add("#FCB040");
            Colours.Add("#91CA61");
            Colours.Add("#3DB449");

            Names.Add("Extremely Disatisfied");
            Names.Add("Not Happy");
            Names.Add("Neutral");
            Names.Add("Happy");
            Names.Add("Very Happy");
        }
    }

        function monthpickerChange(e) {
            var date = this.value();
            var chart = $("#chartMonthlyRatings").data("kendoChart");
            chart.setOptions({
                title: {
                    text: "Ratings for " + moment(date).format("MMMM, YYYY")
                }
            });
            chart.dataSource.read();
            chart.dataSource.refresh();     // not sure if i need refresh or if read is enough
        }

        function getMonthDate() {
            var datepicker = $("#monthpicker").data("kendoDatePicker");
            var date = datepicker.value();
            return { dateSelected: date.toISOString() };
        }

Derek
Top achievements
Rank 1
 answered on 28 Apr 2019
3 answers
79 views

      when moving the mouse above the datapoint of the chart,the tooltip will be  display in the right or up position,

and then if moving mouse to the right or up,if the mouse is above the tooltip area,
the mouse can't perceivel the next datapoint of chart,unless the mouse leave the tooltip area.
if the tooltip area don't effect the mouse check the other datapoint,so that switch to the other tooltip info,
it will be better.

Tsvetina
Telerik team
 answered on 26 Apr 2019
5 answers
1.9K+ views

I know this has been asked before and referenced in regard to jquery (https://www.telerik.com/forums/different-color-for-each-bar-in-bar-chart-for-a-single-series-) as well as others but I can't seem to figure out how to do it in Core.   I have a simple Column chart from bound sql datasource.   Is it possible to set the category columns to different colors?  Note that the number of categories is variable.

Here is my controller action:

public ActionResult AttributeSummary_Read(int? id)
{
    {
        var assessmentId = new SqlParameter("@assessmentId", id);
        var data = _context.Reports.FromSql("rpt_AttributeSummaryBySite @assessmentId", assessmentId).AsNoTracking().ToList();
        List<Report_AttributeSummaryVM> AttributeSummaryList = data.Select(x => new Report_AttributeSummaryVM
        {
            AttributeName = x.AttributeName,
            SumAssessmentValue = x.SumAssessmentValue,
            AssessmentYear = x.AssessmentYear
        }).ToList();
 
        return Json(AttributeSummaryList);
    }

 

As an example with 3 categories, my stored proc produces this data:

OutcomeName                    |       AssessmentYear      |         AvgOutcomeValue
Best Practices in Ministry                   2019                                     5.16
Leadership Development                   2019                                        6
Strategic Alignment of Ministries        2019                                     4.59

 

Here is the Razor View

<div class="container w-75">
    <div class="demo-section k-content wide">
        @(Html.Kendo().Chart<ICPCore.Models.Reports>()
            .Name("chartOutcomeSummary")
            .Title("Outcomes Summary by Site")
            .Legend(legend => legend
                .Position(ChartLegendPosition.Top)
            )
            .DataSource(ds => ds.Read(read => read.Action("OutcomeAreaSummary_Read", "Reports").Data("curId")))
            .Series(series =>
            {
                series.Column(model => model.AvgOutcomeValue).Name("AvgOutcomeValue").CategoryField("OutcomeName");
            })
            .CategoryAxis(axis => axis
                .Categories(model=>model.OutcomeName)
                .Labels(labels => labels.Rotation(0))
                .MajorGridLines(lines => lines.Visible(false))
            )
            .ValueAxis(axis => axis.Numeric()
                .Labels(labels => labels.Format("{0:N0}"))
                .MajorUnit(1)
                .Max(10)
                .Min(1)
                .Line(line => line.Visible(false))
            )
            .Tooltip(tooltip => tooltip
                .Visible(true)
                .Format("{0:N0}")
            )
            .AutoBind(true)
        )
    </div>
</div>
Tsvetina
Telerik team
 answered on 25 Apr 2019
1 answer
977 views

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

n/a
Top achievements
Rank 1
 answered on 23 Apr 2019
6 answers
1.1K+ views

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

 

 

Tsvetina
Telerik team
 answered on 22 Apr 2019
1 answer
325 views

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

Tsvetina
Telerik team
 answered on 22 Apr 2019
1 answer
152 views
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.
Veselin Tsvetanov
Telerik team
 answered on 19 Apr 2019
3 answers
84 views

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.

Nikola
Telerik team
 answered on 19 Apr 2019
10 answers
1.1K+ views
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.
Konstantin Dikov
Telerik team
 answered on 19 Apr 2019
2 answers
1.0K+ views

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. 


Viktor Tachev
Telerik team
 answered on 19 Apr 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?