Grid Search filter

[Rajesh]

Hi there,

need to search kendo ui grid by text box. please let me know is possible.

Thanks,
Rajesh.C

[Bobby]

Take a look at the demo at Toolbar Template for Kendo Grid
Replace the dropdown with the text field and then set the filter on the grid when the text is changed. I used an autocomplete field and this is what I did

var autocompleteSymbol = $("#symbol").kendoAutoComplete({

    dataTextField: "TextField",

    dataValueField: "ValueField",

    dataSource: sharedDataSource,

    change: function () {

        var value = this.value();

        if (value) {

            grid.data("kendoGrid").dataSource.filter({ field: "ValueField", operator: "eq", value: value });

        } else {

            grid.data("kendoGrid").dataSource.filter({});

        }

    }

});

[Stefan]

Is there any way to make this so it works with MVC Razor syntax?

@(Html.Kendo().AutoComplete()

   .Name("searchAutoComplete") 

   .DataTextField("SalonName") 

   .Filter("Contains") 

           .DataSource(dataSource =>

     {

         dataSource.Read(read =>

            {

                read.Action("GetAutoCompleteItems", "Salon"); 

            })

            .ServerFiltering(false); 

     })

 )

 </p>

 

<div id="Grid">

@(Html.Kendo().Grid(Model)   

    .Name("Grid")

    .Columns(columns =>

    {

        columns.Bound(item => item.SalonID);

        columns.Bound(item => item.Avtnr);

        columns.Bound(item => item.SalonName);

        columns.Bound(item => item.Street);

        columns.Bound(item => item.ZipCode);

        columns.Bound(item => item.City);

        columns.Bound(item => item.Telephone);

        columns.Bound(item => item.SalonEmail);

        columns.Bound(item => item.Description);

        columns.Bound(item => item.ContactPerson);

    })

    .ColumnMenu()

.Groupable()

    .Pageable()

    .Sortable()

        .Resizable(resize => resize.Columns(true))

        .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))

                        .DataSource(dataSource => dataSource

            .Ajax()

                 .ServerOperation(false)

                        .Read(read => read.Action("Read", "Salon"))

                     

                      )

                       

          )

</div>

[Sonu]

So I applied your suggestions but I still don't get the gird filtered. The text control is working only to take input but not updating the grid. Any suggestions?

[Alexander Valchev]

Hello guys,

@Sonu
AutoComplete widget does not have a dataValueField, but only dataTextField. I assume that the problem comes from the fact that inside the change event, the value is a string (CategoryName), which cannot be parsed to integer. As a result the filtering fails.

Please examine what is going inside the change event handler and if you need further assistance provide a small but runnable jsBin sample which I can debug locally.
Thank you in advance for the cooperation.

Regards,
Alexander Valchev
Telerik