I have just upgraded my MVC application to 2023.2.606.  When I access a view with a Kindo.Grid on it the column filter icons are displayed and are very large.

I had a similar issue with another control which was fixed by adding the following to the master page

When I take out the ability to filter the grid is displayed but the layout is messed up.

I have a chart loaded with a data source, and I would like to change the dash type based on the series name. I can't find a property in JavaScript or at the chart level (e.g., DashTypeField)

here is an extract from my code

@(Html.Kendo().Chart<AquascopWeb.pages.ValorisationResultats.Models.EvolPiezometreMultiPointSeriesDataViewModel>()
    .Name("chartEvolPiezometreMultiPoint").HtmlAttributes(new { style = "height:" + height + "px;" })
    .Title(title => title
        .Text("Evolution du type d'observation " + ViewBag.TypeTraite + " - multi-pézomètres ")
        .Font("bold 16px 'Arial Unicode MS'")
    )
    .Legend(legend => legend.Position(ChartLegendPosition.Bottom).Font("11px 'Arial Unicode MS'"))
    .SeriesDefaults(seriesDefaults =>
        seriesDefaults.Line().Style(ChartLineStyle.Normal)
    )
    .Series(series =>
    {
        series.Line(value => value.Data, categoryExpression: category => category.Date).MissingValues(ChartLineMissingValues.Gap).GroupNameTemplate("#= group.value #").Markers(conf=>conf.Visible(false).Size(2)).Style(ChartLineStyle.Normal);     
    })
    .CategoryAxis(axis => axis
            .Name("series-axis")
        .Line(line => line.Visible(false))
        .Labels(label=>label.Visible(false))
        )
    .CategoryAxis(axis =>
    {
        axis.Name("label-axis");
        axis.Line(line => line.DashType(ChartDashType.Dot));
        axis.Categories(model => model.Date);
        axis.Type(ChartCategoryAxisType.Category)/*.MajorGridLines(lines => lines.Visible(false))*/;        
        axis.Justify(true);
        axis.Date().BaseUnit(ChartAxisBaseUnit.Fit)
            .MaxDateGroups(12).Labels(labels => labels.DateFormats(formats => { formats.Days("dd/MM/yyyy"); formats.Months("MMMM yyyy"); }))
            .AutoBaseUnitSteps(unitSteps => unitSteps
                .Days(new int[] { 3 }) // Would produce 31 groups => Skip to weeks.
                .Weeks(new int[] { }) // Not allowed as no steps are defined => Skip to months.
                .Months(new int[] { 1 }) // Results in 2 groups => Chosen.
            );
        axis.Labels(label =>
        {
            label.Rotation("auto");
            label.Font("11px 'Arial Unicode MS'");
        });
    }
    )
    .ValueAxis(axis => axis
        .Numeric()
        .Title(title=>
        {
            title.Text(ViewBag.TypeTraite);
            title.Font("8px");
        })
        .Labels(label =>
        {
            label.Rotation("auto");
        })
        .AxisCrossingValue(0, int.MinValue)
    )
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Shared(true) 
    .SharedTemplate(
                    "<div style='display: flex;flex-direction:column;'>" +
                        "<div style='display: flex;align-items: center;justify-content: center;font-size: 12px;font-weight: bold;'>#= kendo.toString(category, 'dd MMMM yyyy')#</div>" +
                        "<table class='table table-sm'>" +
                        "   <tbody>" +
                        "# for (var i = 0; i < points.length; i++) { #" +
                        "       <tr>" +
                        "           <td><span style='color:#= points[i].series.color #' class='k-icon k-i-minus minus-grand'></span></td>" +
                        "           <td>#= points[i].series.name #</td>" +
                        "           <td>&nbsp;:&nbsp;</td>" +
                        "           <td><span style='font-size: 12px;font-weight: bold;color:#= points[i].series.color #'>#= points[i].value #</span></td>" +
                        "       </tr>" +
                        "# } #" +
                        "   </tbody>" +

                        "</table>" +
                    "</div>"
                   )
    )
    .Pannable(pannable => pannable
    .Lock(ChartAxisLock.Y)
    )
    .Zoomable(zoomable => zoomable
        .Mousewheel(mousewheel => mousewheel.Lock(ChartAxisLock.Y))
        .Selection(selection => selection.Lock(ChartAxisLock.Y))
    )
    .DataSource(dataSource => dataSource
        .Read(read => read.Action("ChartEvolPiezometreMultiPoint_Read", "GraphEvolPiezometreMultiPoint"))
        .Group(g => g.Add(v => v.Name))
        .Sort(s => s.Add(v => v.Date))
    )
    .Events(events=>events.DataBound("chartEvolPiezometreMultiPoint_DataBound"))
)

Hi!

I need to know if there is a way to generate a QR code with a logo in the center as shown in the attached file.

Hi,

I am trying to set up a chart by retrieving the data from an API and the binding  is not working. I can see in the network tab of the browser that I am receiving the correct data from the API, but then the chart is blank, no data being represented. Here is my code:

@(
        Html.Kendo().Chart<OrderBookChart>()
            .AutoBind(true)
            .Events(events => events.DataBound("onDataBound"))
            .Events(e => e.Render("onRender"))
            .Legend(false)
            .DataSource(ds => ds
                .Group(group => group.Add(model => model.OrderId))
                .Sort(s => s.Add(model => model.OrderId).Descending())

                .Read(read => read.Action("GetOrderBook", "OrderBookChart").Data("additionalInfo"))
                )
            .SeriesDefaults(seriesDefaults =>
                seriesDefaults.Bar().Stack(true)
            )
            .Series(series =>
            {
                series.Bar(model => model.Quantity).Name("Quantity").CategoryField("Price")
                .Labels(l => l
                    .Visible(true)
                    .Template("#= customLabelFormat(dataItem.Quantity) #")
                    .Position(ChartBarLabelsPosition.OutsideEnd)
                    .Background("transparent")
                );
            })
        .CategoryAxis(axis =>
            axis
            .Labels(labels => labels.Rotation(0))


        )
        .ValueAxis(config => 
            config.Numeric()
            .Visible(true)
            .Color("transparent")
        )
        )

controller:

[Route("contract-order-book-at")]
    [ApiController]
    public class OrderBookChartController : Controller
    {
        private readonly string _urlRestApi;
        private readonly ILogger<UserDataService> _logger;
        private readonly AppSettings _appSettings;

        public OrderBookChartController(ILogger<UserDataService> logger,
                                AppSettings appSettings)
        {
            _logger = logger;
            _appSettings = appSettings;
            _urlRestApi = _appSettings.UrlApiRest;

        }

        [HttpPost]
        public ActionResult GetOrderBook(string contractCode, string date, string time, [DataSourceRequest] DataSourceRequest dSourceRequest)
        {
            List<OrderBookChart> result;
            string baseUrl = _urlRestApi;
            contractCode = "code";
            date = "2023-04-24";
            time = "13:50:25.020";
            var urlRequest = $"{baseUrl}/contract-order-book-at?contractCode={contractCode}&date={date}&time={time}";

            result = LoadDataFromBackendAsync(urlRequest).Result;

            DataSourceResult ds = result.ToDataSourceResult(dSourceRequest);
             return Json(result.ToDataSourceResult(dSourceRequest));

        }

        private async Task<List<OrderBookChart>> LoadDataFromBackendAsync(string urlRequest)
        {
            List<OrderBookChart> result = new List<OrderBookChart>();

            try
            {
                using (HttpClient client = new HttpClient())
                {

                    HttpRequestMessage request = new HttpRequestMessage(HttpMethod.Get, urlRequest);
                    HttpResponseMessage response = client.SendAsync(request).Result;

                    var responseContent = await response.Content.ReadAsStringAsync();

                    if (!string.IsNullOrEmpty(responseContent))
                    {
                        var responseJson = JArray.Parse(responseContent);

                        foreach (var item in responseJson.Children<JObject>())
                        {
                            result.Add(new OrderBookChart(item.GetValue("traderId").Value<int>(), item.GetValue("side").Value<string>(), item.GetValue("price").Value<decimal>(),
                                item.GetValue("quantity").Value<int>(), item.GetValue("creationTime").Value<DateTime>()));

                        }
                        return result;
                    }
                    else
                    {
                        _logger.LogError($"{nameof(UserDataService)}.{nameof(LoadDataFromBackendAsync)}. Error getting UserPreferences, StatusCode: ({response.StatusCode})");
                    }
                }
            }
            catch (Exception ex)
            {
                _logger.LogError(ex, $"{nameof(UserDataService)}.{nameof(LoadDataFromBackendAsync)}. Message: {ex.Message}");
            }

            return result;

        }
    }

Model:

My company has three very large apps that are dependent on Kendo. I've been trying for several days to update the Kendo version in our largest app from version 2022.3.913. I was able to update with no problems to version 2023.1.117. But when I try to go beyond that, it's completely hosed. Worst of all is the use of icons. I can't make them work no matter what I do. We've been using .SpriteCssClass() to attach icons to buttons and menu items as well as using the k-icon k-i-xxx classes in grid item templates. None of that works anymore. None of the suggested fixes for this work with version 2023.2.829 either. I've tried telling the app to use font icons via KendMvc.Setup() in my Startup.cs and BaseController.cs files, neither of which worked. I installed both the FontIcons and SvgIcons NuGet packages, which at least allowed me to build the app. I was able to use the .Icon() method on a Button widget to use one if the SVG icons that I saw in an example, but nowhere on your site can I find a list of standard SVG icons like the list of font icons, so I wasn't able to find the icons I had been using. In addition to the complete inability to make icons work, the way you've changed font sizing for widgets has made the app look very different than before the update and has made various customizations we've made in our site.css file look very bad. Ditto for some random styling changes you've made for menu items and anchor tags in grid templates.

In short, you have really screwed us over and I don't know if we're going to be able to update past 2023.1.117. I see lots of others have had these same issues and I don't see you responding with any real solutions.

I have a chart with the following definition:

@(Html.Kendo().Chart<ChartViewModel>()
    .Name("MyChart")
    .DataSource(d => d
        .WebApi()
        .Read(r => r.Action("GetData", "api/Chart").Data("MyChartData"))
        .Group(g => g.Add(n => n.Group))
    )
    .Legend(l => l.Position(ChartLegendPosition.Bottom).Labels(n => n.Template("#=series._groupValue#")))
    .Series(s => s.Column(n => n.Value, n => n.Colour).Stack(true))
    .CategoryAxis(c => c.Categories(n => n.Category))
    .ValueAxis(a => a.Numeric())
    .Tooltip(t => t.Visible(true).Template("#=value# - #= category #"))
)

Note in particular the series definition; I can control the color of individual data points in the chart. This is great.

...but the groups displayed in the legend doesn't take on these colors

I know that I can add the following line to control the group colors:

.SeriesColors(new string[] { "#color1", "#color2", "etc..." })

...but this doesn't guarantee that any particular group will get a specific color. I know in advance what the groups will be, and what colors I want each one to have. ...this seems like a very obvious and simple requirement, but the chart definition doesn't appear to support this for some reason? How do I achieve this?

I'm experiencing an issue that I've had a couple times utilizing the kendo UI libraries with formatting.

It seems that the formatting commands are not the same throughout the library, and as well there is limited documentation on PreviewFormatting.

 @(Html.Kendo().Filter<OrderSearchBindingModel>()
.Name("filter")
.ApplyButton()
.ExpressionPreview()
.MainLogic(FilterCompositionLogicalOperator.Or).Fields(f =>
  {
      f.Add(p => p.InternalOrderId).Label("Order ID").PreviewFormat("n");
      f.Add(p => p.ExternalOrderId).Label("EX Order ID");
}).FilterExpression(fe =>
  {
      fe.Add(p => p.InternalOrderId);
}).DataSource("source"))

I have tried the following formats with no success I'm simply trying to achieve a raw numerical value no commas, or decimals.

n

n0

#

#############

Is there documentation pointing to this specific formatter and it's options?

I have a sub grid which contains a single foreign key column. As such, it doesn't make sense for this grid to allow edits, just deletes and inserts. However, if I remove the edit command, the cancel button is no longer visible.

I have tried the suggestion in the post here Grid: Insert and Delete only, no update of existing records in UI for ASP.NET MVC | Telerik Forums however this does not seem to work.

I am using version v2023.2.718.

How can I remove the edit button, but keep the cancel button for inserts when using inline editing?

My grid definition is:-

<script id="subdetailsTemplate" type="text/kendo-tmpl">


                            @(Html.Kendo().Grid< KPIDataEntryForms.Models.IndicatorBundlesToMetricsMap> ()
                                        .Name("mapGrid_#=ID#")
                                        .Columns(col =>
                                        {

                                            col.Bound(o => o.ID).Title("ID").Width(150);
                                            //col.Bound(o => o.IndicatorBundle).Title("Bundle ID");
                                            //col.Bound(o => o.MetricID).Title("Metric ID");
                                            col.ForeignKey(p => p.MetricID, ds => ds.Read(r => r.Action("GetMetrics", "ScoreCards")), "MetricID", "MetricName")
            .Title("Metric").Width(500);

                                            col.Command(command => { command.Destroy().Text(" "); command.Edit().Text(" ").UpdateText(" ").CancelText(" "); });
                                        })
                                        .ToolBar(tb => tb.Create())
                                         .Editable(e => e.Mode(GridEditMode.InLine))
                                         .Events(e=>e.DataBound("hideUpdateBtn"))
                                      .DataSource(ds => ds
                                      .Ajax()
                                        .Events(e => e.Error(o => gridTemplateHelper("#=ID#")))
                                     .Model(m =>
                                     {
                                         m.Id(p => p.ID);
                                         m.Field(p => p.ID).Editable(false);

                                     })
                                      .PageSize(15)
                                      .Read(rd => rd.Action("RD_BundleMaps", "ScoreCards", new { BunID = "#= ID #" }))
                                      .Create(u => u.Action("InsertBundleMap", "ScoreCards", new { BunID = "#= ID #" }))
                                      .Destroy(u => u.Action("DeleteBundleMap", "ScoreCards"))
                                      .Update(u => u.Action("DeleteBundleMap", "ScoreCards"))


                                      .Sort(s =>
                                      {
                                          s.Add(a => a.ID).Descending();

                                      })
                                      )


                                      .Pageable(p=>p.Refresh(true))
                                      .Sortable()
                                      .ToClientTemplate()


            )



</script>

		<script type="text/javascript">
		
    function hideUpdateBtn()
    {
            this.table.find(".k-grid-edit").hide();
        }
    

</script>

-

I have updated kendo version 2021.3.1109 to 2023.1.425. After upgrading I am not able to see series colors.