We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ListBox Filtering

Thread ID:

Created:

Updated:

Platform:

Replies:

118506 Mar 13,2015 11:59 AM Mar 16,2015 07:25 AM ASP.NET MVC 1
loading
Tags: ListBox
Andrea Perazzolo
Asked On March 13, 2015 11:59 AM

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 [Syncfusion]
Replied On March 16, 2015 07:25 AM

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;