I am developing a RangeBar chart that shows the timeline (date range) a medication was taken by a patient. I haven't been able to get the value axis to display dates or the bar to show at all. This is how the chart is built:

        @(
            Html.Kendo().Chart<ChartDetailDto>()
                .Name("rangeChart_" + Model.ElementId)
                .HtmlAttributes(new { @class = "w-100 rangeChart" })
                .ChartArea(ca => ca.Background("var(--bs-body-bg)"))
                .Legend(l => l.Visible(false))
                .ToClientTemplate()
        )

        function loadRangeBarChart(patientId, medId, isMedClass, medName) {
            abp.ajax({
                url: abp.appPath + 'App/PatientFigures/GraphRangeChartData',
                dataType: "json",
                data: {
                    id: patientId,
                    medId: medId,
                    isMedClass: isMedClass
                },
                type: "GET",
                traditional: true,
            }).fail(function (e) {
                console.log(e);
            }).done(function (result) {

                var data = result.map(m => ({
                    dose: m.dose,
                    startDate: new Date(m.startDate),
                    endDate: new Date(m.endDate)
                }));

                var chart = $("#rangeChart_" + medId).data("kendoChart");
                chart.setOptions({
                    dataSource: {
                        data: data
                    },
                    series: [{
                        type: "rangeBar",
                        fromField: "startDate",
                        toField: "endDate",
                        categoryField: "dose",
                        name: medName,
                        color: "#48A103",
                        opacity: 0.5,
                        gap: 5
                    }],
                    valueAxis: {
                        type: "date",
                        field: "date",
                        baseUnit: "months",
                        labels: {
                            format: "{0:dd/MM/yyyy}",
                            rotation: 30
                        }
                    }
                })
            });
        }

this is how it currently looks:

the category axis works fine.

Also, does the rangeBar chart allow zoom and pan?

I have a multiseries scatterLine chart built in js that also has multiple yaxis shown one at a time as you hover on the series.

Sometimes series can be close to each other and therefore when zooming in or scrolling left and right in a blank space of the chart, the hover event fires taking another series (not necessarily the closest one to mouse position) and therefore changing the one being showcased and restarting zoom, this is my hover event:

        function onHoverScatter(e) {
            if (lockedAxisSeries && lockedAxisSeries !== e.series.yAxis) return;
            if (hoverLock && currentHoverAxis !== e.series.yAxis) return;

            let chart = e.sender;
            var hoveredSeriesIndex = e.series.index;

            let series = chart.options.series;
            let yAxis = chart.options.yAxis;
            hoverLock = true;
            if (currentHoverAxis === hoveredSeriesIndex) return;
            currentHoverAxis = hoveredSeriesIndex;

            for (let i = 0; i < series.length; i++) {
                if (i === hoveredSeriesIndex) {
                    series[i].opacity = 1;
                } else {
                    series[i].opacity = 0.2;
                }
            }

            if (!Array.isArray(yAxis)) yAxis = [yAxis];
            yAxis[hoveredSeriesIndex].plotBands[0].opacity = 0.5;
            yAxis[hoveredSeriesIndex].visible = true;

            yAxis.forEach(function (axis, i) {
                if (i !== hoveredSeriesIndex) {
                    axis.visible = false;
                    axis.plotBands[0].opacity = 0.0;
                }
            });

            chart.options.series.forEach(function (s) {
                if (!s.markers) s.markers = {};
                s.markers.size = 6;
            });

            chart.setOptions({
                series: series,
                yAxis: yAxis,
                xAxis: {
                    min: null,
                    max: null
                }
            });
        }               

this is how the series look:

this is an example of the hover event firing for a marker much further away than the intended one:

(the blue circle represents where the mouse was positioned)

I am working with a scatter chart and trying to modify the zoomable feature to change the markers size dynamically. So while zoomed out the markers will be smaller and as you zoom in they will be getting bigger. This is to avoid saturation when there's markers close to each other.

Is that possible?

                chart.setOptions({
                    series: seriesList,
                    yAxis: yAxisList,
                    xAxis: {
                        type: "date"
,                        labels: {
                            format: "{0:MM/dd/yyyy}",
                            rotation: 30
                        }
                    },
                    zoomable: {
                        mousewheel: {
                            lock: "y"
                        },
                    },
                    pannable: {
                        lock: "y"
                    }
                });

I've tried using this function on zoom but it doesn't work, it freezes the zoom:

Hello!

I want to ask where can I find some informations or tutorial to migration from old version Telerik to new Telerik UI with Kendo for ASP.NET MVC?

"Old version" - I mean TelerikMvcExtensions from 2013.

I tried here https://www.telerik.com/aspnet-mvc/documentation/migration/migrating-from-telerik-extensions-for-aspnet-mvc but this site doesn't exist anymore.

BR,

Piotr

In a grid I'm setting up the column menu with the tabbed component style. I would like to add a menu to the second tab.

In the documentation, I found Column Menu mentioning the ColumnMenuInit event. I was able to set up this event and it gets triggered when first opening the menu for a field. But I cannot locate the kendoMenu with

let menu = e.container.find(".k-menu").data("kendoMenu");

I could locate the panels through

let tab = e.container.find("[role=tabpanel]");

but my quest stranded there.

The grid is something like this

 @(Html.Kendo().Grid<DashboardViewModel>()
     .Name("dashboard")
     .Columns(...)
     .Events(e => e.ColumnMenuInit("menuInit"))
     .ColumnMenu(menu =>
     {
          menu.ComponentType("tabbed");
          menu.ClearAllFilters();
          menu.AutoSize();
     })
     ...
)

So how can I accomplish adding a menu to the second tab?

Thanks in advance

This really has got me stumped. I have a grid that has a tabstrip in it's custom editor template. This tabstrip calls a partial view with a grid in it. I'm getting to the partial view just fine.  But when I call my read action method it can't find it because it has my controller name twice in the url.  When I had this before it was because something was not defined in my grid correctly.  I don't think that is the case here since it is so simple.  I am using areas.

I'm going to show the code from the EditorTemplate onwards.  Please let me know if you need the initial view.

EditorTemplate

@using Compass.Areas.HookupCharges.Models
@using Compass.Areas.Lookup.Models
@model HookupChargeViewModel

<div class="container-fluid">
    <form>
        <div class="form-group">
            <div class="row">
                <kendo-tabstrip tab-position="left" name="tabstrip-left">
                    <items>
                        <tabstrip-item selected="true" 
                                       text="Property Information" 
                                       content-url="@Url.Action("PropertyInformation", "HookupCharges", new { hookupId = "#=Id#" })"
                                       type="POST">

                        </tabstrip-item>

Controller

namespace Compass.Areas.HookupCharges.Controllers
{
    [Area("HookupCharges")]
    public class HookupChargesController(HookupChargeServices hookupChargeServices, LookupService lookupService) : BaseController

{...

public IActionResult PropertyInformation(int hookupId)
 {
     ViewData["HookupId"]= hookupId;
     // You can pass a model to your partial view here if needed
     return PartialView("_PropertyInformation");
 }

...}

Partial View

@using Compass.Models;
@{
    var _hookupId = (int)ViewData["HookupId"];
}

@(
Html.Kendo().Grid<PropertyInfoViewModel>()
    .Name("HookupChargePropertyGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Id);
        columns.Bound(p => p.Address);
        columns.Bound(p => p.AddressDirection);
        columns.Bound(p => p.StreetUnit);
        columns.Bound(p => p.TaxAccount);
    })
    .Pageable()
    .Sortable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("HookupPropertyInfo_Read", "HookupCharge", new { hookupId = _hookupId }))
    )
)

Controller

It Never Gets Here

[HttpPost]
public async Task<IActionResult> HookupPropertyInfo_Read([DataSourceRequest] DataSourceRequest request)
{
    var model = await _hookupService.GetAllHookupChargePropertiesAsync(1279);
    var result = model.ToDataSourceResult(request);

    return Json(result);
}

Output

 https://localhost:44358/HookupCharges/HookupCharge/HookupPropertyInfo_Read

I have no idea about the aria message.  I'll work on that while I wait for an answer.

Hi,

I have a case where I need one column to be always editable as shown in this screenshot:

This was written a long time ago before anyone here was using the telerik grid.  Now that I have everything populated nicely I am trying to get the status column to be always accessible for quick setting of the status and at the same time I want an edit button to edit the larger model in an Editor Template or open a partial view.  I did my best to google this and the ai generated answer doesn't work. I'm getting conflicting advice on whether or not I should use the Editable property on the column bound vs. in the datasource.  I like to take things in small steps so my first task was getting the three other columns readonly.  I did this through the datasource because .Editable(false) or .Editable("false') on column bound did not work.  I found out that one is the older way of doing this.  I can't remember which is which. Anyway below is what the example said to do and it doesn't work unless I press the edit button.  I did this inline for now but I will be doing the popup of some type.

GRID DEFINITION

@(
Html.Kendo().Grid<HookupChargeViewModel>()
    .Name("HookupChargesList")
    .Columns(columns =>
    {
        columns.Bound(p => p.Id).Hidden(true);
        columns.Bound(p => p.PropertyOwner).Title("Property Owner");
        columns.Bound(p => p.AddressDisplay).Title("Address");
        columns.Bound(p => p.TaxAccountDisplay).Title("Tax Account");
        columns.ForeignKey(p => p.HookupChargeStatusID, (System.Collections.IEnumerable)ViewData["LookupHookupChargeStatuses"], "IdNumber", "Name").Title("Status").Editable("alwaysEditable");
        columns.Command(command => { command.Edit(); }).Width(220);
    })
    .ToolBar(toolbar => { toolbar.Create().Text("Add New Hookup Charge Worksheet"); })
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Sortable()
    .Scrollable()
    .Filterable(filterable => filterable.Extra(false))
    .Pageable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .ServerOperation(false)
        .Model(model =>
        {
            model.Id(p => p.Id);
            model.Field(p => p.PropertyOwner);
            model.Field(p => p.AddressDisplay).Editable(false);
            model.Field(p => p.TaxAccountDisplay).Editable(false);
            model.Field(p => p.HookupChargeStatusID);
        })
        .Read(read => read.Action("HookupCharges_Read", "HookupCharges"))
        .Create(create => create.Action("HookupCharges_Create", "HookupCharges"))
        .Update(update => update.Action("HookupCharges_Update", "HookupCharges"))
    )
    .Events(events => events.Edit("grid_edit"))
)

SCRIPT

<script>
    function alwaysEditable(dataItem) {
        return true; // Always allow editing for this column
    }

</script>

Hi,

Is it possible to enable AutoSwitchParts for DateInput Integration of  Datepicker?
DateInput works fine by itself, but I can’t figure out how to enable AutoSwitchParts with Datepicker.

Any suggestions would be appreciated.

(Telerik UI for Asp.net MVC  2025.4.1217.462)