Jump to content

Scroll TreeView So Selected Node Visible


mos

Recommended Posts

At runtime I am setting the selected node however this node maybe not be in the visible area of the treeview as the treeview may contains a lot of items.

 

How can I scroll the treeview so the selected node is visible?

Link to comment
Share on other sites

  • 2 years later...

Hello!

I use UniGUI 1.90.0.1531 and I have similar problem with TUniDBTreeGrid. For example, I have a grid:

StructureGrid: TUniDBTreeGrid;

In UniFormShow event I assign for it this method:

    StructureGrid.ClientEvents.UniEvents.Values['beforeInit'] := 'function beforeInit(sender, config) {' +
                                                         '  var me = sender;' +
                                                         '    me.expandSelectedNode = function() {' +
                                                         '        var _selection = me.getSelectionModel().getSelection()[0];' +
                                                         '        if (_selection) {' +
                                                         '            _selection.cascadeBy(function(node) {' +
                                                         '                node.expand();' +
                                                         '            })' +
                                                         '        }' +
                                                         '    };' +
                                                         '}';

When i search for value in underlying dataset, I call:

StructureGrid.JSInterface.JSCall('expandSelectedNode', []);

The row I was searchive for is selected but the grid doesn't scroll to it. So it remains out of the visible area.

Please, tell me, what am I doing wrong?

 

 

Link to comment
Share on other sites

37 minutes ago, Sherzod said:

Hello Nadya,

Are you using a trial edition?

In addition, this code may help you:


grid.ensureVisible(grid.getSelection()[0]);

Sherzod, I use trial version now, buying license is in progress. 

Thank you for attention and I'm very sorry for stupid questions, but do I get it write, I should change method this way?

function beforeInit(sender, config) {
  var me = sender;
    me.expandSelectedNode = function() {
        var _selection = me.getSelectionModel().getSelection()[0];
        if (_selection) {
            _selection.cascadeBy(function(node) {
                node.expand();
            });
            sender.ensureVisible(sender.getSelection()[0]);            
            -- OR maybe one of the following variants?
            -- sender.ensureVisible(sender.getSelectionModel().getSelection()[0]);            
            -- sender.ensureVisible(_selection);    
        
        }
    };
}

Link to comment
Share on other sites

10 minutes ago, Sherzod said:

Np, yes. Have you tried checking with this?

Yes, but it doesn't help :(

I assign this method on UniFormShow this way

    StructureGrid .ClientEvents.UniEvents.Values['beforeInit'] := 'function beforeInit(sender, config) {' +
                                                         '    var me = sender;' +
                                                         '    me.expandSelectedNode = function() {' +
                                                         '        var _selection = me.getSelectionModel().getSelection()[0];' +
                                                         '        if (_selection) {' +
                                                         '            _selection.cascadeBy(function(node) {' +
                                                         '                node.expand();' +
                                                         '            });' +
                                                         '            sender.ensureVisible(sender.getSelection()[0]);' +
                                                         '        }' +
                                                         '    };' +
                                                         '}';

Node is selected but still out of visible area :-(

Link to comment
Share on other sites

30 minutes ago, Sherzod said:

OK, 

Can you provide part of your code? 

Ohh, that would not be easy :-) Would it be ok, if I  just print a part of source code and some descriptions?

DataSet: qrData: TADOQuery;
Fields:
qrDataID: TLargeintField
qrDataParentID: TLargeintField
qrDataLevelNode: TIntegerField
qrDataCurrentName: TStringField

DataSource: dsData: TDataSource (linked to qrData)

StructureGrid: TUniDBTreeGrid;
Properties (differs from default):
Columns: CurrentName, LeveNode(Visible = False), ID(Visible = False)
BorderStyle = ubsNone
DataSource = dsData
IDField = ID
IDParentField = ParentID
Options (differs from default) = Editing = False, Titles = False, ColLines = False, RowLines = False
UseArrows = True

When user enters the search key in beSearchNode, FindStructureNode launches.


procedure TfmPlan.FindStructureNode;
var
    tmpCriteria: WideString;
begin
    if Trim(beSearchNode.Text) = ''
    then
        Exit;

    tmpCriteria := '';

    tmpCriteria := 'CurrentName LIKE ''%' + Trim(beSearchNode.Text) + '%''';

    FindInQuery(tmpCriteria, qrData);

    StructureGrid.JSInterface.JSCall('expandSelectedNode', []);
end;

function TfmPlan.FindInQuery(SearchCriteria: WideString; qrSource: TADOQuery): Boolean;
var
    tmpRecord: Integer;
begin
    Result := False;

    if (qrSource.Recordset.RecordCount = 0) or (Trim(SearchCriteria) = '') then
        Exit;

    tmpRecord := qrSource.RecNo;

    qrSource.Recordset.Find(SearchCriteria, 1, adSearchForward, qrSource.Recordset.Bookmark);

    if qrSource.Recordset.Eof = False  then
    begin
        qrSource.RecNo := qrSource.Recordset.AbsolutePosition;
        Result := True;
    end
    else
    begin
        qrSource.First;
        qrSource.Recordset.Find(SearchCriteria, 0, adSearchForward, qrSource.Recordset.Bookmark);

        if qrSource.Recordset.Eof = False then
        begin
            qrSource.RecNo := qrSource.Recordset.AbsolutePosition;
            Result := True;
        end
        else
            qrSource.RecNo := tmpRecord;
    end;
end;

procedure TfmPlan.UniFormShow(Sender: TObject);
begin
    StructureGrid.ClientEvents.UniEvents.Values['beforeInit'] := 'function beforeInit(sender, config) {' +
                                                         '    var me = sender;' +
                                                         '    me.expandSelectedNode = function() {' +
                                                         '        var _selection = me.getSelectionModel().getSelection()[0];' +
                                                         '        if (_selection) {' +
                                                         '            _selection.cascadeBy(function(node) {' +
                                                         '                node.expand();' +
                                                         '            });' +
                                                         '            sender.ensureVisible(sender.getSelection()[0]);' +
                                                         '        }' +
                                                         '    };' +
                                                         '}';
end;

Link to comment
Share on other sites

24 minutes ago, Nadya said:

    FindInQuery(tmpCriteria, qrData);

    StructureGrid.JSInterface.JSCall('expandSelectedNode', []);

Can you try this approach?

  ...
  FindInQuery(tmpCriteria, qrData);
  StructureGrid.JSInterface.JSCall('expandSelectedNode', []);
  StructureGrid.JSInterface.JSCode('Ext.defer(function(){'#1'.ensureVisible('#1'.getSelection()[0])}, 200);'); //<-----
  ... 

 

  • Upvote 1
Link to comment
Share on other sites

4 minutes ago, Sherzod said:

Can you try this approach?


  ...
  FindInQuery(tmpCriteria, qrData);
  StructureGrid.JSInterface.JSCall('expandSelectedNode', []);
  StructureGrid.JSInterface.JSCode('Ext.defer(function(){'#1'.ensureVisible('#1'.getSelection()[0])}, 200);'); //<-----
  ... 

It works!!! Thank you very very much!

  • Like 1
Link to comment
Share on other sites

By the way may I ask a question about JS scripts in UniGUI components in Dephi?

When I try to create JS-code for any event in UNIEvents property editor directly, it allows me to write code in multiple lines.

But when a form is creating at runtime - exception raises.

The same code placed in single line successfully works.

Is it normal for JS in UniGUI or I could do something to fix it? Thank's in advance for you patience

(I'm absotutely zero in JS, sorry one more time :-( )

Link to comment
Share on other sites

10 hours ago, Sherzod said:

For example?

I wrote "beforeInit" JS code directly in the property editor of my grid.  I've made some screenshots:

JS beforeInit code with wrap

When form with my grid is loading - this error happens:

Error message

Then I removed all returns and placed my code in a single line:

Same beforeInit code without wrap

In this case form loaded correctly and "expandSelectedNode" method works properly

Link to comment
Share on other sites

4 hours ago, Sherzod said:

Hello,

Can you make a simple testcase to check and attach it to googledrive?

Прошу прощения, можно, я на русский перейду? С моим дубовым английским  объясняться - только Ваше время тратить :-(

Я сделала небольшой проект, чтобы проверить проблему с переводом строк в скрипте. Но ошибка, возникающая в основном проекте, не воспроизводится.

Тестовый проект

Правда, в отличие от основного, в данном проекте в качестве источника вместо TADOQuery данных используется TClientDataSet, поэтому метод поиска посредством AsoluteIndex изменен на обычный Locate, грид же со всеми свойствами скопирован с основного проекта. При этом в отличие от основного, в данном примере при поиске перестал разворачиваться нод, в ветке которого находится искомый. То есть искомый нод становится Selected, но каскадное развертывание до него не отрабатывает. Повторюсь, в основном проекте тот же JS-код работает нормально.

Что касается ошибки при многострочном JS-коде в основном проекте - я попробую получить весь снегерированный код страницы с ошибкой и без нее, чтобы сравнить. Возможно, там какое-то сочетание элементов некорректное в коде получилось, либо с юникодными строками или текстами, содержащими кавычки.

Link to comment
Share on other sites

On 6/18/2020 at 6:04 PM, Nadya said:
On 6/18/2020 at 5:58 PM, Sherzod said:

Can you try this approach?



  ...
  FindInQuery(tmpCriteria, qrData);
  StructureGrid.JSInterface.JSCall('expandSelectedNode', []);
  StructureGrid.JSInterface.JSCode('Ext.defer(function(){'#1'.ensureVisible('#1'.getSelection()[0])}, 200);'); //<-----
  ... 

It works!!! Thank you very very much!

Hi!

I heed help again :unsure: Problem is in displaying the selected dbtreegrid node which was found in underlying dataset by Locate(...) method.

I have two TUniDBTreeGrid components on form. GridStructure shows structure of nodes with two levels, GridData should display info for selected node in GridStructure.

So when I use Locate to find node in manually or programmatically collapsed GridStructure, dataset position is correct and info in GridData is OK, but the selection in GridStructure displays incorrectly. I wrote "expandSelectedNode" method (as you advised me):

function beforeInit(sender, config) {
 var me = sender;
 me.expandSelectedNode = function() {
     var _selection = me.getSelectionModel().getSelection()[0];
     if (_selection) {
         _selection.cascadeBy(function(node) {
             node.expand();
         });
          sender.ensureVisible(sender.getSelectionModel().getSelection()[0]);
     }
 };
}

And after locating record I use this code:

grdStructure.JSInterface.JSCall('expandSelectedNode', []);
grdStructure.JSInterface.JSCode('Ext.defer(function(){'#1'.ensureVisible('#1'.getSelection()[0])}, 200);');

But is doesn't helph in some cases. I've made a testcase to demonstrate my problem.

TreeGridLocationTestCase

 

Please, do following:

1) Select node "Node1" in GridStructure, press button "Refresh info" below - Node1 is selected in GridStructure, GridData shows info for Node1 = CORRECT

2) Expand Node1, select child node "Node1_13" in GridStructure, press button "Refresh info" - Node1_13 is selected in GridStructure, GridData shows info for Node1_13 = CORRECT

3) Select Node1_13, press button "RefreshStructure" higher, press button "RefreshData" below - tree is collapsed, selection is not visible in GridStructure, GridData shows info for Node1_13 = INCORRECT

4) Expand Node1 in GridStructure, type text "Node1_14" in the edit box on the top of form,  press button "Search structure node" - node "Node1_14" is found and selected, GridData shows info for Node1_14 = CORRECT

5) Collapse tree in GridStructure, type text "Node1_15" in the edit box on the top of form,  press button "Search structure node" - tree is collapsed, selection is not visible in GridStructure, GridData shows info for Node1_15 = INCORRECT

Please, "kick me out" of this swamp, somebody!:sad:

Thank you!

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...