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. 

Could someone please help:  

     I am reviewing ASP MVC Core using the Telerik KendoUI Grid for our company and I'm having an issue doing the following.  I am trying to use an html select to send, via an ajax call, the selected count value to the controller to reload the grid with the amount of database rows in the count.  I default the grid count to 50 on load with the following in _Layout.cshtml.   

 <li class="nav-item">
     <a class="nav-link text-dark" asp-area="" asp-controller="LocalOptions" asp-action="KendoTest" asp-route-count="50">KendoTest</a>
 </li>

     What is happening, is the grid loads with the 50 rows.  Then, when I select from the drop down ie: 500, the ajax function calls the controller action and the parameter count  and ViewData["SelectedOption"] are set to 500.  Then in the Views first @{ } code block, the database call fires and repopulates the list CurrOptionData with the new list of data.   The problem is that the Kendo grid never reloads with the new rows, it stays at the initial 50.

Note:  I have tried using  $("#dataGrid").data("kendoGrid").dataSource.read(); and $("#dataGrid").data("kendoGrid").refresh(); in the ajax success: but no change.

Any help would be greatly appreciated.

Thanks

Dave.

*********  LocalOptionsController.cs *********

 public IActionResult KendoTest(int count)
 {
     ViewData["SelectedOption"] = count;
     return View();
 }

************ VIEW ************

 @model List<Asp_Core_MVC.Models.CurrOption>
@inject IERNIEData _db

<div class="text-center">
    <h1 class="display-4">Current Options</h1>
</div>
<br />

<div>
    <div class="text-center">         

        @{
            List<CurrOption>? CurrOptionData;
            int countToDisplay = 50;
            int loadedRows = 50;

            countToDisplay = Convert.ToInt32(ViewData["SelectedOption"]);
            loadedRows = countToDisplay;

            CurrOptionData = await _db.GetCurrOptionsByCount(countToDisplay);

        }


        @if (CurrOptionData == null)
        {
            <p><em>Loading ...</em></p>
        }
        else
        {
                <table>
                    <tr>
                        <td style="padding: 0 15px; text-align: left; vertical-align: middle;">Sample Row Count:</td>
                        <td style="text-align: left; vertical-align: middle;"><label id="lblCount">@loadedRows</label></td>
                    </tr>
                </table>

                <br />
                <div>
                    <table>
                        <tr>
                            <td style="padding: 0 15px; text-align: center;">
                                Select Current Options To Display:
                            </td>
                            <td style="text-align: center;">
                            <select name="options" id="OptionCount" style="height: 25px;">
                                    <option value="">--Please choose an option--</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                    <option value="500">500</option>
                                    <option value="1000">1000</option>
                                    <option value="10000">10000</option>
                                    <option value="100000">100000</option>
                                    <option value="200000">200000</option>
                                    <option value="300000">300000</option>
                                    <option value="400000">400000</option>
                                </select>
                            </td>
                        </tr>
                    </table>
                </div>
            <br /><br />            

            @(

                    Html.Kendo().Grid(CurrOptionData)
                            .Name("dataGrid")
                            .Columns(columns =>
                            {
                                columns.Bound(p => p.ID).Title("ID").Width(105);
                                columns.Bound(p => p.USID).Title("USID").Width(120);
                                columns.Bound(p => p.SellID).Title("SellID").Width(130);
                                columns.Bound(p => p.OptionID).Title("OptionID").Width(170);
                            })
                            .Pageable()
                            .Sortable()
                            .Scrollable(scr => scr.Height(430))
                            .Filterable()
                            .DataSource(dataSource => dataSource
                            .Ajax()
                            .PageSize(20)
                            .ServerOperation(false)
                            )
                    )
             }

    </div>
</div>



<script>   

    document.getElementById('OptionCount').addEventListener('change', function () {
        var selectedValue = this.value;       

        $.ajax({
            url: '@Url.Action("KendoTest", "LocalOptions")',
            type: 'GET',
            data: { count: selectedValue }, 
            success: function () {
                $("#dataGrid").data("kendoGrid").dataSource.read();
                $("#dataGrid").data("kendoGrid").refresh();
                //alert(selectedValue);
            },
            error: function () {
                console.log('Error occurred during the AJAX call.');
            }
        });

    });  


</script>

Hi, we were previously using the Telerik editor for asp.net/webforms and it had the option to use <br> elements instead of <p> for line breaks. We used this for many years and are now transitioning to MVC.

The new Kendo editor has the same options (kind of) for using <br>, but now the ordered/unordered lists (and possibly other functionality we haven't tested yet) no longer work with the the <br> tags where they did in the previous asp.net editor.

This is a big issue for us as we are maintaining backwards compatibilty with the old version and need to keep the functionality and formatting the same.

I found a similar issue posted in 2013 here (https://www.telerik.com/forums/headers-or-bullet-list-in-editor-without-p-) and was hoping that in the 10 years since, some support for this, or at least a better work-around, might have been implemented. The one suggested here wont exactly work for us as we do intend to allow for paragraph tags if the user inserts them intentionally, but just not as standard carriage returns. We might could do somethin like intercept the carriage return and add a special class to them and have that swapped out, but I'm not sure that will work for all cases and I'm hoping there is a better way.

I have a question about the jquery version that is bundled with kendo UI. According to what I've read, there were several vulnerabilities in jquery that were patched in later jquery releases (CVE-2020-11022, CVE-2020-11023, CVE-2015-9251, CVE-2019-11358). Do these vulnerabilities exist in the jquery.min.js file that is included with the product download?

I saw a post here that said it was fixed for the ASP.NET AJAX version: https://www.telerik.com/forums/bundled-jquery-library-version-1-12-4-is-vulnerable

Did the MVC version also get this fix or was that just for ASP.NET AJAX?

I'm not sure if I should have posted this here or in the Kendo UI for jquery because we use the MVC helper and the jquery syntax for creating widgets.