I would like to implement the ASP.NET .NET Core Grid using the pop-up editor.  The default UI produced by the popup is less than ideal though, as I have complex screens in certain cases.  I would love to implement the Form control as part of the grid declaration (DevExpress does this, for example, here:  https://demos.devexpress.com/ASPNetCore/Demo/DataGrid/PopupEditing/ - Is there something similar in the Telerik setup?  If so, is there an example?

I know I can implement templates as part of the grid, but this functionality seems odd because I have to store 50+ partial screens in  Shared/EditorTemplates folder.  Is there a better approach?  I am using Razor pages, not MVC.

Thank you,
Alex

Scenario:

I've got several Line Charts in my TabStrip,

and I set these Line Charts with same Class Name by .HtmlAttributes(new {@class = "MyClass"})

I'm trying to set these Charts categoryAxis.baseUnit with JavaScript.

Question:

I get all the Line Chart with ClassName

and used a for loop to get the KendoChart and set the categoryAxis.baseUnit.

There's no error poping out,

but there was only one chart been set,

the others remains the origin setting.

I'll leave my code below hope someone could give me some hint.

Code:

.cshtml line chart

//I only showed one of the Line Chart, incase the view gets messy
@(Html.Kendo().Chart(MyViewModel)
                .Name("Chart1")
                .Title("Displacement Time History")
                .Legend(legend => legend
                      .Position(ChartLegendPosition.Bottom)
                 )
                 .ChartArea(chartArea => chartArea
                      .Background("transparent")
                 )
                  .SeriesDefaults(seriesDefaults =>
                      seriesDefaults.Line().Style(ChartSeriesStyle.Smooth)
                 )
                 .Series(series => {
                      series.Line(model => model.ReadData).Name("Displacement").Markers(m => m.Visible(true));
                 })
                 .ValueAxis(axis => axis
                      .Numeric()//.Labels(labels => labels.Format("{0:n1}"))
                 )
                 .CategoryAxis(axis => axis
                      .Categories( m => m.ReadTime)
                      .Type(ChartCategoryAxisType.Date)
                      .BaseUnit(ChartAxisBaseUnit.Fit)
                      .Justify(true) 
                      .Labels(labels => labels.Rotation(-90).Step(10))
                      .Crosshair(c => c.Visible(true))
                      .MajorGridLines(c => c.Visible(false))
                      .AutoBaseUnitSteps(config => config.Seconds(10))
                 )
                 .Tooltip(tooltip => tooltip
                      .Visible(true) 
                      .Format("{0:n3}")
                 )
                 .HtmlAttributes(new {@class = "MyChartClassName"})  // Where I set the ClassName of Chart
   )

javascript

$( document ).ready(function() {
        
        var chartsEle = document.getElementsByClassName('MyChartClassName'); //Gets all the HtmlDocument by ClassName
        
        // for to loop through every Line Chart
        for(var i=0; i<chartsEle.length; i++){
            
            var chart = $('#'+chartsEle[0].id).data("kendoChart"); //gets the exact KendoChart with id 
            chart.options.categoryAxis.baseUnit  = "seconds";  // setting baseUnit
            chart.redraw();
        }
      
    });

We have websites using different versions of ASP.NET Core. Where can I find which versions of ASP.NET Core are supported by each release of Telerik UI for ASP.NET Core?

Thanks

I am having fits trying to figure this out...

I have a grid with a Select column.  I have set the GridSelectionMode to single.  Checkboxes show up on each row as expected.  However, there is a checkbox in the Title row as well.  So I tried to add a custom title in hopes of suppressing it, but it doesn't work.  When the header checkbox is clicked, it selects the first data row, and unchecking deselects the first row.

The bigger problem, though, is that when clicking on any row, the row is selected as expected.  But clicking on another row selects the new row, but the checkbox on the first clicked row remains checked.  The expected behavior is that when the second checkbox is clicked, the first will no longer be clicked.

The questions:

How do I get single mode to appear to the user as actually single - as in there is only one row with a check at a time?

And how can I get rid of the checkbox in the Title row?

So I am trying to use forms for the first time, I have been working with grids previously, and whenever I include a form on a Razor page or partial view within a Razor page it throws the following error.

JsonSerializationException: Self referencing loop detected for property 'Module' with type 'System.Reflection.RuntimeModule'. Path 'PageContext.ActionDescriptor.HandlerMethods[0].MethodInfo.Module.Assembly.EntryPoint'.

I tested this on several projects using custom models and the identity model and got the same result.

I saw on some older posts to include the following to the AddNewtonsoftJson options => options.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore; but this did not work.

(also tried it with the recommended serialization on https://docs.telerik.com/aspnet-core/installation/json-serialization) 

I do have grids setup without issue.  

Any idea what could be causing this?

see the attached file for the call stack and raw exception details

Versions:
ASP.net core 6

Microsoft.AspNetCore.Mvc.NewtonsoftJson 6.0.11

Telerik.UI.for.AspNet.core 2022.3.1109

I am trying to use the paging options in my Ajax-enabled Grid but none of them are enabled.  The only thing I can get is the default paging controls.  I would like to see total records, page numbers, etc.  FYI, the grid does not automatically bind, it binds after a dataSource.read() call.

Tag Helper code:

    <kendo-grid name="grdResults" auto-bind="false">
        <datasource type="DataSourceTagHelperType.Ajax" page-size="25">
            <schema>
                <model id="id">
                    <fields>
                        . . . (omitted for brevity)
                    </fields>
                </model>
            </schema>
            <transport>
                <read url="Index?handler=Read" />
            </transport>
        </datasource>
        <toolbar>
            <toolbar-button name="excel"></toolbar-button>
        </toolbar>
        <excel all-pages="true" />
        <columns>
            . . . (omitted for brevity)
        </columns>
        <sortable enabled="true" />
        <pageable enabled="true"
            info="true">
        </pageable>
    </kendo-grid>

I have searched for this everywhere and its not easy to get the right help here .

For most controls we have a demo/example. But there is not proper example for this.

Say I am developing a web app and I want a Layout page that can be used across all pages.

Telerik Drawer => I tried to used this. But I believe drawer is not intended for this purpose. 

Telerik Menu => no proper example where it can be used as a side bar. I can see one under the kendo ui javascript menu, but not one with asp doe net core.

A working example of a side menu containing a list of items would be really helpful.

Hello, I am struggling to figure out how to get a count of how many rows are in each of my kendo grid groups in the DataBound method. I can't find anything on this. My grid is pretty simple, and it is grouped by a single column (tran_code). 

The grouping works fine but I cannot figure out how to hide the group header row altogether if there is only 1 row in that group, otherwise show it.  All I have so far is my grouping, which is working.  I am using @html helper for the grid:

@(Html.Kendo().Grid(CarryFwdDetail)
.Name("grid")
.Group(groups => groups.Add(p => p.TranCode))

In a javascript function how can I access the group rows and count them (for each group), then hide that group header?
Any help is appreciated!
Thanks, Justin

Update:

I an effort to provide as much code as possible, I have been able to get to a point where I can get the count groups there are.  But I still don't know how to get the count of rows within each group and hide that groups header if it is = 1:

  .Events(e=>e.DataBound(@<text>function(e){
                    var view = this.dataSource.view();
                    if(this.dataSource.group())
                    {
                        var count = 0;
                        eachGroupItems(view, function(items, index)
                        {
                            count++
                            alert(count);
                        });
                    }
        }</text>))

function eachGroupItems(data, func) {
        for (var idx = 0, length = data.length; idx < length; idx++) {
          if (data[idx].hasSubgroups) {
            if (eachGroupItems(data[idx].items, func)) {             
              return true;
            }
          } else if (func(data[idx].items, data[idx])) {
            return true;
          }
        }
}

Update 2

I have now figured out how to get the count of rows within each grouping:

function eachGroupItems(data, func) {
        for (var i = 0, length = data.length; i < length; i++) 
        {
           alert("Data length: " + data[i].items.length);  //= number of rows in each group

            if(data[i].items.length == 1)
            {

            }
        }
}

Can anybody help me with how to hide the group header row?

Update 3

I figured it out.  Here is the new javascript function to replace eachGroupItems()

function eachGroupItems(data, func) {
        for (var i = 0, length = data.length; i < length; i++) 
        {
           //alert("Data length: " + data[i].items.length);  //= number of rows in each group

            if(data[i].items.length == 1)
            {
                $('#grid tbody .k-grouping-row').hide(); 
            }
        }
}

Hopefully this helps somebody in the future...

Thanks