This is a migrated thread and some comments may be shown as answers.

how to filter in a ListBox

3 Answers 453 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Danny
Top achievements
Rank 1
Iron
Veteran
Iron
Danny asked on 20 Nov 2020, 08:20 PM

Good day.

I am trying to make a filter to a ListBox, but I have not gotten it to work for me, could you please help

the listBox

@(Html.Kendo().ListBox()
                  .Name("lstBuscarMenu")
                  .HtmlAttributes(new { style = "width:100%;height:700px;"})
                  .DataTextField("Nombre")
                  .TemplateId("customer-item-template")
                  .BindTo(ViewBag.Menus)
                  )

the planitlla
<script id="customer-item-template" type="text/x-kendo-template">
  <span class="k-state-default"><strong>#: data.Nombre #</strong><p style="font-size:0.6rem;">#: data.Seccion #</p></span>
</script>
the javascript
var dataSourceMenu = null;
$("#txtBuscarMenu").keyup(function(e) {
    var texto = $("#txtBuscarMenu").val();
    var grid = $("#lstBuscarMenu").data("kendoListBox");
    if (dataSourceMenu === null) {
        dataSourceMenu = grid.dataItems();
    }
    if (texto.length === 0) {
        grid.setDataSource(dataSourceMenu);
    }
    else {
        grid.setDataSource(dataSourceMenu.find(x => x.Nombre.indexOf(texto) > -1));
    }
});
best regards

3 Answers, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 24 Nov 2020, 02:56 PM

Hi Danny,

The setDataSource method of the ListBox substitutes the existent data source with the one that is passed as a parameter to the method. Therefore, at present, you are substituting the existent data source instead of filtering it. 

The recommended approach is to make use of the filter() method of the data source. Pass a filter expression with the same syntax as the one shown from the following example:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/filter

I hope this helps.

 

Kind regards,
Tsvetomir
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Danny
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 24 Nov 2020, 09:09 PM
hello Tsvetomir.

The filter is correct, but in the code that I put I am getting a copy of the data from the ListBox, but it is an array, since the listBox does not have a getDataSource, and for this to apply the filter to said dataSource.
How do I apply the filter to the dataSoruce of the listBox?

best regards.
0
Tsvetomir
Telerik team
answered on 25 Nov 2020, 01:28 PM

Hi Danny,

If you would like to directly substitute the data source's data items with a new data set, it is recommended to use the data() method:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/data

Namely:

listBox.dataSource.data(arr); // where arr corresponds to the new data set to be loaded

 

Best regards,
Tsvetomir
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
ListBox
Asked by
Danny
Top achievements
Rank 1
Iron
Veteran
Iron
Answers by
Tsvetomir
Telerik team
Danny
Top achievements
Rank 1
Iron
Veteran
Iron
Share this question
or