Hi,

Is there an easy way to disable the spinner when loading more content in the list view on endless scroll mode? I can set the following CSS to hide it altogether but this would affect the initial load and load after filter etc

    .k-loading-mask {
        display: none !important;
    }

Many thanks,

Dale

Here is my grid setup:

@(Html.Kendo().Grid<AssetViewModel>()
      .Name("assetGrid")
      .Columns(columns =>
      {
	      columns.Bound(p => p.AssetId).Visible(false);
	      columns.Bound(p => p.AssetName).Title("Name").Filterable(false).Sortable(false)
	             .HtmlAttributes(new { style = "k-text-center !k-justify-content-center" }).HeaderHtmlAttributes(new { style = "k-text-center !k-justify-content-center" })
	             .ClientTemplate("<div class='identifier-container'><a href='" + Url.Action("ViewAsset", "Revenue", new { assetId = "#=AssetId#" }) + "'>#=AssetName#</a></div>");
		  columns.Bound(p => p.CategoryName).Title("Category").Width(130)
	             .HtmlAttributes(new { style = "text-align:center" }).HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" })
	             .ClientTemplate("<span class='#=CategoryCss#' title='#=CategoryName#'>#=CategoryName#</span>");
	      columns.Bound(p => p.ContactName)
	             .ClientTemplate("<span title='#+ContactName#'>#=ContactName#</span>");
	      columns.Bound(p => p.Age).Title("Age").Width(70)
	             .HtmlAttributes(new { style = "text-align:center" }).HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" });
	      columns.Bound(p => p.Cost).Title("Cost").Width(100)
	             .HtmlAttributes(new { style = "text-align:center" }).HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" });
	      columns.Bound(p => p.Investors).Title("Shares").Width(75)
	             .HtmlAttributes(new { style = "text-align:center" }).HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" });
	      columns.Bound(p => p.AssetId).Title("Act").Width(50).Filterable(false)
	             .HtmlAttributes(new { style = "text-align:center" }).HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" })
	             .ClientTemplate("<a href='" + Url.Action("EditAsset", "Revenue", new { assetId = "#=AssetId#" }) + " ' title='Edit the Asset'><i class='fa-duotone fa-pen-to-square fa-fw fa-lg theme-elevate-fa'></i></a>");
      })
      .ClientDetailTemplate(Html.Kendo().Template()
            .AddComponent(detailStrip => detailStrip
                  TabStrip().Name("tabStrip_${data.AssetId}")
                        .SelectedIndex(0)
                        .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
                        .Items(tabs =>
                        {
                              tabs.Add().SpriteCssClasses("fa-duotone theme-elevate-fa fa-magnifying-glass ").Text("Details").LoadContentFrom("GetAssetDetails", "Revenue", new { masterGridId = "${data.AssetId}" });
                              tabs.Add().SpriteCssClasses("fa-duotone theme-elevate-fa fa-chart-mixed      ").Text("Charts ").LoadContentFrom("GetLetterApprovers", "Revenue", new { masterGridId = "${data.AssetId}" });
                              tabs.Add().SpriteCssClasses("fa-duotone theme-elevate-fa fa-clock-rotate-left").Text("History").LoadContentFrom("GetLetterDetails", "Revenue", new { masterGridId = "${data.AssetId}" });
                        })
            )
      )
      .Size(ComponentSize.Small)
      .ToolBar(toolbar => { toolbar.Search(); })
      .Search(s =>
      {
	      s.Field(o => o.AssetName,    "contains");
	      s.Field(o => o.CategoryName, "contains");
	      s.Field(o => o.ContactName,  "contains");
      })
      .Scrollable(s => s.Height("auto"))
      .Reorderable(r => r.Columns(false))
      .Resizable(r => r.Columns(true))
      .Pageable(p =>
      {
	      p.Refresh(false);
	      p.PageSizes(new[] { 5, 10, 20, 25, 50, 75, 100, 125, 150, 175, 200 });
	      p.ButtonCount(10);
	      p.Info(true);
      })
      //.Filterable()
      .Sortable()
      //.ColumnMenu(col => col.Filterable(false).Enabled(false))
      .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("AssetListData", "Revenue"))
                .Sort(sort => sort.Add(nameof(AssetViewModel.AssetName)).Ascending())
                .PageSize(20)
	  ))

I'm having a few issues:

1. Tab FontAwesome icons are not showing*
2. the `masterGridId = "${data.AssetId}"` is not translating properly, and the actual parameter value sent back to action is a string: "${data.AssetId}"*
3. At a given time, only one row must be expanded as the application is going to be used on a mobile screen
4. Lastly, is there any chance of converting this into TagHelper format?

The '*' questions are most important.

So we have this recurring issue every time:

Version conflict detected for Microsoft.CodeAnalysis.CSharp.Workspaces.
Install/reference Microsoft.CodeAnalysis.CSharp.Workspaces 4.8.0-3.final directly to project ProjectName to resolve this issue.

 ProjectName -> Microsoft.VisualStudio.Web.CodeGeneration.Design 8.0.0 -> Microsoft.VisualStudio.Web.CodeGenerators.Mvc 8.0.0 -> Microsoft.VisualStudio.Web.CodeGeneration 8.0.0 -> Microsoft.VisualStudio.Web.CodeGeneration.EntityFrameworkCore 8.0.0 -> Microsoft.VisualStudio.Web.CodeGeneration.Core 8.0.0 -> Microsoft.VisualStudio.Web.CodeGeneration.Templating 8.0.0 -> Microsoft.VisualStudio.Web.CodeGeneration.Utils 8.0.0 -> Microsoft.CodeAnalysis.CSharp.Workspaces (>= 4.8.0-3.final) 
 ProjectName -> Telerik.UI.for.AspNet.Core 2023.3.1114 -> Microsoft.CodeAnalysis 4.4.0 -> Microsoft.CodeAnalysis.CSharp.Workspaces (= 4.4.0).

Now, Microsoft.CodeAnalysis and all DLLs are at v4.8. I have just installed Microsoft.CodeAnalysis v4.8 but I am getting the above error (it's not a warning, but an error). This has happened a few times before. I keep adding numerous DLLs until the error becomes a persistent warning. Is there a more professional solution to this?

Hello!

I am trying to add a <kendo-upload> tag onto the toolbar of a kendo grid using TagHelper and ASP.NET Core

Though I am struggling with figuring out how to do this,  I have followed this template: https://demos.telerik.com/aspnet-core/grid/toolbar-template to not much success. 

My goal is to simply add a file upload option to upload an excel file to populate the fields of a grid!

Any ideas on how to progress?

Thank you!

But I am still struggling

I have a HTML form that has a body with data already populated in it. I want to export that data on a button click to then download that html to pdf. The form already has a method of post. I am stuck on how to get the Telerik Document process to hook up with it once the button is click.

It looks like this

index.cshtml

<body>

<form id ="letterForm" method="post">

.... "Data and text here"

</form>

<button type="submit"> Download</button>

</body>

Currently I dont have a controller method to sync up with yet. Looking for example on how to get it to work

I am using a Donut chart in my asp.net core application.

issue is that it is not showing the default loader while it fetch for data. on place of chart it looks blank space.

as it is not user friendly, please suggest me if i am missing something.

below is the code

My customer has an obnoxiously wide grid (~200 columns) which introduces the need to allow them to pick a Grid Column Title from a droplist (of all column titles) so that we can auto scroll the select grid into view.  I have tried to follow several other examples like this

https://docs.telerik.com/kendo-ui/knowledge-base/grid-scroll-to-last-column

but the offset() and .let seem to now work for core.

This is the closest that I have found but I cannot get it to work, either

Thanks!

Sample Code

<button onclick="jumpToColumn();">Jump</button>
<input type="text" id="jumpToColumnName" name="jumpToColumnName">
<br>
<br>


@(Html.Kendo().Grid<OrderViewModel>
                                ().Name("grid")
                                .Groupable()
                                .Sortable()
                                .Editable()
                                .Scrollable()
                                .ToolBar(x => x.Create())
                                .Columns(columns =>
                                {
                                    columns.Bound(column => column.Freight);
                                    columns.Bound(column => column.ShipName);
                                    columns.Bound(column => column.ShipCity);
                                    columns.Template("1").Title("Sh1").Width(200);
                                    columns.Template("2").Title("Sh2").Width(200);
                                    columns.Template("3").Title("Sh3").Width(200);
                                    columns.Template("4").Title("Sh4").Width(200);
                                    columns.Template("5").Title("Sh5").Width(200);
                                    columns.Template("6").Title("Sh6").Width(200);
                                    columns.Template("7").Title("Sh7").Width(200);
                                    columns.Template("8").Title("Sh8").Width(200);
                                    columns.Template("9").Title("Sh9").Width(200);
                                    columns.Template("10").Title("Sh10").Width(200);
                                    columns.Template("11").Title("Sh11").Width(200);
                                    columns.Template("12").Title("Sh12").Width(200);
                                    columns.Template("13").Title("Sh13").Width(200);
                                    columns.Template("14").Title("Sh14").Width(200);
                                    columns.Template("15").Title("Sh15").Width(200);
                                    columns.Template("16").Title("Sh16").Width(200);
                                    columns.Template("17").Title("Sh17").Width(200);
                                    columns.Template("18").Title("Sh18").Width(200);
                                    columns.Template("19").Title("Sh19").Width(200);
                                    columns.Template("20").Title("Sh20").Width(200);
                                    columns.Template("21").Title("Sh21").Width(200);
                                    columns.Template("22").Title("Sh22").Width(200);
                                    columns.Template("23").Title("Sh23").Width(200);

                                    columns.Command(column =>
                                    {
                                        column.Edit();
                                        column.Destroy();
                                    }).Width(230);
                                })
                                .DataSource(ds => ds.Ajax()
                                .Read(r => r.Url("/Index?handler=Read").Data("forgeryToken"))
                                .Update(u => u.Url("/Index?handler=Update").Data("forgeryToken"))
                                .Create(c => c.Url("/Index?handler=Create").Data("forgeryToken"))
                                .Destroy(d => d.Url("/Index?handler=Destroy").Data("forgeryToken"))
                                .Model(m => m.Id(id => id.OrderID))
                                .PageSize(10)
                                )
                                .Pageable()
                                .Selectable()
)

<script type="text/javascript">

    function jumpToColumn() {
        let columnTitle = 'sh11';   //$("#jumpToColumnName").val();

        var grid = $("#grid").data().kendoGrid;
        let headerColumnTitleSelector = "th[data-field='" + columnTitle + "']";            //"th[data-title='" + columnTitle + "']";
        let column = $(headerColumnTitleSelector);
        let columnOffset = column.offset();                 // returns undefined
        let lastColumnOffset = columnOffset.left;       // exception because of the previous line

       // This scrolls the scrollbar but does NOT scroll the content

        grid.content.scrollLeft(lastColumnOffset);

    }

</script>

Good evening,

I'm trying the DockManager in 2023.3.1114 and I'm unable to find a way to specify a client template. I noticed there's a ContentTemplate but I couldn't find a way to specify a client template id.

Hoping for something similar to TileLayout's BodyTemplateId. 

Regards,
Heath

Hi,

I tried to set up a DataSource and a Filter Control like in the demo (https://demos.telerik.com/aspnet-core/filter) but i can not get the DataSource working.

I have the kendo v2023.3.1010 JS Files (kendo.all.min.js, kendo.aspnetmvc.min.js) and other controls like buttons, grids, etc all work as expected

My cshtml Page is

[PartialView/_SearchProvision.cshtml]
@using Kendo.Mvc;

@using Model;

@(
    Html.Kendo().DataSource<SearchProvisionDto>()
        .Name("DS_SearchProvision")
        .Ajax(dataSource => dataSource
            .Read("GetData", "SearchProvisionDto")
        )
)

 @(Html.Kendo().Filter<SearchProvisionDto>()
        .Name("Filter_PCProvision")
        .DataSource("DS_SearchProvision")
        .MainLogic(FilterCompositionLogicalOperator.Or)
        .ApplyButton()
        .ExpressionPreview()
        //Fields, FilterExpression
}

Loading the Page shows only, that the DataSource is not initialized

Am I missing something? I dont really understand where the problem might be.

Hi,

I need to create a custom editor to provide an upload field in my form component. I have seen posts and this documentation about creating custom editors with the HtmlHelper approach but can't find anything for the TagHelper approach.

Please can you point me in the right direction?