Filtering in the tree - working code example request!

Webix JS
1

Dear All,
Warm Greetings and a Happy new Year! I have been trying to come up with code to exactly make the sample : http://docs.webix.com/samples/17_datatree/04_api/03_filter.html
Can someone please give me a working code of how to make the sample listed above such that filtering works as we keep typing into the textbox? Furthermore will it be possible to embed this tree( and the text box) in a Accordion?

Many thanks in advance for your kind help!!

2

Hello!
Please, check the snippet - if I’m not mistaken, the original code contains all that you need. Filtering works on every keypress, but with a short (250ms) delay. And yes, you can embed this tree in the accordion as well.

http://webix.com/snippet/6350d74f

3

Many thanks @Listopad (Webix Team)!
However I have a concern: Do you support special characters ( like umlaut characters in German - ü ö ä Ä Ü Ö ß) ? Will the search still work? Currently I see that if I have Umlaut characters, the words get messed up very badly?

4

Dear @Listopad (Webix Team),
Kindly look at the snippet: http://webix.com/snippet/cdfcb20d . I have some issues here:

  1. It seems that in the snippet window the german characters are displayed fine but not in my system. So what should I do to display the Umlaut characters correctly?
  2. It seems like a Bug → when I erase the characters in the text box quickly I do not get the originally displayed tree back. Here are the steps to reproduce the bug:
    Step 1: for the code snippet above type the word “Prostatabeschwerden” and observe that the tree filters it correctly.
    Step 2: Start deleting the alphabets quickly and observe that the original tree (at the time of loading) does not appear back
    Could you kindly confirm if this is bug or am I doing something wrong? if yes, when would it be fixed?
  3. You have placed $$(“text2”).attachEvent(“onTimedKeyPress”,function(){
    $$(“tree2”).filter("#value#",this.getValue());
    }) out of Webix constuct i.e. webix.ui({…}); however when I place it in the tag I get an error. How should I go about attaching the innerEvent to the textbox(“text2”)?
5

  1. Make sure you are using the Unicode. Webix supports Deutsch (including the umlaut characters) as one of the default languages.

  2. Quickly or not, there’s another issue: with filterMode:{ level:4 } filtering works only on this level (as needed). But for some reasons (unfortunately, it’s an unexpected behaviour) it returns only the branches that have the 4th level even after the filter is cleared.

  3. Please, check the related article: http://docs.webix.com/desktop__event_handling.html#attachinghandlerstoinnercomponentevents

http://webix.com/snippet/c469ddac

6

Thanks @Listopad (and the entire Webix team) for clarifications. I had one more question: I am using unicode for the data in the tree, but how can I use unicode characters for entering them in textbox for search i.e. with a german keyboard i would enter normal umlaut characters in the search textbox to match with the characters in the tree. Currently in my system, when I put umlaut characters in the search box it does not match with tree items. Kindly give me suggestion as to how to handle umlaut input in the search textbox? Many thanks in advance!

7

I’m trying to reproduce this issue locally, but all works smoothly.

Could you check once again that files saved as UTF-8/16/32 with BOM? The issue occurs only in your system?

8

@Listopad - thanks for the suggestion. This works for me when saved with UTF-8 BOM. Thanks again!