Bug report
Reproduction of the problem
- Reference kendo.all.min.js and kendo.all.min.js.map in a project
- Add a basic Grid:
<div id="grid"></div>
<script>
// The dataSource is initialized as a stand-alone widget that can be bound to the Grid.
var dataSource = new kendo.data.DataSource({
transport: {
read: {
// The remote endpoint from which the data is retrieved.
url: "https://demos.telerik.com/kendo-ui/service/products",
dataType: "jsonp"
}
},
pageSize: 10
});
$("#grid").kendoGrid({
// The dataSource configuration is set to an existing DataSource instance.
dataSource: dataSource,
pageable: true
});
</script>
- Open the browser's dev tools Source tab and place a breakpoint (e.g., on line 3715).
Current behavior
The breakpoint is added at the last line (326079) of the file.
Expected/desired behavior
The breakpoint is added at the desired line (e.g., 3715).
Environment
- Kendo UI version: 2023.3.1010
- jQuery version: x.y
- Browser: [ Chrome XX]
Bug report
The jQuery dependency is defined as follows in the package .nuspec file:
<dependency id="jQuery" version="(, 3.7.1]" />
This causes the following warning to appear when installing the package in a project:
Telerik.UI.for.AspNet.Mvc5 2024.3.1015 does not provide an inclusive lower bound for dependency jQuery (<= 3.7.1). jQuery 1.4.1 was resolved instead.
The affected packages are:
Telerik.UI.for.AspNet.Mvc5
Telerik.UI.for.AspNet.Mvc5.Trial
Reproduction of the problem
Install the Telerik.UI.for.AspNet.Mvc5 package in a project and check the warnings list.
Current behavior
Warning:
Telerik.UI.for.AspNet.Mvc5 2024.3.1015 does not provide an inclusive lower bound for dependency jQuery (<= 3.7.1). jQuery 1.4.1 was resolved instead.
Expected/desired behavior
Add a lower bound (https://learn.microsoft.com/en-us/nuget/reference/errors-and-warnings/nu1604) to resolve the warning about the jQuery dependency.
Environment
- Kendo UI version: 2024.3.1015
- jQuery version: x.y
- Browser: [all]
Bug report
Bundling the Kendo js files in an ASP.NET MVC application throws a NullReferenceException error. Reproduced with versions 2024.1.319 and 2024.2.514. The bundling works without exceptions in version 2023.3.1114.
Reproduction of the problem
- Add the following bundle to the BundleConfig.cs file:
bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
"~/Scripts/kendo/2024.2.514/kendo.web.min.js",
"~/Scripts/kendo/2024.2.514/kendo.aspnetmvc.min.js"
));
Instead of kendo.web.min.js you can use kendo.all.min.js with the same result.
- Render the scripts in the _Layout.cshtml's head element after jQuery by calling:
@Scripts.Render("~/bundles/kendo")
Current behavior
Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.
Workaround:
Use bundles.Add(new Bundle("~/bundles/kendo") instead of bundles.Add(new ScriptBundle("~/bundles/kendo")
Expected/desired behavior
No exception is thrown when bundling the Kendo script files.
Environment
- Kendo UI version: 2024.2.514
- jQuery version: x.y
- Browser: [all ]
I'm trying to modify the filter ui with a custom function that i passed to the kendo UI fuction.
here's my code :
@using Alstom_penali.Models.database;
@{
ViewBag.Title = "Tutte le penali";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="container-fluid">
<div class="row">
<h3>@ViewBag.Title</h3>
@*sotto permessi*@
@if (ViewBag.CanUploadFilePenali == string.Empty)
{
@(Html.Kendo().Upload()
.Name("up_supplychain")
.Messages(y => y.Select("Upload excel penali").UploadSelectedFiles("Avvia"))
.HtmlAttributes(new { accept = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" })
.Multiple(false)
.ShowFileList(false)
.Events(e => e.Success("onUploadSuccess"))
.Async(a => a
.Save("SuppChainExcelRead", "Summary", new { operation = "save" })
.Remove("SuppChainExcelRead", "Summary", new { operation = "remove" })
.AutoUpload(false)
)
)
<br />
}
@if (ViewBag.CanViewSummaryAll == string.Empty)
{
@(Html.Kendo().Grid<PenaliModel>
()
.Name("grid")
.Events(e => e.ExcelExport("excelExport"))
.Columns(
columns =>
{
columns.Bound(c => c.PO_Number).Title("PO Number").Width(125).Locked(true);
columns.Bound(c => c.Pos).Width(100).Locked(true);
columns.Bound(c => c.ddl_stato).Title("STATO").Width(180).Filterable(false).Sortable(false).Locked(true).ClientTemplate("#=ddl_stato.Text#").EditorTemplateName("DropDownEditor");
columns.Bound(c => c.ddl_Responsabilita).Title("Responsabilità").Width(200).Filterable(false).Sortable(false).Locked(false).ClientTemplate("#=descriptionTemplate(data) #").EditorTemplateName("DropDownEditorResponsabilita");
columns.Bound(c => c.isConQ).Title("Tipo").Width(125)
.Filterable(filter=> filter.UI("isConQRadioFilter"))
.Sortable(false)
.Locked(false)
.ClientTemplate("#=typeTemplate(data) #");
columns.Command(command => { command.Edit().Text("Modifica"); }).Width(100);
columns.Bound(c => c.Progressivo_Conferma).Width(150).Title("CONQ Report");
columns.Bound(c => c.DataInvioConferma).Title("Data Invio CONQ").Width(200).Format("{0:dd/MM/yyyy HH:mm}");
columns.Bound(c => c.NCR).Width(100);
columns.Bound(c => c.SupplierName).Title("Supplier Name").Width(200).Format("{0:n2}");
columns.Bound(c => c.ProgettoSito).Title("MBTO").Width(150);
columns.Bound(c => c.ImportoDaAddebitare).Title("Importo").Width(100).Format("{0:n2}");
columns.Bound(c => c.Importo_Negoziato).Title("Importo Negoziato").Width(150).Format("{0:n2}");
columns.Bound(c => c.Quality_Owner).Title("Quality Owner").Width(200);
columns.Bound(c => c.Progressivo_Avviso).Width(150).Title("ID_CLAIM");
columns.Bound(c => c.DataInvioAvviso).Title("Data Invio CLAIM ").Width(150).Format("{0:dd/MM/yyyy HH:mm}");
columns.Bound(c => c.DataInvioPenale).Title("Data Invio penale").Width(150).Format("{0:dd/MM/yyyy HH:mm}");
columns.Bound(c => c.NotaDebitoNr).Title("Nota debito").Width(125);
columns.Bound(c => c.DataInvioStorno).Title("Data Invio storno").Width(150).Format("{0:dd/MM/yyyy HH:mm}");
columns.Bound(c => c.NotaCreditoNr).Title("Nota credito").Width(125);
columns.Bound(c => c.Id);
columns.Bound(c => c.WBS).Width(200);
columns.Bound(c => c.Progressivo).Width(150);
columns.Bound(c => c.YearMonth).Width(150);
columns.Bound(c => c.Material).Width(200);
columns.Bound(c => c.Description).Width(300).ClientTemplate("<span class='ellipsis'>#:Description#</span>");
columns.Bound(c => c.Del_Note_Nr).Width(150);
columns.Bound(c => c.EmailProcurement).Title("Material planner").Width(200);
columns.Bound(c => c.TotalOrderQty).Width(150);
columns.Bound(c => c.ReceivedQtyInDelay).Width(150);
columns.Bound(c => c.OrderValue).Width(150).Format("{0:n2}");
columns.Bound(c => c.Stat_Del_Date).Width(150).Format("{0:dd/MM/yyyy HH:mm}");
columns.Bound(c => c.Del_Date).Width(150).Format("{0:dd/MM/yyyy HH:mm}");
columns.Bound(c => c.WeeksOfDelay).Width(150);
columns.Bound(c => c.ReceivedValue).Width(150);
columns.Bound(c => c.DataCreazione).Width(150).Format("{0:dd/MM/yyyy HH:mm}");
columns.Bound(c => c.DataModifica).Width(150).Format("{0:dd/MM/yyyy HH:mm}");
columns.Command(command => { command.Destroy().Text("Elimina"); }).Width(100);
})
.HtmlAttributes(new { style = "height: 500px;" })
.ToolBar(tools => tools.Excel().Text("Esporta excel"))
.Excel(excel => excel.AllPages(true).FileName("Penali.xlsx"))
.Editable(editable =>
{
editable.Mode(GridEditMode.InLine);
editable.ConfirmDelete("Sei sicuro?");
})
.Scrollable()
.Groupable()
.Filterable(filterable => filterable
.Operators(operators => operators
.ForString(str => str.Clear()
.IsEqualTo("E' uguale a").StartsWith("Inizia con").EndsWith("Finisce con")
.Contains("Contiene").DoesNotContain("Non contiene"))
.ForDate(dt => dt.Clear()
.IsGreaterThanOrEqualTo("Dopo o uguale al").IsLessThanOrEqualTo("Prima o uguale del"))
))
.Sortable()
.Selectable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
)
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.DataInvioAvviso).Editable(false);
model.Field(p => p.DataInvioPenale).Editable(false);
model.Field(p => p.DataInvioStorno).Editable(false);
model.Field(p => p.DataCreazione).Editable(false);
model.Field(p => p.DataModifica).Editable(false);
model.Field(p => p.Del_Date).Editable(false);
model.Field(p => p.Del_Note_Nr).Editable(false);
model.Field(p => p.Description).Editable(false);
model.Field(p => p.Det_Selected).Editable(false);
model.Field(p => p.EmailProcurement).Editable(false);
model.Field(p => p.ImportoDaAddebitare).Editable(false);
model.Field(p => p.Importo_Negoziato).Editable(false);
model.Field(p => p.Material).Editable(false);
model.Field(p => p.NotaCreditoNr).Editable(false);
model.Field(p => p.NotaDebitoNr).Editable(false);
model.Field(p => p.OrderValue).Editable(false);
model.Field(p => p.PO_Number).Editable(false);
model.Field(p => p.Pos).Editable(false);
model.Field(p => p.ProgettoSito).Editable(false);
model.Field(p => p.Progressivo).Editable(false);
model.Field(p => p.ReceivedQtyInDelay).Editable(false);
model.Field(p => p.ReceivedValue).Editable(false);
model.Field(p => p.Stat_Del_Date).Editable(false);
model.Field(p => p.SupplierName).Editable(false);
model.Field(p => p.TotalOrderQty).Editable(false);
model.Field(p => p.WBS).Editable(false);
model.Field(p => p.WeeksOfDelay).Editable(false);
model.Field(p => p.YearMonth).Editable(false);
model.Field(p => p.NCR).Editable(false);
model.Field(p => p.Progressivo_Avviso).Editable(false);
model.Field(p => p.Progressivo_Conferma).Editable(false);
model.Field(p => p.Quality_Owner).Editable(false);
model.Field(p => p.ddl_stato).DefaultValue(new SelectListItem() { }); //unico editabile
model.Field(p => p.ddl_Responsabilita).DefaultValue(new SelectListItem() { });
model.Field(p => p.isConQ).Editable(false);
model.Field(p => p.DataInvioConferma).Editable(false);
})
.Events(events =>
{
events.RequestEnd("onRequestEnd");
events.Error("onGridError");
})
.Read(read => read.Action("Penali_List", "Summary"))
.Update(update => update.Action("Penali_Update", "Summary"))
.Destroy(update => update.Action("Penali_Destroy", "Summary"))
.PageSize(10)
)
)
}
else
{
<p style="font-size:16px;color:red">@ViewBag.CanViewSummaryAll</p>
}
</div>
</div>
<div id="Pop_up" style="display:none">
<p>Seleziona di chi sarà la responsabilità di questa penale</p>
</div>
@section scripts {
<script type="text/javascript">
function isConQRadioFilter(element) {
// Create radio buttons for filtering boolean values
var html = `
<label>
<input type="radio" name="isConQFilter" value="true" /> CONQ
</label>
<label>
<input type="radio" name="isConQFilter" value="false" /> Ritardo
</label>
`;
// Append the radio button HTML to the filter container
element.append(html);
// Trigger filtering when a radio button is clicked
element.find("input[type=radio]").change(function () {
var filterValue = $(this).val();
var grid = $("#grid").data("kendoGrid");
grid.dataSource.filter({
field: "isConQ",
operator: "eq",
value: filterValue === "true" // Convert the value to a boolean
});
});
}
function onEdit(e) {
}
function excelExport(e) {
var sheet = e.workbook.sheets[0];
var template2 = kendo.template(e.sender.columns[2].template);
var template3 = kendo.template(e.sender.columns[3].template);
var data = e.data;
for (var i = 0; i < data.length; i++) {
sheet.rows[i + 1].cells[2].value = template2(data[i]);
sheet.rows[i + 1].cells[3].value = template3(data[i]);
if (data[i].isConQ) {
sheet.rows[i + 1].cells[4].value = "CONQ";
} else {
sheet.rows[i + 1].cells[4].value = "Ritardo";
}
}
}
function descriptionTemplate(data) {
if ((data.ddl_stato.Text == "INLAVORAZIONE" || data.ddl_stato.Text == "NEGOZIATA") && data.ddl_Responsabilita.Text != null) {
return data.ddl_Responsabilita.Text;
}
else {
return "";
}
}
function typeTemplate(data) {
var html;
if (data.isConQ) {
html = kendo.format(
"<a class=\"k-button\" href='" + '@Url.Action("Create_Penale_CONQ", "Summary")' + "/" + data.Id + " '>CONQ</a> ",
);
} else {
html = kendo.format(
"Ritardo ",
);
}
return html;
}
//(function () {
// isConQFilter("ciao");
//})();
function isConQFilter(element)
{
console.log("isConQFilter called");
element.kendoDropDownList({
dataSource: [
{ text: "CONQ", value: true },
{ text: "Ritardo", value: false }
],
dataTextField: "text",
dataValueField: "value",
optionLabel: "-- Seleziona Tipo --",
valuePrimitive: true
});
}
//function isConQFilter(element) {
// debugger;
// console.log("isConQFilter called");
//}
</script>
}
<style>
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.k-grid-header .k-header {
height: 20px;
padding: 0;
}
.k-grid tbody tr {
line-height: 14px;
}
.k-grid tbody td {
padding: 1px;
}
</style>
the coulm i'm talking about is the "isConq" one, i would like to show "Conq" or "Ritardo" instead of "è vero" or "è falso".
Following the doc, i'm calling the "isConQFilter" js function, but it is never triggered by the kendo.
Where am i wronged?
If you need something else, please, tell me.
I'm using kendo mvc grid version 2016.
Bug report
Regression in R1 2023.
Reproduction of the problem
- Set the following HtmlAttributes configuration in a Grid column:
columns.Bound(p => p.OrderDate).HtmlAttributes(new { title = "Order Date: #=kendo.toString(OrderDate, 'dd-MM-yyyy')# " });
Current behavior
kendo.toString is not executed and as a result the date is not formatted. The exact value of the title attribute, as shown above is rendered as title of the cell.
Expected/desired behavior
The logic is executed and the OrderDate value is rendered in the title with the specified format.
Environment
- Kendo UI version: 2023.1.117
- jQuery version: x.y
- Browser: [all]
@(Html.Kendo().Grid<VIP_Logic.Models.Dashboard.CriteriaModel>().Name("dgdCriteria")
.Columns(column =>
{
column.Bound(b => b.ParamIndex).Title("No.").Width(40);
column.ForeignKey(b => b.ColumnName, (IEnumerable<SelectListItem>)ViewBag.LstColumnNames, "value", "text").HtmlAttributes(new { style = "text-align: left", onChange = "onChangeColumn('#=ParamIndex#');" }).Title("Column").Width(100);
column.ForeignKey(b => b.Operator, (IEnumerable<SelectListItem>)ViewBag.LstOperators, "value", "text").HtmlAttributes(new { style = "text-align: left", onChange = "onChangeOperator('#=ParamIndex#');" }).Title("Operator").Width(100);
column.Bound(b => b.ParamValue).HtmlAttributes(new { style = "text-align: left", onChange = "setCriteriaXml();" }).Title("Value").Width(150).Encoded(false);
column.Bound(b => b.ParamIndex).ClientTemplate("<button class= 'k-button' type='button' onclick=onRemoveCriteria('#=ParamIndex#')>" + "Remove" + "</button>").HtmlAttributes(new { style = "text-align: center" }).Title(string.Empty).Width(50);
})
All the function in onchange attribute required a parameter ParamIndex. In old version, the syntax "#=ParamIndex#'" still work fine, but since i upgrade Kendo UI to latest version, this syntax doesn't work anymore. How can i make it work like old version?
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) {
if (e.filter && e.filter.filters[0].field == "Last_login_date" || e.filter && e.filter.filters[0].field == "Creation_date" || e.filter && e.filter.filters[0].field == "Invitation_date" || e.filter && e.filter.filters[0].field == "Registration_date") {e.filter.filters[0].operator = function (item, value) {
var itemValue = new Date(item);
var userValue = new Date(value);
var condition = itemValue.getFullYear() == userValue.getFullYear()
&& itemValue.getMonth() == userValue.getMonth()
&& itemValue.getDate() == userValue.getDate();
return condition;
};
}
}
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??
When I am trying to use your components, I have to look things up on your web site. Considering you develop web site components, I would think that your site would behave very well. What I find is that I am often frustrated by web site. Here is an example:
https://docs.telerik.com/aspnet-mvc/api/kendo.mvc.ui.fluent/taskboardbuilder?_gl=1*3hzp1t*_ga*MTEwODg5NTUzNy4xNjc5MDc0ODQy*_ga_9JSNBCSF54*MTcxNzE3MjQ2NS4zNDMuMS4xNzE3MTczMzA1LjE2LjAuMA..*_gcl_aw*R0NMLjE3MTY0NzU0MDYuQ2owS0NRancwcnV5QmhEdUFSSXNBTlNaM3dwOXNTVTZDZC1rU0ViRVdYNDNjYVV2U0pnOWZOcFpHSk10YzVmOWhOX3hZY3owQlppb045RWFBbVpnRUFMd193Y0I.*_gcl_dc*R0NMLjE3MTY0NzU0MDYuQ2owS0NRancwcnV5QmhEdUFSSXNBTlNaM3dwOXNTVTZDZC1rU0ViRVdYNDNjYVV2U0pnOWZOcFpHSk10YzVmOWhOX3hZY3owQlppb045RWFBbVpnRUFMd193Y0I.*_gcl_au*MTAyOTkxNjgzOC4xNzEyOTMxMDQ3&_ga=2.233747739.449664680.1716902667-1108895537.1679074842&_gac=1.124170360.1714792673.Cj0KCQjwltKxBhDMARIsAG8KnqWeETNM6gbjk2Jt1wTc9LrEO5gPp1cwyMu5bYB9fTjPB6DpZ_mC0MsaAixAEALw_wcB
On this page you basically have three main sections:
The "Api reference" list on the left with a vertical scroll bar.
The "IN THIS ARTICLE" list on the right. No scrollbar
The actual api methods in the middle which scrolls with the main scroll bar.
But the "IN THIS ARTICLE" list section on the right never scrolls. I would like to be able to scroll through the list to see possible methods, but I can't. I know they are there to help navigate to a method but since a bunch of methods are basically cut off .....
Remember that first impressions aren't the only impression. You can make the sale with your demos, but can you keep the customer with your documentation?
I would recommend that you look at your MVC and ASP.NET core products and try to build some consistency.
When I learn one component, I kind of expect other similar components to be close to the others. For instance TreeList and Grid both have toolbars, yet the builders use different capitalizations for their names. Treelist and Grid both have editable settings, but Treelist does not have the method AdditionalViewData.
There are many more inconsistency that make these components really hard to use.
In a Selectable grid, when only one column is shown in the grid, and the model's Id field is specified, an error occurs on selection.
If you include more than one column (must be more than one visible) it works correctly.
If the model's Id is not specified, it works correctly even with only one column visible.
@(Html.Kendo().Grid<TelerikMvcApp1.Models.OrderViewModel>()
.Name("grid1")
.Columns(columns => {
columns.Bound(p => p.ShipName);
columns.Bound(p => p.ShipCity).Hidden(true);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Selectable(s => s.Mode(GridSelectionMode.Single))
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Grid"))
.Model(m => m.Id("OrderID"))
)
)
Here, I am Using a Kendo MVC Grid to show Customers data. I had applied multiple columns with anchor tag for redirection from one grid to another Page. Some how First two rows only by default showing different color than other rows. Actually First two rows by default showing :hover effect as I checked it in Inspect mode and other rows showing actual color which is applied in anchor tag link colors.
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);
}
// Modelpublic 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
The Grid should allow switching between case sensitive and case insensitive filtering.
When we are managing large volumes of data with several thousand datasource objects (grid rows) all of the rows need to be transported with each event.
This leads to errors with the json being too large to serialize.
We wish to restrict the data footprint and only return data for the page requested.
so if the grid has 100 pages and page size is 10 we only want to return the 10 rows required for the page, not 1000 rows.
This is not possible with the Kendo grid.
To work around this issue we have devised a strategy to return the the number of datasource objects Kendo grid expects up to the requested page count, but they are empty objects with no data, and then only have the last 10 rows populated with data.
It would be better for the grid control just to expect the number of results expected to the selected page and not have to add the dummy rows, so long as the total number of rows is provided so that the grid knows how many pages there are.
Our work around looks something like this in asp.net MVC
var users = cm.getUsers();
var result = new DataSourceResult();
var results = new List<user>();
int index = 0;
if (pageNum == 1)
results = users.Take(pageSize).ToList();
else
{
index = pageSize * (pageNum - 1);
results = users.Skip(index).Take(pageSize).ToList();
}
List<user> output = null;
[This is the bit that should be handled by the kendo grid, without the need for dummy rows to further reduce json size]
if (index == 0)
{
output = new List<user>(results);
}
else
{
output = new user[index].ToList();
output.AddRange(results);
}
result = output.ToDataSourceResult(request);
result.Total = users.Count();
return Json(result, JsonRequestBehavior.AllowGet);
I'm using the ClientTemplate-Feature to render buttons for CRUD-actions in grids. For one entity I have to use a TreeList instead of a Grid due to parent-child relations. It would be great if I could use the same templates I use for the grid for the treelist as well.
Example:
columns.Bound(x => x.UserName)
.ClientTemplate("<a href='" + Url.Admin().Account() + "/#= Id#/edit'>#= UserName #</a>")
.Width(300);
I have a cshtml page that uses Kendo UI ASP.NET MVC that does the following:
- sends an ajax request to a controller action method,
- opens a new tab using window.open(),
- displays a temporary message to let the user know that something is happening,
- then overwrite the new tab content using the view that is contained in the ajax response.
The view contains one or more grid widgets (the number depends on how many result types were requested) and each grid is set up to export Excel.
The problem is that when window.open() is used to open a new tab, the browser history state is null and the window.location.href is empty with the browser location showing "about:blank". For Chrome and Firefox, this does not cause any issues when exporting excel for the grid. However, when using Edge with this situation, when the Export to Excel grid toolbar button is clicked and the onExportExcel event is fired, the browser Open or Save dialog prompt is displayed but the active tab (the one that contained the grid) closes. This behaviour is very undesireable. The ProxyUrl grid excel option does not fire since Edge supports javascript file saving.
A workaround for this situation is to forcibly set the new tab window object location href by using the window.history.pushUpdate function. A code snippet is included below.
let dataModel = {Id = 123571113, Name="jason bourne"};
let jsonModel = JSON.stringify(dataModel);
let curDate = new Date();
let targetUrl = '@Url.Action("Reports", "Report", new { @area = "Reports" })';
let targetWindowName = "something meaningful" + " " + curDate.toISOString();//add datetime stamp to avoid issue where you cannot open a window with the same name as the current window.
let html = "some html content to provide a temporary message to your audience";
let targetWindow = window.open(targetUrl, targetWindowName);
if (targetWindow !== null && targetWindow !== undefined)
{
targetWindow.document.write(html);
targetWindow.document.close(); // to finish loading the page
targetWindow.document.title = targetWindowName;
//attempt to forcibly update the URL in the history and target window location to fix problem with grid export to excel on Edge browser
let targetWindowHistoryHref = window.location.href;
if (oModel.BuildingDesigns !== null && oModel.BuildingDesigns !== undefined && oModel.BuildingDesigns.length > 0) {
targetWindowHistoryHref += "?oBuildingDesignId=" + oModel.BuildingDesigns[0].ObfuscatedBuildingDesignId + "&BuildingDesignName=" + oModel.BuildingDesigns[0].BuildingDesignName;
} else {
targetWindowHistoryHref += "?" + oModel.Target;
}
targetWindow.history.pushState(null, null, targetWindowHistoryHref);
}
$.when(
$.ajax({
type: "POST",
dataType: "html", // this is the data type expected to be returned from the controller method
contentType: "application/json", // this is the content type expected by the controller method
url: targetUrl,
data: jsonModel,
beforeSend: function() {
console.log(".... submitting report request");
athena.loader.loading("submitting report request");
},
success: function(response) {
athena.loader.stopLoading();
if (debugLevel > 2) {
console.log(".... response = " + response + " : ", response);
}
//attempt to populate the target browser tab with the response
try {
console.log(".... attempting to open a browser tab and populate it with the HTML response object");
console.log(".... targetWindow = " + targetWindow);
//will trigger popup blockers :: targetWindow = window.open("", oModel.Target);
if (targetWindow !== null) {
if (response === null || response === undefined) {
targetWindow.document.body.innerHTML = '';
} else {
//completely replace the existing document (not just the innerhtml)
targetWindow.document.open();
targetWindow.document.write(response);
targetWindow.document.close();
targetWindow.document.title = targetWindowName;
}
}
} catch (ex) {
// do nothing, just catch when the open fails.
console.log("error: " + ex.message);
}
},
error: function(jqXhr, textStatus, errorThrown) {
console.log('.... error :: ajax status = ' + textStatus + ' :: errorThrown = ' + errorThrown);
console.log('....-- jqXhr.responseText :: \n' + jqXhr.responseText);
}
})
).done(
function() {
console.log(".... report request has completed");
targetWindow.focus();
}
);
There is a Kendo Validation in addition to ASP.net MVC one.
There is a need for a method or script to disable the Kendo Validation and enforce the code to follow rules we define in the model.
Currently we have to write validation bypass script for each field, but I am looking for a way to disable Kendo Validations for the entire project or/and for specific page and it follows validation rules from the MVC model.
In most cases, validations from the MVC are sufficient and there is no need for redundance validations from the telerik.
My understanding after talking to support is that a grid with a popup editor has code behind the scenes that stops adverse scrolling behavior when the popup window closes. However, under certain circumstances, this doesn't work if you have a grid nested in your popup editor that also has a popup editor. As it was described to me, this "behavior is not directly related to the Grid, but the Kendo Window. Generally, it provides the preventScroll property, but I am afraid this scenario is more complex due to the window being internally embedded into the Grid".
The exact scenario I found was that if you shrink you browser window small enough that you need to use some scrolling, scroll down your grid a little, then do something to cause the popup editor to open. Scroll down again to get to your nested grid, open that popup editor, then close it. The browser then auto scrolls to the top.
I was given this code to fix the issue (and it DOES fix it):
<script>
kendo.ui.Grid.fn._destroyEditableOrg = kendo.ui.Grid.fn._destroyEditable;
kendo.ui.Grid.fn._destroyEditable = function () {
var that = this;
if (that._editContainer) {
var kw = that._editContainer.data().kendoWindow;
kw.setOptions({
modal: false
});
}
that._destroyEditableOrg();
};
</script>The problem is that these fields aren't documented... I would never have figured this out on my own. So my feature request is that either this behavior is fixed or these properties exposed from the Grid settings.
-Steven
PS: For Telerik, the original ticket was 1589389.