I had a request to change the filtering of a certain column from "Starts With" to use a multi-select checkbox type filter to facilitate selecting 5-10 random items.  Then of course some other users prefer the "Starts With" type of filtering.  My solution is to have dual columns for that particular field, one with each filter type.  

Since my grids save user preferences in local storage between sessions, the users can hide whichever column has the filtering they don't prefer and just use the other one.  When they reload the page, their choice of column persists and their filtering is how they like it.

Darron

 

 

I am using a Kendo.Filter object like the following to filter results in a Kendo Grid:

 I have helper code to handle the toolbar in my Kendo Grid like the following, :

I also have some JavaScript in a function to apply the filter when the Apply Filter button is clicked, as seen here:

 

The problem I am having is if I enter an invalid Leap Year date (e.g. 2/29/2003, since 2023 didn't have a February 29th), I get no data back; however, if I enter a valid Leap Year (e.g. 2/29/2004), my Kendo Grid will show data.  Is there a way to validate the date that is being entered manually into a DatePicker field used for filtering?  That is, if I use the DatePicker, it will not show me 2/29/2003 as an option, but if I type in 2/29/2003 and click Apply Filter, it doesn't throw any kind of error about 2/29/2003 being invalid.

I have a ASP.NET MVC Grid


As you can see the column shows CompanyName, but is bound to CompanyId.

When trying to get filter with checkboxes for company, using:

I get the checkboxes with CompanyId.

Is there any way to show the CompanyName instead of the CompanyId with the checkbox filter?

hi,

When Multi checkbox column is enabled in MVC Kendo Grid, it keeps spinning and not loading filter checkboxes for large dataset.
Please find the sample code attached.

We use Kendo.Mvc, Version=2022.1.412.0.
This sample code uses lesser version.

Regards

Karthik

Given a grid, GridFilterMode.Row, with 3 columns (First Name, Surname, Nick Name) with 100 rows.

Given I have filtered the Surname column and now the grid is displaying 10 rows based on the applied filter on the Surname column.

If type one or more letters in the "First Name" field filter it will suggest all corresponding values to the dataSource even the ones that are not being displayed in the grid due to the applied filter in the column Surname.

Is there any way to suggest only values in the "view()" data (only values displayed in the grid)?

I haven't found any additional information on the documentation.
Any help is welcome.

Example:

• No filters have been applied so far:
  

• Applying a filter to the "Freight" column to values bigger than "890.00":
  

• Grid has now 2 rows based on the Freight filter. The user has typed on the "Ship Name" filter column and the grid has suggested all possible names that match  with it instead suggest only based on the 2 available rows (QUICK-Stop | Queen Cozinha)

Hello,
I've use kendo Grid MVC for my project and want to change the Input type when filter (in one field):

• choose "Contains" display to input text.
  
• choose "Is Equal To" display Select Option.

What i want like the below image: 

 

Have any way to config this ?

My Source Code : 

<script type="text/javascript">

    $(window).resize(function () {
        var gridElement = $("#BudgetApprovalAuditGrid"),
            newHeight = gridElement.innerHeight(),
            otherElements = gridElement.children().not(".k-grid-content"),
            otherElementsHeight = 0;

        otherElements.each(function () {
            otherElementsHeight += $(this).outerHeight();
        });

        gridElement.children(".k-grid-content").height(newHeight - otherElementsHeight);
    });

    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }

    function datePicker(args) {

        args.kendoDatePicker({
            format: "dd/MM/yyyy"
        });
    }

    function GetListDataSetNameFilter(element, fieldName) {
        element.kendoDropDownList({
            dataSource: {
                transport: {
                    read: {
                        url: "@Url.Action("_GetListDataSetNameFilter", "BudgetApprovalAudit")",
                    }
                }
            },
            filter: "Contains",

            optionLabel: "-Select Value-"
        });
    }

    function GetListBudgetNameFilter(element, fieldName) {
        element.kendoDropDownList({
            dataSource: {
                transport: {
                    read: "@Url.Action("_GetListBudgetNameFilter", "BudgetApprovalAudit")",
                }
            },
            filter: "Contains",

            optionLabel: "-Select Value-"
        });
    }
    function GetListApprovalStatusFilter(element, fieldName) {
        console.log("elementelementelementelementelementelementelement>>>>>>>>>>>>>>>>>>>>>>>>", element)
        element.kendoDropDownList({
            dataSource: {
                transport: {
                    read: {
                        url: "@Url.Action("_GetListApprovalStatusFilter", "BudgetApprovalAudit")",
                    }
                }
            },
            filter: "Contains",
            optionLabel: "-Select Value-"
        });
    }
    function OnDataBoundBudgetApprovalAuditGrid(e) {
        //console.log("OnDataBoundBudgetApprovalAuditGrid",e)
        //if ($('#BudgetApprovalAuditGrid tbody .k-grouping-row:contains("DatasetName") td p').length != 0) {
        //    for (var i = 0; i < $('#BudgetApprovalAuditGrid tbody .k-grouping-row:contains("DatasetName") td p').length; i++) {
        //        var tempHTML = $('#BudgetApprovalAuditGrid tbody .k-grouping-row:contains("DatasetName") td p')[i].innerHTML
        //        //do something
        //        //tempHTML


        //        $('#BudgetApprovalAuditGrid tbody .k-grouping-row:contains("DatasetName") td p')[0].innerHTML = tempHTML

        //    }
        //    //$('#BudgetApprovalAuditGrid tbody .k-grouping-row:contains("DatasetName") td p')[0].innerHTML = "Your text";
        //}
    }

</script>

 

<div style="height: calc(100vh - 220px);">
    <div style="height: 900px">
        @(Html.Kendo().Grid(Model)
        .Name(gridId)
        .HtmlAttributes(new { })
        .Columns(columns =>
            {
            columns.Bound(p => p.DatasetName).Title("Dataset Name22222222").ClientGroupHeaderTemplate("#=value#").Width(100)
                                             .Filterable(x => x.UI("GetListDataSetNameFilter").Extra(false).Operators(operators => operators.ForString(str => str.Clear().IsEqualTo("Is Equal To"))));

            columns.Bound(p => p.BudgetName).Title("Budget Name").Width(150).ClientGroupHeaderTemplate("#=value#")
                                            .Filterable(x => x.UI("GetListBudgetNameFilter").Extra(false).Operators(operators => operators.ForString(str => str.Clear().IsEqualTo("Is Equal To"))));
            
            columns.Bound(p => p.ApprovalStatus).Title("Approval Status").Width(300)
                                                .Filterable(x => x.UI("GetListApprovalStatusFilter").Extra(false).Operators(operators => operators.ForString(str => str.Clear().IsEqualTo("Is Equal To"))));
            
            columns.Bound(p => p.ApprovalPath).Title("Full path").Width(300);
            columns.Bound(p => p.UserName).Title("User Name").Width(150);
            columns.Bound(p => p.CompletedUserName).Title("Completed User Name").Width(150);
            columns.Bound(p => p.TimeDateString).Title("Created Date").Width(200)
                                                .Filterable(x => x.Extra(false).Operators(operators => operators.ForString(str => str.Clear().Contains("Contains"))));

            columns.Bound(p => p.CompletedTimeDateString).Title("Completed Date").Width(200)
                                                .Filterable(x => x.Extra(false).Operators(operators => operators.ForString(str => str.Clear().Contains("Contains"))));

            columns.Template(@<text> </text>).Title("&nbsp;");

            })
        .ToolBar(toolbar =>
        {
        toolbar.Template(@<text><a class="k-button" style="opacity:0"></a></text>);
        })
        .DataSource(ds => ds.Ajax().Read("_GetListBudgetApproval", "BudgetApprovalAudit")
        .Events(events => events.Error("error_handler"))
        ).Events(x=>x.DataBound("OnDataBoundBudgetApprovalAuditGrid"))
        .Sortable()
        .Scrollable()
        .Filterable(filterable => filterable
                .Extra(false)
                .Operators(operators => operators
                    .ForString(str => str.Clear()
                        .IsEqualTo("Is Equal To")
                        .Contains("Contains")
                    ))
                )
        .Resizable(resize => resize.Columns(true))
        .Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row)))
    </div>
</div>

Thanks

 

Focus order is inappropriate after Edit column settings popup is collapsed as focus moves from top of the page

observation:
When Edit column settings popup is collapsed, focus is expected to observed on the triggered respective ‘Edit column settings’ control and on next ‘Tab’ navigation, focus should move to the next control present after ‘Edit column settings’ control

1.Filter buttons present in the table are accessible through keyboard when we press ALT+down arrow but when we try to open filter, respective column header filter is not opening

2.Focus is not retaining back on the filter button after closing the Filter dialog using Esc key.

 

Hi,

Is it possible to use filtering with List of child objects?

 

Example :

 

User

- Guid Id

- String Name

- List<PhoneNumber> PhoneNumbers

- Adress Adress

 

PhoneNumber

- Guid Id

- String PhoneNumber

 

Adress

- Guid Id

- String Street

 

If i filter on the street off a Adress and in the FilterDesriptor member is "Adres.Street" than it works correctly.

But how can you do it if it is a list? Like i want to filter on the PhoneNumbers?

I already tried "PhoneNumbers.PhoneNumber", but than i got the error :

System.ArgumentException: Invalid property or field - 'PhoneNumber' for type: ICollection`1

         at Kendo.Mvc.Infrastructure.Implementation.Expressions.MemberAccessTokenExtensions.CreateMemberAccessExpression(IMemberAccessToken token, Expression instance)
         at Kendo.Mvc.Infrastructure.Implementation.Expressions.ExpressionFactory.MakeMemberAccess(Expression instance, String memberName)
         at Kendo.Mvc.Infrastructure.Implementation.Expressions.ExpressionFactory.MakeMemberAccess(Expression instance, String memberName, Boolean liftMemberAccessToNull)
         at Kendo.Mvc.Infrastructure.Implementation.Expressions.PropertyAccessExpressionBuilder.CreateMemberAccessExpression()
         at Kendo.Mvc.Infrastructure.Implementation.Expressions.FilterDescriptorExpressionBuilder.CreateMemberExpression()
         at Kendo.Mvc.Infrastructure.Implementation.Expressions.FilterDescriptorExpressionBuilder.CreateBodyExpression()
         at Kendo.Mvc.FilterDescriptor.CreateFilterExpression(ParameterExpression parameterExpression)
         at Kendo.Mvc.FilterDescriptorBase.CreateFilterExpression(Expression instance)
         at Kendo.Mvc.Infrastructure.Implementation.Expressions.FilterDescriptorCollectionExpressionBuilder.CreateBodyExpression()
         at Kendo.Mvc.CompositeFilterDescriptor.CreateFilterExpression(ParameterExpression parameterExpression)
         at Kendo.Mvc.FilterDescriptorBase.CreateFilterExpression(Expression instance)
         at Kendo.Mvc.Infrastructure.Implementation.Expressions.FilterDescriptorCollectionExpressionBuilder.CreateBodyExpression()
         at Kendo.Mvc.CompositeFilterDescriptor.CreateFilterExpression(ParameterExpression parameterExpression)
         at Kendo.Mvc.FilterDescriptorBase.CreateFilterExpression(Expression instance)
         at Kendo.Mvc.Infrastructure.Implementation.Expressions.FilterDescriptorCollectionExpressionBuilder.CreateBodyExpression()
         at Kendo.Mvc.Infrastructure.Implementation.Expressions.FilterExpressionBuilder.CreateFilterExpression()
         at Kendo.Mvc.Extensions.QueryableExtensions.Where(IQueryable source, IEnumerable`1 filterDescriptors)
         at Kendo.Mvc.Extensions.QueryableExtensions.CreateDataSourceResult[TModel,TResult](IQueryable queryable, DataSourceRequest request, ModelStateDictionary modelState, Func`2 selector)
         at Kendo.Mvc.Extensions.QueryableExtensions.ToDataSourceResult(IQueryable queryable, DataSourceRequest request, ModelStateDictionary modelState)
         at Kendo.Mvc.Extensions.QueryableExtensions.ToDataSourceResult(IQueryable queryable, DataSourceRequest request)
         at Kendo.Mvc.Extensions.QueryableExtensions.<>c__DisplayClass9_0.<ToDataSourceResultAsync>b__0()

 

Greetings,

Maxime

 

I am using kendo grid UI in my MVC application. I want to filter the multiple comma separated input values row wise, for single input value its working fine but for multiple comma separated values its not working. 

Please let me know if it is possible to filter the multiple comma separated values.

Thanks in Advance!