Dropdown allowclear doesn't fire event

Hello Radzniks,

image

I have a dropdown above (not in) my datagrid that's to be used for filtering the datagrid. I want the datagrid to load with data on pageload, be filtered by the dropdown with the dropdown's Change event, and be not filtered and refreshed when the dropdown's 'allowclear' X is clicked.

The grid is populated on page load normally, and then with the dropdown's Change event I'm doing this:


This all works okay for loading and filtering the way I want (though I'm sure that this is probably not the best way to do this - I'm stumblin and bumblin). However, clicking the dropdown's X to clear the filter doesn't do anything (not unexpected) and causes the webpage to freeze. I'd thought the dropdown's change event would fire when it's cleared, but it doesn't seem to - says the debugger. As such, I'm not sure what if any event gets triggered on dropdown clear. Once I know, I'll get the data without the filter and will be set.

Apart from capturing the dropdown's clear event, if anyone knows a more elegant method to achieve my objectives, I'd be most grateful.

Thank you,
Slosuenos

Hi @SloSuenos,

Change event will be executed on clear for sure - check our demo for reference:

There is an exception most probably - check your browser console.

1 Like

@enchev, thanks. The event wasn't firing because properties for the dropdown contained TValue = dynamic, which it didn't like I guess. Fixed by adding a TValue int attribute to the dropdown.

Still, I've been working for a couple of days to try to do something that should be so simple. After a filter has been set via the dropdown, if a user clicks the dropdown's 'X', I'd like the filter to be reset to none, and the datagrid refreshed to show all of the data again. But, clicking the 'X' seems to set the filter value to null, resulting in zero records displayed.

I figure I just need to test the value of the ${event} and if its null, then refresh or reload the datagrid, instead of filtering by its value. As a simple test to see if can even refresh the data datagrid and not have it filtered, I put a timed notification after the set filter, which after counting down should run the code to reset the datagrid. I've tried grid0.Refresh(), await grid0.Reset(), and I've even performed another get on the grid's data -

Nothing happens, the datagrid remains filtered. I'm sure I'm doing something ridiculously stupid.

Thank you for any assistance you can provide,
Slosuenos

1 Like

Anybody please? I'm sure there's a simple explanation for my issue....

How the grid is bound in your case? If you use LoadData then grid.Reload() will raise the event. If it’s bound in page load you will need to reexecute the code used to populate the grid data.

I'm no longer trying to raise the event, I'd mentioned above that I resolved that issue by fixing TValue. I tend to write far too much, making my posts difficult to read. But, if you wouldn't mind rechecking my question to you from yesterday. Thanks...

I’m afraid that I still don’t understand how the grid is bound in your case. Usually this is done on page load - in your case I only see data populated on DropDown Change event. What will happen if you debug the code in Change event? Are the new data retrieved?

@enchev the grid is bound on page load - exactly the same way as the invoke statement in the event screenshot. I posted. I'd looked at if the grid was actually reloading without the filter applied (as desired) but not updating the display, but am not sure of the result using the three different ways I tried it - with the refresh, reload and get. Didn't have debugging working because of the Windows security issue until yesterday, so I'll check that now.

I'll get back shortly, thanks for your help...
Slosuenos

I created a sample application using the Radzen Sample database. Everything works as expected with the AllowClear and setting the Data property of the DataGrid to unfiltered data.



AllowClearFilter.zip (7.0 KB)

@enchev, well for one thing the tests I wrote about are not working as expected. If you see the screenshot, I'm invoking with the filter, then calling a Notify, and then doing the reset/refesh/invoke. The thing is, that I'm calling the second invoke after the 'Then' statement of the notify. I thought 'then' acted like a Promise and the second part wouldn't fire until the notify had reached its timeout or was dismissed. That's not what happened, the 'then' is ignored and the second part executes immediately. Is this a bug? Doesn't matter, this is not part of the issue.

Still, I can see that the size of the grid's dataset does not change after the invoke is called the 2nd time. This is that one -

The data does not become unfiltered with reload -

The data does not become unfiltered with reset -

I'll I'm trying to do is figure out a way to turn the filter off - I want my grid to be unfiltered after clicking the X clear on the dropdown filter.

Check my response ...

@korchev, the file you uploaded only contains a few json files. I don't know how to do anything with that.

From your screenshot, I can't determine what's being returned. So you're saying with the 1st filtered invoke you're having a filtered dataset returned, and then the second invoke returns the dataset to an unfiltered state? I'm looking at the grid0.Data Results View to check the counts, but this can be seen onscreen.

As every other Radzen application ... You need to import it in Radzen.

Honestly I don't know how to better help than providing a working application. I suggest you import the attached application in Radzen and examine it.

@korchev, Okay I got it to behave correctly. Thanks for your patience, I'll locate the sample database to check it out. However, one thing to note. When you click the X to clear a dropdown, it sets the arg or ${event} to 0, not null. Therefore the stuff you sent in the screenshot can not work - the second invoke will never fire. I don't know if you fixed that or not in the upload you provided.

One other issue that I'd mentioned above. Doesn't the 'Then' after an invoke, etc cause what is in the 'Then' to not execute until the invoke has completed? Like a Javascript 'Promise' to force things to fire synchronously? It seems that if you do something with a 'Then' after a 'show notification', it is executed immediately - it does not wait for the notification's timout or for the notification to be dismissed like I'd expect.

Slosuenos

You obviously still haven't tried my example. Otherwise you would have seen that it works. You may use 0 for your case - the DropDown uses the default value for the target type (TValue) when the clear button is pressed.

That's not related to this case. Most probably the Notify action doesn't support the Then event yet and it remained from the Angular UI.

@korchev I see, yes I should have tried your example before stating it didn't work. My apologies.

I really appreciate your and @enchev's patience and persistence solving this matter.

Slosuenos