Questions on UI for ASP.NET Core Forum

1 answer

67 views

The lines on the chart are not the same color as the landmarks

currently i have a chart line and i have specified the color for each element in it from the store proc , but for some reason the lines connecting the timelines on the chart are different colors , only the The dot right at the landmark is the correct color I specified.
Here is my code

 @(Html.Kendo().Chart<Commsights.Data.DataTransferObject.DashbroadDataTransfer>()
                                                                .Name("LineChart_Customer_Processed")
                                                                .DataSource(dataSource => dataSource
                                                                .Read(read => read.Action("Chart_CountData_DaXuLyTolist", "Dashbroad").Data("FilterCompany"))
                                                                .Group(group => group.Add(model => model.CompanyName))
                                                                .Sort(sort => sort.Add(model => model.DatePublish).Ascending())
                                                                )
                                                                .Events(events => events.SeriesClick("onSeriesClick"))
                                                                .Theme("material")
                                                                .Series(series =>
                                                                {
                                                                    series.Line(model => model.ID_Count)
                                                                    .Name("#= group.value #")
                                                                    .Style(ChartSeriesStyle.Smooth)
                                                                    .CategoryField("DatePublish")
                                                                    .Tooltip(tooltip => tooltip
                                                                    .Visible(true)
                                                                    .Template("#= kendo.toString(category, 'MM/dd') # - #= value # (#= series.name # Article)"))
                                                                    .Width(3).Opacity(0.6)
                                                                   .ColorField("Color");
                                                                })
                                                                .Legend(legend => legend
                                                                .Position(ChartLegendPosition.Bottom)
                                                                )
                                                                .ValueAxis(axis => axis.Numeric()
                                                                .Labels(labels => labels
                                                                .Format("{0}")
                                                                .Skip(2)
                                                                .Step(2)
                                                                )
                                                                )
                                                                .CategoryAxis(axis => axis
                                                                .BaseUnit(ChartAxisBaseUnit.Days)
                                                                .Labels(labels => labels
                                                                .DateFormats(formats => formats.Months("MM/dd"))
                                                                .Rotation(-45)
                                                                )
                                                                )
                                                                .HtmlAttributes(new { style = "width: 100%; height: 400px;" })
                                                                )

Please help me!

Chart

answered on 23 Jun 2023

2 answers

185 views

how to change line color in linechart when dots and line color are not the same

here is my code

@(Html.Kendo().Chart<Commsights.Data.DataTransferObject.DashbroadDataTransfer>()
                                                                .Name("LineChart_Customer_Processed")
                                                                .DataSource(dataSource => dataSource
                                                                .Read(read => read.Action("Chart_CountData_DaXuLyTolist", "Dashbroad").Data("FilterCompany"))
                                                                .Group(group => group.Add(model => model.CompanyName))
                                                                .Sort(sort => sort.Add(model => model.DatePublish).Ascending())
                                                                )
                                                                .Events(events => events.SeriesClick("onSeriesClick"))
                                                                .Theme("material")
                                                                .Series(series =>
                                                                {
                                                                    series.Line(model => model.ID_Count)
                                                                    .Name("#= group.value #")
                                                                    .Style(ChartSeriesStyle.Smooth)
                                                                    .CategoryField("DatePublish")
                                                                    .Tooltip(tooltip => tooltip
                                                                    .Visible(true)
                                                                    .Template("#= kendo.toString(category, 'MM/dd') # - #= value # (#= series.name # Article)"))
                                                                    .Width(3).Opacity(0.6)
                                                                   .ColorField("Color");
                                                                })
                                                                .Legend(legend => legend
                                                                .Position(ChartLegendPosition.Bottom)
                                                                )
                                                                .ValueAxis(axis => axis.Numeric()
                                                                .Labels(labels => labels
                                                                .Format("{0}")
                                                                .Skip(2)
                                                                .Step(2)
                                                                )
                                                                )
                                                                .CategoryAxis(axis => axis
                                                                .BaseUnit(ChartAxisBaseUnit.Days)
                                                                .Labels(labels => labels
                                                                .DateFormats(formats => formats.Months("MM/dd"))
                                                                .Rotation(-45)
                                                                )
                                                                )
                                                                .HtmlAttributes(new { style = "width: 100%; height: 400px;" })
                                                                )

I used colorfield() to specify the color of the elements on the chart but I don't understand why the dots at the landmarks are the correct color I specified to load from the store proc, but the lines connect them together wrong color.
Pls help me.

Chart

answered on 22 Jun 2023

1 answer

748 views

How do I get the Thumbnail for the Images?

I am using the Image Browser in Kendo Editor for our Razor Pages and the images we upload are stored to a blob. But When I try to get the thumbnail using transport.thumbnail all I see is a loading wheel on the k-file-preview.
How do I get the thumbnail as a image preview instead of the spinning wheel.

Say I am uploading an Image - k-file-preview shows this link --> https://demos.telerik.com/aspnet-mvc/imagebrowser/thumbnail?path=thumbnail1.jpg
and upon insert the image into the editor the image url shows as --> https://demos.telerik.com/aspnet-mvc/content/userfiles/images/thumbnail1.jpg

does this mean we have thumbnails for the uploaded image stored in another folder, and upon calling thumbnail path it looks for the path n gives the preview??

then again for asp .net core i see k-listview-item i do not see a k-file-preview but on asp .net mvc and for jQuery I can see the thumbnail on demo --> https://demos.telerik.com/aspnet-mvc/editor/imagebrowser

Editor

answered on 20 Jun 2023

1 answer

881 views

Merge cells in a kendoGrid.

Hello good day.

I have a KendoGrid where there are two rows for each record, the first two fields are repeated, I would like to merge two cells and make a single row with them, but the rest of the fields belonging to those records remain in their two different rows.

I show how it looks right now:

I show how I want it to look:

Thank you so much.

Grid

answered on 20 Jun 2023

1 answer

338 views

Set DataSource to Razor page model

Hi, I want to create a shared data source that I can then apply filtering to. This data source should be initialised from a property on the Razor page model.

With a Grid you can do this:

Html.Kendo().Grid(Model.Devices)

But I can't figure out the equivalent for the DataSource. This is not allowed...

Html.Kendo().DataSource<DeviceAggregate>(Model.Devices)
.Name("devicesDataSource")

Grid

answered on 19 Jun 2023

1 answer

217 views

How should icons be referenced in SASS based UI for ASP.NET Core builds in FileManager custom toolbar commands - old textual icon name not working in 2023.2.606.

We have a custom command in a UI for ASP.NET Core FileManager control that states the icon as a simple textual name which worked fine in 2023.1.117

items.Add("").Type("button").Name("refresh").Icon("reload").Text("Refresh").Click("onRefresh").HtmlAttributes(new { style = "margin-left: 5px;" });

After upgrading to 2023.2.606 the icon no longer shows so am curious how the icon should now be referenced. I've tried using k-svg style class names but to no avail and even using SpriteCssClass with FontAwesome classes is not working. Could the Custom Command demo for the FileManager be tweaked to show a custom command with a custom icon in the manner that is required for the new SASS + FontIcon + SvgIcon based builds of UI for ASP.NET Core.

FileManager

answered on 19 Jun 2023

1 answer

158 views

Kendo grid not show data - Asp net core

Hi All,
I have a problem. I've a not working grid. I do a compilated query for get the data but the data never gets loaded in the grid.

What is the error? Thanks in advance for any help.

Content of controller
using DataLayerIAccess.Repository;
using DataLayerIAccess.Repository.Queries;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using Microsoft.AspNetCore.Mvc;
using System.Linq;
using System.Threading.Tasks;
using WebViewerIAccess.Models;

namespace WebViewerIAccess.Controllers
{
public class GridController : Controller
{
private readonly IAccessDbContext _context;

public GridController(IAccessDbContext context)
=> _context = context;

public async Task<IActionResult> ElencoPresenze_Read([DataSourceRequest] DataSourceRequest request)
{
var elencoPresenze = (await _context.GetElencoPresenze(0, 10)).ToList();
var presenzeViewModel = Utilities.MapFromAType<PresenzeModel>(elencoPresenze);

var dsResult = presenzeViewModel.ToDataSourceResult(request);
return Json(dsResult);
}

Content of .cshtml

@{
ViewData["Title"] = "Presenze";
}

<div class="text-center">
@(Html.Kendo().Grid<WebViewerIAccess.Models.PresenzeModel>()
.Name("grid")
.Columns(c => {
c.Bound(p => p.ID);
c.Bound(p => p.Nome);
c.Bound(p => p.Cognome);
c.Bound(p => p.Giorno);
c.Bound(p => p.Reparto);
}) .Pageable(p => p
.PageSizes(new[] { 10, 20, 50 })
.Refresh(true)
.Responsive(true))
.Sortable()
.Filterable()
.Scrollable()
.Groupable()
.DataSource(ds => ds
.Ajax()
.Batch(true)
.PageSize(20)
.AutoSync(true)
.ServerOperation(false)
.Events(e => e.Error("error_handler"))
.Model(m => {
m.Field(p => p.ID);
m.Field(p => p.Nome);
m.Field(p => p.Cognome);
})
.AutoSync(true)
.Read(r => r.Action("ElencoPresenze_Read", "Grid"))
</div>

<script type="text/javascript">
function error_handler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}
</script>

Content of Model
using System;

namespace WebViewerIAccess.Models
{
public class PresenzeModel
{
public int ID { get; set; }
public string Nome { get; set; }
public string Cognome { get; set; }
public DateTime Giorno { get; set; }
public string Reparto { get; set; }
}
}

thank you

Grid

answered on 16 Jun 2023

1 answer

144 views

Binding the Scheduler control to an existing API data source?

I am relatively new to ASP.Net core (.net6) and I am trying to bind the Kendo scheduler with my existing data source.

Background: I am tasked with replacing outdated javascript tools for our "shipping scheduler", which is very similar to the Telerik Scheduler Timeline view.

Here is an example of what I am trying to achieve...

The data source is a simple API source from the web (for example https://mydomain.com/datasource), with the following structure:

namespace ShippingSchedulerApp.Models
{
    public class SchedulerEvent
    {
        public long ID { get; set; }
        public DateTime? start_date { get; set; }
        public DateTime? end_date { get; set; }
        public string? text { get; set; }
        public string? shipclass { get; set; }
        public decimal? beam { get; set; }
        public string? sectionID { get; set; }
        public string? flag { get; set; }
        public string? country { get; set; }
        public string? visitnumber { get; set; }
        public int? visitid { get; set; }
        public int? imo { get; set; }
        public string? details { get; set; }
        public string? cargo { get; set; }
        public decimal? duration { get; set; }
        public decimal? loa { get; set; }
        public string? stevedore { get; set; }
    }
}

If someone could point me to a demo or a sample way of connecting the above to the Telerik Scheduler Timeline view, that would be great.

Thanks

Scheduler

Timeline

answered on 15 Jun 2023

5 answers

315 views

Getting started

I find myself having a heck of a time getting started with the scheduler. Is there a SIMPLE getting started example that explains how to use the scheduler? All I am looking to do is to have a monthly view and be able to display availability of items. An item could be, for example, a room at a hotel. I won't be doing anything more granular than day level scheduling. I want to block out a date on the calendar for an item. That's it. Once I can figure out how to do that, I can dig deeper myself.

Any guidance would be greatly appreciated.

Scheduler

answered on 15 Jun 2023

0 answers

95 views

DropDownList visible

Hello,

I have a DropDownList that I would like to cache based on a radio button

Code DropDownList :

@(
                    Html.Kendo().DropDownList()
                        .Name("orders")
                        .DataTextField("Companies_name")
                        .DataValueField("CompaniesId")
                        .MinLength(3)
                    .HtmlAttributes(new { style = "width:25%" })
                        .Template("#= CompaniesId # |  #= Companies_name #")
                        .Height(520)
                        .Filter(FilterType.Contains)
                        .DataSource(source =>
                        {
                            source
                            .Ajax()
                            .PageSize(80)
                            .Read("Virtualization_Read", "NewUploadAccount");
                        })
                        .Events(e =>
                        {
                            e.Change("onChange");
                    })
                        .Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper"))
                        )

Regards

DropDownList

asked on 12 Jun 2023