Telerik Forums
UI for ASP.NET MVC Forum
1 answer
180 views

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)

Anton Mironov
Telerik team
 answered on 13 Jul 2023
1 answer
159 views

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

 
Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 30 Jun 2023
0 answers
50 views

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

viji
Top achievements
Rank 1
 asked on 04 Apr 2023
0 answers
105 views

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.

 

viji
Top achievements
Rank 1
 asked on 04 Apr 2023
1 answer
227 views

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

 

Anton Mironov
Telerik team
 answered on 24 Mar 2023
2 answers
121 views

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!

Milena
Telerik team
 answered on 23 Nov 2022
0 answers
55 views

I'm using the Kendo version 2022.3.913.545

The default filter type selected in the dropdown is "DoesNotContain"!

When does it happen? when I add the localization file kendo.messages.**-**.min.js, while it should be "Contains"!

update: it seems Kendo selects the 5th (index 4) element of the filter dropdown as the default filter type! and in our language the order of the elements are as follows:

IsEqualTo,

IsNotEqualTo,

StartsWith,

Contains,

DoesNotContain,

EndsWith,

...

so the DoesNotContain is selected by default!

it is solvable by adding the following line

.Filterable(filter => filter.Operators(op=>op.ForString(t=>t.Clear().IsEqualTo("***").IsNotEqualTo("***").StartsWith("***").EndsWith("***").Contains("***").DoesNotContain("***").IsNotNullOrEmpty("***").IsNullOrEmpty("***"))).Mode(GridFilterMode.Row)))

it clears the filter types from the dropdown and puts item by item as you put in the list! On this occasion, I put the Contains filter type on the fifth position so it works!

but I don't want to use this method and want to use the Kendo localization only!!

 

Mahdi
Top achievements
Rank 1
Iron
 updated question on 12 Nov 2022
1 answer
67 views

Hi everyone,

I have a little problem with filtering my Grid and I hope that you can help me.

I am currently in the process of developing a grid in which I list all my projects with the associated data.
In the first column I list the project number in the form of strings. Usually all project numbers have a length of 9 characters. Due to certain circumstances, I also have entries of projects in my database where the project number is shorter than 9. (but I urgently need this data for another use case)

In the grid that I am developing here, I only want to list projects with a project number length of 9 characters. Is there any filter option where I can specify how long a cell's value must be for it to be displayed?
If a value has less than 9 characters, the entire row should be hidden. It is important to note: the rows cannot be edited and are only listed using a READ function.

In the picture (attachment) you can see an example. In this case, the first two rows should be filtered and hidden.

Thanks in advance
Lars

 

 

Anton Mironov
Telerik team
 answered on 08 Nov 2022
1 answer
62 views

Model for the Tag property is of complex type object 


 [UIHint("TaskTagEditor")]
 public List<NameId> TaskTags { get; set; }

// Class ----

    public class NameId
    {
        public int Id { get; set; }
        public string Name { get; set; }

    }

Kendo grid field: 


    columns.Bound(p => p.TaskTags).Width(240).ClientTemplate("#=taskTagsTemplate(TaskTags)#").EditorTemplateName("TaskTagEditor").Title("Tasks")
                                                        .Filterable(p => p.Multi(true)
                                                                    .CheckAll(false)
                                                                    .ItemTemplate("TaskTagsFilterItemTemplate")
                                                                    .DataSource(d =>
                                                                    {
                                                                        d.Read(read => read.Action("GetTaskTagsEditor", "TaskManager"));
                                                                    })
                                                    );

 

Client Template and Item template js:


    function taskTagsTemplate(data) {
        var template = "";
        for (var i = 0; i < data.length; i++) {
            template += (data.length == 1 || i == 0) ? data[i].Name : ("," + data[i].Name);
        }
        return template;
    }

    function TaskTagsFilterItemTemplate(e) {
        return "<span><label><input class='tag-filter-input' type='checkbox' name='" + e.field + "' value='#= Id #'/><span>#= Name #</span></label></span><br/>"
    }

 

Editor :

GetTaskTagsEditor


@model List<GrapeTree.Core.Model.TaskManager.NameId>

@(Html.Kendo().MultiSelectFor(m => m)
        .DataTextField("Name")
        .DataValueField("Id")
        .AutoBind(false)
        .TagMode(MultiSelectTagMode.Multiple)
        .DataSource(d =>
                {
            d.Read(read => read.Action("GetTaskTagsEditor", "TaskManager"));
        })
)

Controller method for option:


        public ActionResult GetTaskTagsEditor() {

            var tagList = _taskManager.GetActiveTaskTags()
                 .Select(tag => new NameId
                 {
                     Id = tag.Id,
                     Name = tag.Name

                 }).OrderBy(x => x.Name);

            var jsonSerializerSettings = new JsonSerializerSettings { ContractResolver = new DefaultContractResolver() };
            var json = JsonConvert.SerializeObject(tagList.ToList(), Formatting.Indented, jsonSerializerSettings);

            return Content(json, "application/json");
        }

Incell Editor is working fine  and Filter about to bind with muti select value but filtering doesn't work for this complex object

Milena
Telerik team
 answered on 24 Oct 2022
1 answer
269 views

I've seen examples in doing this in kendo ui
https://docs.telerik.com/kendo-ui/knowledge-base/use-nested-model-properties
but i can't figure out how in mvc.  I have two nested fields that i need to force the grid to treat as dates.

 

Anton Mironov
Telerik team
 answered on 08 Jul 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?