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??
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.
@(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?
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.
In many applications we use passwords. Would love to have a field that allows for the setting of a type to "password" without templates.
.PasswordTextField() or something similar.
**Added by Admin**
If I pass in the model, the fields should get affected by the `DataType(Datatype.Password)` data annotation attribute.