I have a breadcrumb control with 4 items, but the 2nd item is not shown (set to display: none). I saw in another forum post that some items will not be displayed if there is not enough room but that's not the case here. It's inside <ul class="navbar-nav flex-grow-1">

Also, I noticed that press F12 to open developer tools causes one of the items to disappear. Closing developer tools does not bring it back.

How can I ensure that all breadcrumb items are displayed?

Thanks

Here is my grid:

@(Html.Kendo().Grid<AssetViewModel>()
      .Name("grid")
      .Columns(columns =>
       {
           columns.Bound(e => e.AssetId).Title("Asset").ClientTemplate(Html.Kendo().Template().AddComponent(avatar => avatar
                                                                                                                     .Avatar()
                                                                                                                     .Name("avatar_${data.AssetId}")
                                                                                                                     .Type(AvatarType.Image)
                                                                                                                     .Size(ComponentSize.Large)
                                                                                                                     .Rounded(Rounded.Full)
                                                                                                                     .Image(@Url.Action("GetFile", "MediaStore", new { fileId = "${data.LogoId}" }))
                                                                                                           )).Width(110);
           columns.Bound(e => e.AssetName).Title("Full Name").Width(200);
       })
      .Sortable()
      .Pageable()
      .Scrollable()
      .HtmlAttributes(new { style = "height:430px;" })
      .DataSource(dataSource => dataSource
                               .Ajax()
                               .PageSize(5)
                               .Read(read => read.Action("AssetListData", "Revenue"))
                 )

)

I have tried specifying as "#:AssetId#", "#=AssetId#" , and ${data.LogoId} but the parsing is not correct at runtime:

<span class="k-avatar-image"><img src="/MediaStore/GetFile?fileId=$%7Bdata.AssetId%7D"></span>

Ho do I get the LogoId properly?

Hi Telerik Team

I’m using ASP.NET CORE (.NET8) with
Telerik.UI.for.AspNet.Core Version="2023.3.1114"

Is this package ready for EF Core 8 ?

When I updated package Microsoft.VisualStudio.Web.CodeGeneration.Design
from version 7.x.x to version 8.0.0
I had to additionally install packages
Microsoft.CodeAnalytics.CSharp.Workspaces
Microsoft.CodeAnalytics.Workspaces.Common
Microsoft.CodeAnalytics.CSharp
Microsoft.CodeAnalytics.Common 4.8.0
because of Telerik.

I didn't need these packages before

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>