ListBox Filtering

[Andrea Perazzolo]

Hi,

I am trying to implement a filter operation on the Listbox, which hasn't.

I am doing in this way:

<div class="left col-md-4">
    <input type="text" id="txtFilter" onblur="onfilterData()" />
    @(Html.EJ().ListBox("nares").Datasource((IEnumerable<DashboardListItem>)Model.NotAssociatedResources)
 
          .Width("200px").Height("400px")
//.SelectedItemlist(Model.SelectedItems)
          .AllowMultiSelection(true)
          .AllowDragAndDrop()
    .ListBoxFields(df => df.ID("Id").Text("Name").Value("Id"))
.ClientSideEvents(cse => cse.ItemDropped("onDroppedItem"))
    
    )
</div>
<div class="left col-md-4">
    @(Html.EJ().ListBox("resall").Datasource((IEnumerable<DashboardListItem>)Model.ProjectResources)
            .Width("200px").Height("400px")
//.SelectedItemlist(Model.SelectedItems)
                .AllowMultiSelection(true)
                .AllowDragAndDrop()
                .ListBoxFields(df => df.ID("Id").Text("Name").Value("Id")).ClientSideEvents(cse => cse.ItemDropped("onDroppedItemBack"))

    )
</div>

I am doing a doble Listbox withy Drag from one to another and filtering the first one

and this is the function for filtering

function onfilterData() {
    var lb1 = $("#nares").data("ejListBox");
    var lb2 = $("#resall").data("ejListBox");
    var filter = $("#txtFilter").val();
    var tmp = ej.DataManager(ej.dataSources.nares.data).executeLocal(ej.Query().where("Name", ej.FilterOperators.contains, filter, true));
    lb1.setModel({ dataSource: tmp });
}

Now the filter works when the variable tmp contains any element, but if it is empty, the Listbox does not clear itself, but remains with the current elements.

Am I doing anythingwrong?

Another thing I have noticed in the operation of drag & Drop, is that when I drop an elemnt of the first Listbox on the second, thie function onDroppedItem is called.

When I move back that element from the second to the first (in the same session of the other movement of items), it is not called the function onDroppedItemBack, but instead the function onDroppedItem

    Thanks in advance

    Andrea Perazzolo

[Ezhil S]

Hi Andrea,

Sorry about the inconvenience caused.

We were able to reproduce the problem with ListBox on “Unable to clear the dataSource of the Listbox when the list is empty” and “Unable to trigger the drop event of target Listbox”. We have logged defect report regarding this. Meanwhile in order to overcome the issue with clearing the dataSource items on empty list, we suggest you to set the dataSource value as null from setModel. Please refer the following code snippet,

<code>

[CSHTML]

<div class="left col-md-4">

<input type="text" id="txtFilter" onblur="onfilterData()" />

@(Html.EJ().ListBox("nares").Datasource((IEnumerable<ListBox_f118506.ListBoxController.BikeList>)ViewBag.datasource)

.Width("200px").Height("400px")

//.SelectedItemlist(Model.SelectedItems)

.AllowMultiSelection(true)

.AllowDragAndDrop()

.ListBoxFields(df => df.ID("Id").Text("Name").Value("Id"))

.ClientSideEvents(cse => cse.ItemDropped("onDroppedItem"))

)

</div>

<div class="left col-md-4">

@(Html.EJ().ListBox("resall").Datasource((IEnumerable<ListBox_f118506.ListBoxController.CarList>)ViewBag.datasource1)

.Width("200px").Height("400px")

//.SelectedItemlist(Model.SelectedItems)

.AllowMultiSelection(true)

.AllowDragAndDrop()

.ListBoxFields(df => df.ID("Id").Text("Name").Value("Id")).ClientSideEvents(cse => cse.ItemDropped("onDroppedItemBack"))

)

</div>

[Script]

<script type="text/javascript">

function onfilterData() {

var lb1 = $("#nares").data("ejListBox");

var lb2 = $("#resall").data("ejListBox");

var filter = $("#txtFilter").val();

var tmp = ej.DataManager(lb1.model.dataSource).executeLocal(ej.Query().where("Name", ej.FilterOperators.contains, filter, true));

if (tmp.length != 0)

lb1.setModel({ dataSource: tmp });

else

lb1.setModel({ dataSource: null });

}

</script>

A support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents

Please let us know if you have any questions.

Best,

Ezhil S