filtering nodes in TuniTreeView

[davide]

Hi,

 

new day, new question: my porpouse is to use a edit field (TuniEdit) to filter the TuniTreeView, showing only the leap of the tree matching the text content of TuniEdit.

 

I use following code into onKeyDown event of Tuniedit:

if (key = vk_return) then
  for i := 0 to uniTreeView1.items.count - 1 do
  begin
    // check is a leap
    if not uniTreeView1.items[i].HasChildren then
    begin
      // check the text contenct
      if Pos(UpperCase(uniEdit1.text) , UpperCase(uniTreeView1.items[i].text) ) > 0 then
      begin
        // show item/node
        uniTreeView1.items[i].Visible := True;
      end
      else
        // hide item/node
        uniTreeView1.items[i].Visible := False;
    end;
  end;

Obviusly the code is correct, but it is server side, so my tree html object is not affected! How can i do that client side?

 

I found an example for extjs where the guy use setDisplayed('none'); method of the node to hide the node, but i don't know how to identify the current node (like nameJS) in my for cycle.

If I know the js name/identifyer of a single node, I can use unisession.addjss inside the for cycle to set displayed property.

 

I think is the right way to do that, evenif i hope some one can help me to find the right way.

Davide

 

PS: in order to implement the example i have linked before, there is some place in unigui object where define the filterby function, like Ext.define(...) in extJs code ?

 

[davide]

ok guys,

 

I find the way to explore js element ed find the right element to hide:

if (key = vk_return) then
  for i := 0 to uniTreeView1.items.count - 1 do
  begin
    // check is a leap
    if not uniTreeView1.items[i].HasChildren then
    begin
      // check the text contenct
      if Pos(UpperCase(uniEdit1.text) , UpperCase(uniTreeView1.items[i].text) ) > 0 then
      begin
        // show item/node
        js_command := js_command + sLineBreak +
             'Ext.get('+uniTreeView1.JSName+'.view.getNodeById('+IntToStr(i)+')).setDisplayed(''table-row'');';
        uniTreeView1.items[i].Visible := True;
      end
      else
        // hide item/node
        js_command := js_command + sLineBreak +
             'Ext.get('+uniTreeView1.JSName+'.view.getNodeById('+IntToStr(i)+')).setDisplayed(''none'');';
        uniTreeView1.items[i].Visible := False;
    end;
    // apply js command
    UniSession.AddJS(js_command);

  end;

Now the nodes are correctly hide , but when i collapse a brunch and re-expand that, the tree is re-redered and the nodes are displyed again!

how can i block the event on the unitreeview? the onclick or ondblclick event on delphi side is fired after the real collapse event on the clientside!

Davide

[Sherzod]

Now the nodes are correctly hide , but when i collapse a brunch and re-expand that, the tree is re-redered and the nodes are displyed again!

 

Hi,

 

Try this code:

'Ext.get('+uniTreeView1.JSName+'.view.getNodeById('+IntToStr(i)+')).setDisplayed(''none'');'
+
uniTreeView1.JSName+'.store.getNodeById('+IntToStr(i)+').data.visible=false;'  // <---------------

Best regards.

[Farshad Mohajeri]

This is already implemented in AllFeaturesDemo.

[davide]

Hello Farshad,

 

this is the code in the Demo, for the delete note button:

procedure TUniTreeViewUniTreeView.UniButton2Click(Sender: TObject);
begin
  FreeAndNil(SelectedNode);
  UniLabel2.Caption:='Selected Node: ';
end;

I do not need to delete a node, but only filter the objects in the treeview and show again in according with the filter string (or clear filter function).

I mean is different to show/hide item or delete that.

 

@DelphiDevelper: I try your solution, that work well for other breanch of the tree, but if click on the same branche the icon change (collaps like) but the item inside remain "showed". When click again the node change (expanded icon) and item are doubled. Very strange behavior. 

I'm not able to disable click (which one to collapse/expande node).

 

Well, i see an other solution on js treeview: some one make a "backup" array (equal to the starting one) and use the Farshad's solution,deleting nodes not responding to the filter string. And before change filter, restore the array with "backup".

 

Farshad do you mean that ?

 

I thinking about performace on clients: do you thik is better use only JS scripting to perform filtering, with out interaction with delphi server side? 

 

thanks in advance,

regards

Davide