We recently upgraded Telerik to 2024.3.806.  Adding a reference to kendo.min.all.js to the Scripts file in the MVC project updated the styles in our grids, but the custom template no longer displays when clicking on a button for it from the grid.

Removing the reference to the new JS restores the functionality but breaks the styling, which makes it difficult for our users to navigate through the grid (control buttons are invisible until the user hovers over them; the new style fixes that issue).  Is there anything wrong with this code as written?  None of it has been changed.

@(Html.Kendo().Grid<ESGR.Icms.Core.Domain.QuickViewCasesDto>()
                 .Name("grid")
                 .Sortable()
             .Pageable(pager =>
             {
                 pager.Input(true);
                 pager.Info(true);
                 pager.Numeric(false);
                 pager.PreviousNext(true);
                 pager.PageSizes(new int[] { 25, 50, 100 });
             })
             .Columns(columns =>
             {
                 columns.Bound(column => column.FirstName).Title("First Name").Media("(min-width: 768px)");
                 columns.Bound(column => column.LastName).Title("Last Name").Media("(min-width: 768px)");
                 columns.Bound(column => column.DateOpened).Title("Date Opened").Width(200).Format("{0:MM/dd/yyyy}").Media("(min-width: 768px)");
                 columns.Bound(column => column.CaseNumber).Title("Case Number").Width(120).Media("(min-width: 768px)");
                 columns.Bound(column => column.CaseStatus).Title("Status").Width(120).Media("(min-width: 768px)");
                 columns.Bound(column => column.CaseState).Title("State").Width(80).Media("(min-width: 768px)");
                 columns.Bound(column => column.CaseRegion).Title("Region").Width(100).Media("(min-width: 768px)");
                 columns.Bound(column => column.AssignedTo).Title("Assigned To").Width(120).Media("(min-width: 768px)");
                 columns.Bound(column => column.EnteredBy).Title("Entered By").Width(120).Media("(min-width: 768px)");
                 columns.Bound(column => column.LastUpdate).Title("Last Update").Width(130).Format("{0:MM/dd/yyyy}").Media("(min-width: 768px)");
                 columns.Bound(column => column.CaseIdentifier).Title("Case Identifier").Width(80).Media("(min-width: 768px)").Hidden();
                 columns.Bound(column => column.Employer).Title("Employer").Width(80).Media("(min-width: 768px)").Hidden();
                 columns.Bound(column => column.OmbudsmanFirstName).Title("OmbudsmanFirstName").Media("(min-width: 768px)").Hidden();
                 columns.Bound(column => column.OmbudsmanLastName).Title("OmbudsmanLastName").Media("(min-width: 768px)").Hidden();
                 columns.Group(group => group.Title("Action Required").Width(150).Columns(info =>
                 {
                     info.Bound(x => x.TwoDayRequired).Title("2 Day").Width(50);
                     info.Bound(x => x.SevenDayRequired).Title("7 Day").Width(50);
                     info.Bound(x => x.FourteenDayRequired).Title("14 Day").Width(56);
                 }).Media("(min-width: 768px)")
                 );
                 columns.Bound(column => column.CaseID).Width(40).ClientTemplate("<a class='k-button manage' aria-label='ManageCase' href='" +
                 @Url.Content("~/ManageCase") + "?caseId=#= CaseID #'" + ">ManageCase</a>").Sortable(false)
                     .Title("Manage Case").Width(100).Media("(min-width: 768px)");
                 columns.Template("#=resColTemplate(data)#").Title("Records").Media("(max-width: 768px)");
                 columns.Command(command => command.Custom("MoreInfo").Click("showDetails")).Title("More Info").Width(90).Media("(min-width: 768px)");
             }).DataSource(ds => ds.Ajax()
              .Read(r => r.Url(@Url.Content("~/QuickViewCases?handler=Read")).Data("forgeryToken").Data("StatusSelection"))
                 .Model(m => m.Id(id => id.CaseID))
                 .PageSize(25))
                 .Pageable()
             )

 @*ViewDetail Modal view*@
 @(Html.Kendo().Window()
     .Name("Details")
     .Title("Case More Information")
     .Visible(false)
     .Modal(true)
     .Resizable()
     .Draggable(true)
     .Width(500)
 )

<script type="text/x-kendo-template" id="template">
    <div>
        <div class='viewdetails'>
            <ul class="form-group p-3 mt-2">
                <li><span class="b">Date Opened:&nbsp;</span>#= DateOpenedString #</li>
                <li><span class="b">Ombudsman:&nbsp;</span>#= OmbudsmanFirstName # #= OmbudsmanLastName # </li>
                <li><span class="b">Employer:&nbsp;</span>#= Employer #</li>
                <li><span class="b">Primary Point of Contact First Name:&nbsp;</span>#= PriPocFirst #</li>
                <li><span class="b">Primary Point of Contact Last Name:&nbsp;</span>#= PriPocLast #</li>
                <li><span class="b">Email:&nbsp;</span>#= Email #</li>
                <li><span class="b">State:&nbsp;</span>#= CaseState #</li>
                <li><span class="b">Summary:&nbsp;</span>#= Summary #</li>
            </ul>
        </div>
    </div>

</script>

<script>
 var detailsTemplate;
        
 $(document).ready(function() {
     detailsTemplate = kendo.template($("#template").html());
 });

//Open ViewDetail Window
function showDetails(e) {
    e.preventDefault();
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    var wnd = $("#Details").data("kendoWindow");
    wnd.content(detailsTemplate(dataItem));
    wnd.center().open();
};

</script>

I am also including screenshots.  In the browser tools I can see that the data does load in the template, but it does not display on the screen.

Any ideas?

Hi,

I have a kendo grid. On copy the records from excel and paste on the kendo grid Paste event is triggered.

Suppose I have pasted 50 records from the excel to the grid. From that 50 records 10 records are invalid and I want to validate and show the error message for each row by row.

Please let me know how we can validate row by row on paste these 50 records from excel to kendo grid.

Events(events => events.Paste("onPaste"))

function onPaste(e) {

}

I know, it's a big leap but I was assigned this old application. Obviously, a lot of things have changed.

currently we are using:

bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
string.Format("~/Scripts/kendo/{0}/jszip.min.js", KendoVersion),
string.Format("~/Scripts/kendo/{0}/kendo.all.min.js", KendoVersion),
string.Format("~/Scripts/kendo/{0}/kendo.aspnetmvc.min.js", KendoVersion)));

and

bundles.Add(new StyleBundle(string.Format("~/Content/kendo/{0}/css", KendoVersion)).Include(
string.Format("~/Content/kendo/{0}/kendo.common-bootstrap.min.css", KendoVersion),
string.Format("~/Content/kendo/{0}/kendo.custom.css", KendoVersion)))

I noticed none of the Content files are around anymore, or the jszip.min.js

Are there new files to replace these with?

I assume, even if there are, there will be code changes involved. correct?

I started out trying to update Bootstrap to the latest, but I don't think the 2017 version of kendo was playing well with it.

Thanks in advance.

I'm using the stepper and i don't want to display the progressbar animation since my page is reloading every 30 seconds, and it's anoying.

i tried a couple things like:

@(Html.Kendo().Stepper()
    .Name("stepper")
    .Animation(false) // Disable animation
    .Steps(s =>
    {
        s.Add().Label("First Step");
        s.Add().Label("Second Step").Selected(true);
        s.Add().Label("Last Step").Icon("save");
    })
)

also with css:

.k-stepper .k-stepper-content {
    transition: none !important;
}

also with javascript:

$(document).ready(function() {
    kendo.fx($("#stepper")).disable();
});

$(document).ready(function() {
    var stepper = $("#stepper").data("kendoStepper");
    stepper.options.animation = false;
});

Nothing is working.

i' trying to make it work in Telerik Dojo : Kendo UI Dojo

Any idea how to remove the animation?

I have a div  tag which has all three controls within the tag

1. TabStrip as the main container

2. Panel bar inside the tab

3.Dropdown inside the panel bar.

But the code is giving me the error - Inline markup blocks (@<p>Content</p>) cannot be nested.  Only one level of inline markup is allowed.

Can somebody help me to resolve  and  fix it.

Below is my code structure

Recently I upgraded Kendo in a project from a 2020 version to the current version. It seems CancelText() and UpdateText() etc. of the command column in a grid have changed and now perform html escaping on the value. This results in the html code being shown to the user instead of what was intended.

Is it possible (and how) to get the old behaviour back?

The intended use is to have just an icon (not from the kendo set) on the button and no further text. So setting the CancelIconClass to "none" and putting the icon's html snippet in the text, used the achieve the intended result. But this method doesn't work any more.

Hi,

I wanted to Customize Kendo Grid Pagination as per the screenshot below. 

I tried the paging properties but nothing works.

I want the pagination style from 

To this

HI Team,

We are getting this exception while updating new teleirik version for MVC "Telerik.UI.for.AspNet.Mvc5.2025.1.211"

System.TypeLoadException: 'Could not load type 'Microsoft.Practices.EnterpriseLibrary.Common.Configuration.Manageability.ConfigurationSectionManageabilityProviderAttribute' from assembly 'Microsoft.Practices.EnterpriseLibrary.Common, Version=6.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35'.'

we are not able to fix this in any way can you please help us on this?

As the title states, I have a legacy monolith that must be revived.

I need a few features, especially on the grid, and decided to upgrade Telerik. After a bit of struggle, I managed to run the application but the Telerik controls are by default very small compared to before and the new Size property doesn't seem to be doing much:

Before:

Now:

As it can be seen, the grid shrunk. I do not have a lot of custom CSS on this site but the baseline theme was Start Bootstrap v2 (Start Bootstrap - SB Admin 2 Bootstrap Admin Theme (http://startbootstrap.com)). Not sure if the original theme can still be found.

Hello,

We developed a widget in an empty ASP.NET MVC project with the last Kendo UI for ASP.NET MVC trial version. It works !

Now, we would like to use this widget in a Sitefinity 14.4 project version but we have an error saying that the assembly Kendo.Mvc 2024.4.1112.462 is using System.Web.Mvc 5.3.0.0 but the referenced assembly is 5.2.7.0 version in Sitefinity project.

Is there any way to download an older Kendo UI for ASP.NET MVC version using System.Web.Mvc 5.2.7.0 ?
How can we use a trial version before buying the component bundle ?

We tried with the nuget server but the trial version is only available in the last version.

Thank you for your help.