After i upgrade my ASP.NET MVC project to Telrik UI version 2024.2.514, many component in my web app in smaller than before upgrade. Some form are broken and unable to use. Do you have any idea causes this issue?

I'm looking forward to your answser. Thanks for your support.

Hi Team,

1. Date column filter value shown full date instead of dd/MM/yyyy format. If I change the format  filter not working. 

Sample screenshot:

2. When I click on grid or some other area on the page selected filter text value like('Last month', 'Last week', 'Today', 'Yesterday') from custom date filter dropdown

Grid:

@(Html.Kendo().Grid<InteractiveReports.Model.ViewModel.UserReportResult>()
                                    .Name("userreport")
                                    .HtmlAttributes(new {  @class = "reportgrid" })
                                    //.ToolBar(toolBar => toolBar.Template(
                                    //"<a id='exportpdfdata' class='k-button k-button-icontext k-grid' href='#'><span class='k-icon k-i-pdf'></span>Export to PDF</a>" +
                                    //"<a class='k-button k-button-icontext k-grid-excel' href='#'><span class='k-icon k-i-excel'></span>Export to Excel</a>" +
                                    //"<a id='exportcsvdata' class='k-button k-button-icontext k-grid-csv' href='#'><span class='k-icon k-i-csv'></span>Export to CSV</a>"
                                    //))
                                    .Excel(excel => excel
                                        .AllPages(true)
                                        .FileName("User Report.xlsx")
                                        .Filterable(true)
                                    )
                                    .Columns(columns =>
                                    {

                                        columns.Bound(c => c.Team).Title("Team Name").Filterable(ftb => ftb.Multi(true).Cell(cell => cell.ShowOperators(false).Template("TeamDropDownList")))
                                          .Locked(true)
                                          .ClientTemplate("<a class = 'link-button' title='Team Report'  href='\\#' onclick=" + " onteamClick('#=escape(Team)#');>" + "#= Team != null && Team != '(Blanks)' ? Team : '' #" + "</a>")
                                          .Width(200);

                                        //columns.Bound(c => c.Team_type).Title("Team type").Filterable(ftb => ftb.Multi(true)).Width(200);
                                        columns.Bound(c => c.Team_type).Title("Team type").Filterable(ftb => ftb.Multi(true).Cell(cell => cell.ShowOperators(false).Template("Team_typeDropDownList")))
                                         .Width(200).ClientTemplate("#= (Team_type == '(Blanks)') ? '' : Team_type #");
                                        columns.Bound(c => c.Username).Title("Username")
                                         .Width(200).ClientTemplate("#= (Username == '(Blanks)') ? '' : Username #");
                                        columns.Bound(c => c.Title).Title("Title").Width(200).ClientTemplate("#= (Title == '(Blanks)')? '' : Title #");
                                        columns.Bound(c => c.First_name).Title("First Name").Width(200).ClientTemplate("#= (First_name == '(Blanks)') ? '' : First_name #");
                                        columns.Bound(c => c.Last_name).Title("Last Name").Width(200).ClientTemplate("#= (Last_name == '(Blanks)') ? '' : Last_name #");
                                        columns.Bound(c => c.Email_address).Title("Email Address")
                                         .Width(200).ClientTemplate("#= (Email_address == '(Blanks)') ? '' : Email_address #");
                                        columns.Bound(c => c.Company).Title("Company").Filterable(ftb => ftb.Multi(true).Cell(cell => cell.ShowOperators(false).Template("CompanyDropDownList")))
                                        .Width(200).ClientTemplate("#= (Company == '(Blanks)') ? '' : Company #");

                                        columns.Bound(c => c.User_status).Title("User Status").Filterable(ftb => ftb.Multi(true).Cell(cell => cell.ShowOperators(false).Template("User_statusDropDownList")))
                                         .Width(200).ClientTemplate("#= (User_status == '(Blanks)') ? '' : User_status #");
                                        columns.Bound(c => c.Total_time_logged_in).Title("Total Time Logged In").Width(200)
                                        .ClientTemplate("#= (Total_time_logged_in == '(Blanks)') ? '' : Total_time_logged_in #");
                                        columns.Bound(c => c.Last_login_date).Title("Last Login Date").Width(200)
                                        //.ClientTemplate("#= Last_login_date != null ? Last_login_date : '' #")
                                        .ClientTemplate("#= Last_login_date != null ? kendo.toString(Last_login_date, 'dd/MM/yyyy') : '' #")
                                        .Format("{0:dd/MM/yyyy}")
                                        //.Filterable(ftb => ftb.Cell(cell => cell.Template("datePickerFilter")));
                                        .Filterable(f => f.Cell(c => c.ShowOperators(false).Template("dateFilterCustomization")));
                                        columns.Bound(c => c.Last_login_time).Title("Last Login Time").Width(200)
                                        .ClientTemplate("#= (Last_login_time == '(Blanks)') ? '' : Last_login_time #");
                                        //.Filterable(f => f.Cell(c => c.ShowOperators(false).Template("timeFilterCustomization")));



                                        columns.Bound(c => c.No_of_Index_Actions).Title("No. of Index Actions").Width(200)
                                       .ClientTemplate("<a class = 'link-button' title='Index Report' href='\\#' onclick=" + " onidxActionClick('#=escape(UserId)#');>" + "#= No_of_Index_Actions != null ? No_of_Index_Actions : '' #" + "</a>")
                                           .Filterable(ftb => ftb
                                          .Cell(cell => cell
                                          .Operator("eq")
                                          .ShowOperators(false)
                                          .Template("integerFilter_nodecimal")
                                      ));                                    })
                                     .NoRecords(n => n.Template("NO DATA TO DISPLAY"))
                                     .Events(events => events.Filter("onFiltering"))
                                    .Resizable(resize => resize.Columns(true))
                                    .Reorderable(reorder => reorder.Columns(true))
                                    .ColumnMenu()
                                    .Sortable()
                                    .Scrollable()
                                    .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
                                    .Events(events => events.Filter("onFilter"))
                                    .Pageable(pageable => pageable
                                        .Refresh(true)
                                        .PageSizes(true)
                                        .PageSizes(new[] { 50, 100, 150 })
                                        )
                                    .DataSource(dataSource => dataSource
                                        .Ajax()
                                        .ServerOperation(false)
                                        .Read(read => read.Action("GetUserReportData", "UserReport").Data("passParameter"))
                                        .PageSize(50).Events(x => x.Error("onGridError"))
                                )
)

Customized Dropdown filter for date column:

var field = {};
var filter = true;
var dateformate = "DD/MM/YYYY";
const formatter = new Intl.DateTimeFormat(['ban', 'id'], { day: '2-digit', month: '2-digit', year: 'numeric' });

function dateFilterCustomization(args) {
    var date = new Date();
    var yesterday = new Date(date);
    yesterday.setDate(date.getDate() - 1);
    args.element.kendoComboBox({
        dataSource: [
            { text: "Today", value: "1" },
            { text: "Yesterday", value: "2" },
            { text: "This Week", value: "3" },
            { text: "Last Week", value: "4" },
            { text: "Last Month", value: "5" },
            { text: "Since Live", value: "6" },
            { text: "Custom Date range", value: "7" },



        ],
        placeholder: "Select",
        dataTextField: "text",
        dataValueField: "value",
        dataTypeField: "",
        valuePrimitive: true,
        value: 7,
        open: function (e) {
            var grid = $('.reportgrid').data("kendoGrid");
            var colname = e.sender.element[0].title;
            field = getColName(grid.columns, colname);
            if (grid.dataSource.filter() != undefined) {
                var filters = checkForExistingDates(grid);
                if (filters != undefined && filters.length > 0) {
                    var result = jQuery.grep(filters, function (item) { return item.operator == "gte" })
                    if (result != undefined && result.length > 0) {
                        $("#startDate").val(formatter.format(result[0].value));
                    }
                    else {
                        $("#startDate").val('');
                    }
                    result = jQuery.grep(filters, function (item) { return item.operator == "lte" })
                    if (result != undefined && result.length > 0) {
                        $("#endDate").val(formatter.format(result[0].value));
                    } else {
                        $("#endDate").val('');
                    }
                }
                else {
                    $("#startDate").val('');
                    $("#endDate").val('');
                }
            } else {
                $("#startDate").val('');
                $("#endDate").val('');
            }
        },
        select: function (e) {           
            e.preventDefault();

            var dataItem = e.dataItem;
            var grid = $('.reportgrid').data("kendoGrid");
            var colname = e.sender.element[0].title;
            field = getColName(grid.columns, colname);
            var vm = this;
            var text = dataItem.text;
            flag = parseInt(dataItem.value);
            if (flag == 1) {
                filterSingleDate(date);
            } else if (flag == 2) {
                filterSingleDate(yesterday);
            } else if (flag == 3) {
                getThisWeekData();
            } else if (flag == 4) {
                getPastWeekData();
            } else if (flag == 5) {
                getPastMonthData();
            } else if (flag == 6) {
                removeFilter(grid);
            }
            else if (flag == 7) {

                $(".daterangemodel").modal('toggle');

            }
            vm.text(text);
        }
    });
}

function startOfLastWeek() {
    var today = moment();
    var daystoLastMonday = 0 - (1 - today.isoWeekday()) + 7;
    var lastMonday = today.subtract('days', daystoLastMonday);
    return lastMonday;
}

function EndOfLastWeek() {
    var lastMonday = startOfLastWeek();
    var lastSunday = lastMonday.add('days', 6);
    return lastSunday;
}

function getPastWeekData() {
    var startDate = startOfLastWeek();
    var endDate = EndOfLastWeek();
    filterData(startDate, endDate, field);
}

function getThisWeekData() {
    var date = new Date();
    var startDate = startOfThisWeek(date);
    var endDate = endOfThisWeek(date);
    filterData(startDate, endDate, field);
}

Script:

function onFilter(e) {       

Model:

public class UserReportResult
{
    public string Team { get; set; }
    public string Team_type { get; set; }      
    public string Username { get; set; }
    public string Title { get; set; }
    public string First_name { get; set; }
    public string Last_name { get; set; } 

public DateTime ? Last_login_date { get; set; }

}

Can any admin tell me what is wrong??

Dear team,
Recently I've updated the kendo UI.
currently I'm using the this version.

Here I wrote the code for testing.

// cshtml code

@(Html.Kendo().Grid<Alliant.Controllers.ProductViewModel>()
        .Name("mixedSort")
        .Columns(columns => {
            columns.Bound(o => o.ProductName).Width(300);
            columns.Bound(p => p.UnitPrice).Width(300);
            columns.Bound(p => p.UnitsInStock).Width(300);
            columns.Bound(p => p.Discontinued).Width(300);
            columns.Bound(p => p.Group).Width(300);
        })
        .Pageable(pageable => pageable.ButtonCount(5))
        .Sortable(sortable => sortable
            .AllowUnsort(true)
            .SortMode(GridSortMode.Mixed)
            .ShowIndexes(true))
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(5)
            .Read(read => read.Action("Sorting_Orders_Read", "Testing"))
         )
    )

// Controller code
public ActionResult Sorting_Orders_Read([DataSourceRequest] DataSourceRequest request)
{
    List<ProductViewModel> lstData = new List<ProductViewModel>()
    {
        new ProductViewModel(){Group="A",ProductName="A1",UnitPrice=10,Discontinued=1,UnitsInStock=50},
        new ProductViewModel(){Group="A",ProductName="B1",UnitPrice=20,Discontinued=2,UnitsInStock=60},
        new ProductViewModel(){Group="B",ProductName="C1",UnitPrice=30,Discontinued=3,UnitsInStock=70},
        new ProductViewModel(){Group="C",ProductName="D1",UnitPrice=40,Discontinued=4,UnitsInStock=80},
        new ProductViewModel(){Group="C",ProductName="E1",UnitPrice=50,Discontinued=5,UnitsInStock=90},
    };

    return Json(lstData.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

// Model
public class ProductViewModel
{
    public string ProductName { get; set; }
    public decimal UnitPrice { get; set; }
    public int UnitsInStock { get; set; }
    public decimal Discontinued { get; set; }
    public string Group { get; set; }
}
Could you please help me to figure out the issue?
I also checked the jquery code.

// Jquery code render by kendo

I have created this basic panelbar, in which expandall is set to false and one of the panelbars (i.e., General Info) is set to be expanded by default.

The problem is now with the second panelbar (Advanced Info), which is collapsed by default, but is not able to expand even after trying.

All that's  changing is expand and collapse arrow.

The same was working properly in earlier versions.

Hoping for your earliest response.

     @(Html.Kendo().PanelBar()
             .Name("Panelbar").Events(e => e.Error("onError").Expand("OnExpand").Collapse("OnCollapse"))
             .ExpandAll(false)
             .Items(panelbar =>
             {
                 panelbar.Add().Text("General Info")
             .Expanded(true)
             .Content(@<div class="container" style="margin:1%;width:auto"><p>HI</p></div>);
                 panelbar.Add().Text("Advanced Info")
             .Content(@<div class="container" style="margin:1%;width:auto"><p>HI</p></div>);  
             })
         )
 </div>

Hi,

I noticed in the editor that when you click the "View HTML" button, the popup window isn't sized properly and you must scroll down to see the Update and Cancel buttons. 

It can be seen on your demo page...

https://demos.telerik.com/aspnet-mvc/editor/all-tools

Thanks