So we have a need that in a parent row we change a value (a percentage) and then take that new value and potentially apply to rows in detail table.  Once that is all complete need to take results from the applying the percentage to details rows and update another value in the parent row,.

Basically Parent has a discount percentage. Change the value from say 10% to 20%.

Now go row by row in detail table and potentially discount the price of the each row if they meet a criteria.

I have this working already. At the end do a detailGrid.datasource.sync() and looks good.

Next need to go through the detail table and grab all the changed prices and total them up and put in the parent row total column.

I keep the total during the updating of the detail rows.

Thought doing a parentRowModel.set("Total",newTotal) and then parentGrid.datasource.sync() would do it, but no luck.

Also at the very end we dont want the parentGrid.datasource.sync() to close the detail table. Want it to remain expanded.

What I think is happening is the parentGrid.datasource.sync() is causing the detail table to be restored to original value.

Expect:

User changes parent.

Code changes all of the detail rows that meet a criteria
Code syncs detailGrid to update the UI 
Code syncs the parentGrid to update the parent row changed from calculations
User reviews the changes and manually saves to push changes back to database.
User needs to be able to make changes to multiple parents and details before committing change to database.

Let's say I have a program with two buttons, and each one of them populate my grid with different data

. Every time I click any button it reads the data and replace the current data on the grid with the new one. The problem is, let's say button 1 returned an error like 'Uncaught TypeError: Cannot read properties of null', then when I try to click button 2, which has data that doesn't cause errors, then the read method is not called, it doesn't even show on the network tab.

Is it suppose to be like that, or is there a way to make a situation like this work?

Some information: My grid is made by using MVC model (Html.Kendo().Grid<>) approach, with dataSource.Ajax().

Using your ASP.NET MVC Grid Detail Template demo listed at following link

https://demos.telerik.com/aspnet-mvc/grid/detailtemplate?_ga=2.212498388.1559105652.1688053353-1103487563.1679788213&_gl=1*1tfyiak*_ga*MTEwMzQ4NzU2My4xNjc5Nzg4MjEz*_ga_9JSNBCSF54*MTY4ODA2NTcyMi4xMTYuMS4xNjg4MDY4NDc5LjIxLjAuMA..

How can I enforce or only allow one Detail to be expanded at any given time?

Need an example of using the Filter component with a DataSource.  Using the Apply button of the DataSource I would like to pass the arguments collected from the Filter to the Contoller function bound to the Read command of the datasource.

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.