Questions on UI for ASP.NET Core Forum

1 answer

20 views

[Solved] Programmatically hide custom column in scrollable grid

Good afternoon,

Using the demo https://demos.telerik.com/aspnet-core/grid/custom-command edited in REPL I have added some extra columns and grouping, plus a custom command whose visibility is conditional.

When I make the grid scrollable and contained in a div whose class is "container" the custom command column is hidden at runtime.

Index.html:

<div class="container">
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
    .Name("Grid")
    .Columns(columns => {
        columns.Command(command => command.Custom("Close").Click("showDetails").Visible("colVisible"));
        columns.Bound(e => e.Title);
        columns.Group(group => group
            .Title("Name")
            .Columns(name => {
                name.Bound(e => e.FirstName).Width(80);
                name.Bound(e => e.LastName).Width(80);
            })
        );
        columns.Bound(e => e.FirstName).Width(80);
        columns.Bound(e => e.LastName).Width(80);
        columns.Bound(e => e.Title).Width(250);
        columns.Bound(e => e.FirstName).Width(80);
        columns.Bound(e => e.LastName).Width(80);
        columns.Bound(e => e.Title).Width(250);

    })
    .Size(ComponentSize.Small)
    .Scrollable()
    .Sortable()
    .Resizable(resize => resize.Columns(true))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("CustomCommand_Read", "Grid"))
     )
)
</div>
@(Html.Kendo().Window().Name("Details")
    .Title("Customer Details")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(300)
)

 <script type="text/x-kendo-template" id="template">
    <div id="details-container">
        <h2>#= FirstName # #= LastName #</h2>
        <em>#= Title #</em>
        <dl>
            <dt>City: #= City #</dt>
            <dt>Address: #= Address #</dt>
        </dl>
    </div>
</script>

Script.js:

   function showDetails(e) {
        e.preventDefault();

        var detailsTemplate = kendo.template($("#template").html());
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var wnd = $("#Details").data("kendoWindow");

        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();
    }

    function colVisible(dataItem) {
        var visible = dataItem.LastName == "Fuller";
        return !visible;
    }

Is there a way to make the custom command appear? I guess that the width of the grid is being set by "container", I've predefined column widths of some of the columns, and it works out which columns appear before the visibility of the custom command is decided, so that appears behind the first Title column?

Kind regards,

Richard

Grid

answered on 29 Jan 2026

1 answer

27 views

[Solved] Grid Column Menu Grouping

I have a grid where I am using a custom grouping javascript event becuase one of the columns is using an editor template, when they group by that column, I want them to actually group by the hidden column containing the data for the column, not the ID.

When I drag the item to group it, the category name displays fine, having run through my javascript function.

But when I click the three dots and use the column menu, and select Group, it uses the ID instead, and you can see that is what it is grouped by in the header.

I suppose I could get around this by setting a custom group header for it? I'm just not sure why it's by passing my javascript.

Grid

answered on 29 Jan 2026

1 answer

32 views

Where is the code for the AI Grid

In this example

https://demos.telerik.com/aspnet-core/grid/ai-toolbar

It references

.Service("https://demos.telerik.com/service/v2/ai/grid/smart-state")

However no code example or details of how to implement this

Where do I find the code or documentation of how to implement

AIPrompt

Grid

answered on 29 Dec 2025

1 answer

40 views

[Solved] Display Annotation Custom Editor Grid Popup TagHelper Not Working

I feel like this should be simple but I can't figure this out. I use the [Display(Name = "Code")] annotation in my view model. I have a simple custom editor popup on my grid. I use taghelpers because I just do. I am trying to get my labels to show the display name in my popup. I have seen older posts where validation is also not working but I think this has been fixed. Either way I feel like this should work.

Model

public class ChargeViewModel

{
[ScaffoldColumn(false)]
public int ChargesID { get; set; }

[Required]
[UIHint("EditChargePopup")]
[Display(Name = "Code")]
public string ChargesCodeID { get; set; }

Custom Editor

Results

Grid

Template

answered on 25 Dec 2025

1 answer

106 views

Telerik license issue - we have DevCraft UI Subscription, but getting: Telerik UI for ASP.NET Core is not listed in your current license file

We have configured the app with the possible combination published in ASP.NET MVC, Activating Your License, Setting Up Your License Key - Telerik UI for ASP.NET MVC, and FAQ | Your Account, and the other docs...
The problem started when we renewed our subscription. We didn't use the upgrade wizard, but manually copied the license.txt file to the required location. The build completes successfully. We've also included Telerik.License.cs; and telerik-license.js, but nothing seems to help - the grid shows up with a watermark.
What are we not doing right? I thought this stuff should be straightforward once you have a license, but it's proving to be quantum physics. Please help!

General Discussions

Grid

Licensing

answered on 23 Dec 2025

1 answer

61 views

Grid column does not use DateTimePicker when in edit mode

I have created a fresh project with the following variables:

Visual Studio 22 Community (Version 17.14.21 )
Progress Telerik UI for ASP.NET Core Extension 2025.4.1110.199
.NET 9.0
Kendo UI v2025.4.1111

I am trying to create a simple grid as following that has an editable `DateTime?` column:

https://netcorerepl.telerik.com/GpFmvpEr29UDYPJN54

It works in the REPL link above, but if I press "Edit" on my local project, the DateTime column defaults to a text input without the datetimepicker buttons (see Attachment-1.png), I'm not sure what I am missing.

I've checked that `/Views/Shared/Editor/Templates/DateTime.cshtml` exists and the content is as follows:

@model DateTime?

@(Html.Kendo().DateTimePickerFor(m => m).HtmlAttributes(new { title = Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName("")}))

I've placed either `[DataType("Date")]` or `[DataType("DateTime")]` annotation on the class property definition and neither worked.

I've used `.EditorTemplateName("DateTime")` and/or `[UIHint("DateTime")]` and it didn't work.

I've created a new Template type and it didn't work.

I'm not sure what else to try to make it work.

DateInput

Grid

answered on 17 Dec 2025

4 answers

342 views

Multitouch support for Pdf Viewer / Image Editor

Hello,

is there a possibility to support multitouch input on Pdf Viewer and Image Editor?

Moving and tapping is supported. So I can scroll through the pages for example. But I need to use zoom and pinch gesture for zooming in or out to documents / images also.

As we need to zoom just areas (e.g. maps with geo information) and keep the menus on top, the pages are not user-scalable as a whole:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no,text/html,charset=utf-8">

Is there any workaround to catch the event and set the zoom factor?

And is there a possibility to couple the mouse wheel / double click event to the zoom factor?

Thanks,

Christine

ImageEditor

PDFViewer

answered on 16 Dec 2025

1 answer

54 views

.NET Core TabStrip with DateTimePicker - What am I missing?

I seem to have hit a stumbling block which I cannot find a simple solution to. Can someone point a direction for me to persue?

I am designing a website which will present to the user a tabbed interface. Each tab will represent a collection of available options/items for the user to fill out when submitting changes to an edited object.

That sounds simple in concept. I have used several host objects. TabStrips, ExpansionPanels have been tried. Both seem to render the same results. Any "content" panels which are not rendered initially do not render properly when selected.

I.E., Tab #0 looks fine. Tab#1, which is obscured/hidden, contains controls that when viewed lack things such as labels, icons, most script driven features. The same logic fails when other non-tabstrip items used.

Here is a quicky sample showing the problem. In theory, expansion panels 1, 2, and 3 should all render content. Only panel #1 shows valid content, 2 and 3 are malformed at best.

My root problem seems to be my inability to dynamically show content not visible when the page is initially rendered. Can someone point me the correct direction? I have tried the "loadfrom" content options all having the same results.

            @(Html.Kendo().ExpansionPanel()
                        .Name("reoccurringItems")
                        .Title("Reoccurring")
                        .SubTitle("Items running more than one time")
                        .Expanded(false)
                        .Content("Test Text to test feature..")
                        )

            @(Html.Kendo().ExpansionPanel()
                        .Name("nonReoccurringItem")
                        .Title("Run Once")
                        .SubTitle("A item run one time only")
                        .Expanded(false)
                        .Content(@<text>
                <div>
                    @(Html.Kendo().DateTimePickerFor(m => m.OneTimeOccurrenceAtDateandTime)
                                  .Label(lbl => lbl.Content("Run Once At Date/Time").Floating(true))
                                  .Rounded(Rounded.Full).ToClientTemplate())
                </div>
            </text>)
                        )

            @(Html.Kendo().ExpansionPanel()
                        .Name("nonReoccurringTestItem")
                        .Title("Test Two")
                        .SubTitle("Test With Textbox")
                        .Expanded(false)
                        .Content(@<text>
                <div>
                    @(Html.Kendo().TextBoxFor(m => m.ScheduleDescription).Label(lbl => lbl.Content("Description").Floating(true)))
                </div>
            </text>)
                        )

Date/Time Pickers

TabStrip

answered on 10 Dec 2025

1 answer

62 views

Chart - Category Axis labels duplicated

It may be something I'm missing but I've built a multi-series chart with line and column data. Since it is possible for the values on the bar to be negative, the issue I'm seeing is the category label is repeated, one for each series. Since I am also using zoom, if I zoom in and then back out, the duplicated label is now gone. I should also note that if I remove the label position, currently set as start, it will render only one but then having negative values makes that look bad.

What am I missing to stop the axis duplication?

Attached is the initial render of the chart as coded below.

        <kendo-chart name="chart" >
            <chart-legend visible="true" position="Kendo.Mvc.UI.ChartLegendPosition.Bottom"></chart-legend>
            <series>
                <series-item type="Kendo.Mvc.UI.ChartSeriesType.Column" name="Amount" field="Amount" category-field="Period" color="#003399">
                    <labels visible="true" format="{0:c2}"></labels>
                    <tooltip visible="true" template="Date: #= dataItem.Period#<br />Amt: #= kendo.format('{0:c2}', dataItem.Amount) #"></tooltip>
                </series-item>
                <series-item type="Kendo.Mvc.UI.ChartSeriesType.Line" name="Total" field="RunningTotal" category-field="Period" color="#FF9900">
                    <labels visible="false" format="{0:c2}"></labels>
                    <tooltip visible="true" template="Date: #= dataItem.Period#<br />Total: #= kendo.format('{0:c2}', dataItem.RunningTotal) #"></tooltip>
                </series-item>
            </series>
            <datasource type="Kendo.Mvc.UI.DataSourceTagHelperType.Ajax" server-operation="true" page-size="0">
                <transport>
                    <read url="" />
                </transport>
                <sorts>
                    <sort field="Period" />
                </sorts>
            </datasource>
            <category-axis>
                <category-axis-item>
                    <labels position="ChartAxisLabelsPosition.Start" step="2">
                        <chart-category-axis-labels-rotation align="Kendo.Mvc.UI.ChartAxisLabelRotationAlignment.End" angle="315" />
                    </labels>
                    <chart-category-axis-item-title text="Date"></chart-category-axis-item-title>
                </category-axis-item>
            </category-axis>
            <value-axis>
                <value-axis-item>
                    <labels format="c0"></labels>
                </value-axis-item>
            </value-axis>
            <zoomable>
                <mousewheel lock="ChartAxisLock.Y" />
            </zoomable>
        </kendo-chart>

Chart

answered on 01 Dec 2025

2 answers

70 views

Showing and Hiding Columns and data Conditionally

I am converting a MVC table grid to a Telerik Grid. While looking at it, there are conditional columns. For example:

@if (Model?.GroupDetail?.IsMec == false)
                                    {
                                        <th class="text-secondary" style="width: 140px;">Group Info</th>
                                    }

<th class="text-secondary">
                                        @if (Model?.GroupDetail?.IsMec == false)
                                        {
                                            <text>Office</text>
                                        }
                                        else
                                        {
                                            <text>Role</text>
                                        }
                                    </th>

How would I go about recreating something like this for the grid

Grid

GridLayout

answered on 24 Nov 2025