Need More Info
Last Updated: 17 Jun 2024 09:32 by ADMIN
Created by: Rahul
Comments: 1
Category: UI for ASP.NET MVC
Type: Bug Report
0

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??

Need More Info
Last Updated: 04 May 2024 04:53 by Pinkesh

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