Change to Input/Select Option when change the Operators

[Kiet]

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]

Hi Kiet,

Currently, this functionality to change the filter based on the operator type is not available for the Kendo UI Grid.  That being said, I have created a feature request with a vote on your behalf asking for the functionality to be added in the future.  Please feel free to follow it for potential updates, and provide comments/details within the thread for our developer community.  

Regards,
Patrick | Technical Support Engineer, Senior
Progress Telerik

[Kiet]

Hi Pattrick,

Thank you for your help, I'll folow it.

Have a good day.

Regards,