Telerik Forums
UI for ASP.NET Core Forum
1 answer
103 views

Hi

I have a custom editable template and i would like to the owner to default owner, no selection. I have below code in the custom template but the value is not posted back to server during ajax call.  can someone advice ?

 

<div data-container-for="OwnerName" class="k-edit-field" id="owner">
    <input type="text" class="k-input k-textbox" name="ownername" id="ownername" data-bind="value:OwnerName" disabled>
    <input type="hidden" name="ownerId" data-bind="value:OwnerID" id="ownerId">
</div>

<script>

    $(function () {

        if (!$("\\\#title").val()) {
            var viewModel = kendo.observable({
                OwnerName: "Tester",
                ownerId: "TS0001"
            });
            kendo.bind($("\\\#owner"), viewModel);
        }

    });

</script>

Jimmy
Top achievements
Rank 1
Iron
Veteran
 answered on 30 Apr 2019
2 answers
148 views

Hello,

I get an error when trying to add Microsoft.AspNetcore.Mvc.Razor.RuntimeCompilation to my project to re-enable this feature which was removed from the base package. Attached is the error I am receiving.

Thanks,

Scott

Scott
Top achievements
Rank 1
 answered on 29 Apr 2019
5 answers
195 views

PivotGrid/TreeList control:

Expand/collapse button's mouseover  cursor is text style,not arrow or hand icon,like the treeview control/grid control

Preslav
Telerik team
 answered on 29 Apr 2019
3 answers
1.6K+ views
I am looking for a straightforward way to replace the update buttons with an icon only edit and delete button. I don't want to use font awesome icons I have a png I want to use (see attached.) and I want no text. The icons are round and fit within my theme.
Tsvetomir
Telerik team
 answered on 29 Apr 2019
3 answers
319 views

The current examples available online to implement an ImageBrowserController by extending EditorImageBrowserController do not work. Is there any documentation available for hooking this up for .NET Core?

 

Thank you.

Joana
Telerik team
 answered on 29 Apr 2019
15 answers
155 views

Hello Telerik community,

In the application I'm building I am trying to implement the Telerik UI Editor. While the size and position of the editor itself is completely fine, I seem to get some problems when trying to open some of it's tools which are connected to dropdown sections. These happen when using the tools 'formatting' and also when accesing the three-dotted "more tools" button.

I found online that it could maybe be caused by the jQuery version I'm using, so I tried updating to jQuery 3.3.1, but without luck unfortunately.

I am only getting this problem with Internet Explorer 11. Chrome or even simulating IE 10 seem to work fine.

I'm using ASP.NET Core 2.1. jQuery version 3.3.1. Kendo UI for ASP.NET Core.

I tried the implementation of the demo given here: https://demos.telerik.com/aspnet-core/editor/index.

I have tried both turning 'Resizable' true or false.

I also read that the positioning is caused by the scrollbar, which is true for me. However I don't know how to solve this, since the solution was to upgrade jQuery.

For my lay-out I'm using CSS Grid in combination with Flexbox.

 

Here's the code snippet of the Telerik editor implementation.

@(Html.Kendo().Editor()
                  .Name("editor")
                  .HtmlAttributes(new {style = "height:440px", aria_label = "editor"})
                  .Resizable(resizable => resizable.Toolbar(true).Content(true))
                  .ImageBrowser(imageBrowser => imageBrowser
                      .Image("~/images/{0}")
                      .Read("Read", "ImageBrowser")
                      .Create("Create", "ImageBrowser")
                      .Destroy("Destroy", "ImageBrowser")
                      .Upload("Upload", "ImageBrowser")
                  )
                  .Value(@<text>
                             <p>
                                 Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br/>
                                 In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
                                 and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows
                                 accessibility standards and provides API for content manipulation.
                             </p>
                             <p>Features include:</p>
                             <ul>
                                 <li>Text formatting & alignment</li>
                                 <li>Bulleted and numbered lists</li>
                                 <li>Hyperlink and image dialogs</li>
                                 <li>Cross-browser support</li>
                                 <li>Identical HTML output across browsers</li>
                                 <li>Gracefully degrades to a <code>textarea</code> when JavaScript is turned off</li>
                             </ul>
                             <p>
                                 Read <a href="http://docs.telerik.com/kendo-ui">more details</a> or send us your
                                 <a href="http://www.telerik.com/forums">feedback</a>!
                             </p>
                          </text>)
                  )

 

Here are some screenshot of the problem:

 

Joran
Top achievements
Rank 1
 answered on 29 Apr 2019
1 answer
121 views

Hi,

I have a async  upload control as shown below. It's on a razor page. I also have a couple of dropdownlists. When my SaveTraitFiles function is called, I need the bound value of the dropdown's selected value in my function. Right now it's always zero because of the async on the upload. If I remove the asyc and just process uploaded files on a submit, I get the desired value from the dropdown's bound property. Is there some magic sauce that I need to pour on this to get the async upload to get receive bound values of other controls?

Thanks ... Ed

 

 

@(Html.Kendo().Upload()
    .Name("traitFiles")
    .Async(a => a
        .SaveUrl("/Admin/UploadCertFiles?handler=SaveTraitFiles")
        .RemoveUrl("/Admin/UploadCertFiles?handler=RemoveTraitFiles")
        .AutoUpload(true))
    .Validation(v => v.AllowedExtensions(new string[] { ".pdf", ".jpg" }))
 
)
Joana
Telerik team
 answered on 29 Apr 2019
8 answers
725 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
77 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
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?