How to show the user a specific line of TUniListBox?

[Tokay]

I've tried two methods found on the forum:

 with UniListBox1 do
  JSInterface.JSCall('boundList.getSelectedNodes()[' + ItemIndex.ToString + '].scrollIntoView', [True]);

 with UniListBox1 do
  JSInterface.JSCall('boundList.getSelectedNodes()[' + ItemIndex.ToString + '].scrollIntoViewIfNeeded', [True]);

or just 'getSelectedNodes()[0].scrollIntoView'

I always get the same error:

JS Error: Cannot read properties of undefined (reading 'scrollIntoViewIfNeeded')

[Sherzod]

45 minutes ago, Tokay said:

JS Error: Cannot read properties of undefined (reading 'scrollIntoViewIfNeeded')

Because the node has not been selected yet.

[Tokay]

UniListBox1.ItemIndex := 0;
with UniListBox1 do
 if ItemIndex <> -1 then
  JSInterface.JSCall('boundList.getSelectedNodes()[0].scrollIntoViewIfNeeded', [True]);

Ok, I've change code to this one. And issue still exists : JS Error: Cannot read properties of undefined (reading 'scrollIntoViewIfNeeded')

What I'm missing?

[Sherzod]

Can you please make a simple test testcase? 

[Sherzod]

43 minutes ago, Tokay said:

Ok, I've change code to this one. And issue still exists

Or add this client event:

function afterCreate(sender)
{
    var list = sender.boundList;
    list.on('select', function(){list.getSelectedNodes()[0].scrollIntoViewIfNeeded()});
}

 

[Tokay]

This is test case. I need to do this in the timer.

test case.7z

[Sherzod]

41 minutes ago, Tokay said:

test case.7z 54.83 kB · 0 downloads

Please read the above post, I have already given you a solution.

1.

7 hours ago, Sherzod said:

Or add this client event:

function afterCreate(sender)
{
    var list = sender.boundList;
    list.on('select', function(){list.getSelectedNodes()[0].scrollIntoViewIfNeeded()});
}

2.

procedure TMainForm.UniTimer1Timer(Sender: TObject);
begin
 UniListBox1.ItemIndex := 0;
 //with UniListBox1 do
  //if ItemIndex <> -1 then
   //JSInterface.JSCall('boundList.getSelectedNodes()[0].scrollIntoViewIfNeeded', [True]);
end;

 

[Tokay]

Hmm. This is only the test case. In the real case I need to show the currently selected line, and this line is not the zero line:

 with UniListBox1 do
  JSInterface.JSCall('boundList.getSelectedNodes()[' + ItemIndex.ToString + '].scrollIntoView', [True]);

 with UniListBox1 do
  JSInterface.JSCall('boundList.getSelectedNodes()[' + ItemIndex.ToString + '].scrollIntoViewIfNeeded', [True]);

[Sherzod]

9 hours ago, Tokay said:

This is only the test case. In the real case I need to show the currently selected line, and this line is not the zero line:

it seems we don't understand each other! 

You are still using this code:

9 hours ago, Tokay said:

with UniListBox1 do
  JSInterface.JSCall('boundList.getSelectedNodes()[' + ItemIndex.ToString + '].scrollIntoViewIfNeeded', [True]);

Do not use it, instead, use what I gave you:

19 hours ago, Sherzod said:

Or add this client event:

function afterCreate(sender)
{
    var list = sender.boundList;
    list.on('select', function(){list.getSelectedNodes()[0].scrollIntoViewIfNeeded()});
}

 

[Tokay]

Ok. But what I need to do in the timer event? I need that the currently serected node stay visible to the user constantly.

[Tokay]

Aftercreate fired once at the form show, and that is all. But I need to show selected node to the user while form is visible.

[Sherzod]

5 hours ago, Tokay said:

Aftercreate fired once at the form show, and that is all. But I need to show selected node to the user while form is visible.

Sorry, I do not understand what you want. Can you create a similar working example for the VCL?

[Tokay]

Ok, moment. It's nedded to show the 50 line to the user while form opened. This value (50) is for example. At the real app it could be dynamically changed. test case.7z

[Sherzod]

42 minutes ago, Tokay said:

Ok, moment. It's nedded to show the 50 line to the user while form opened. This value (50) is for example. At the real app it could be dynamically changed. test case.7z

Based on the above solution which I already told you several times.

test case.rar

[Tokay]

Ok. It starts well, no problem. But after I, for example, scroll UniListBox1 to the first line, and it does not returns bak automatically as needed to the neded 50 position. And it's logical: the Timer does not execute any code.

I repeat: whatever user or code do with UniListBox1 is needed to maximally show 50 line for the user as possible until form closed.

[Sherzod]

OK. I'll check. 

[Sherzod]

9 hours ago, Tokay said:

It starts well, no problem. But after I, for example, scroll UniListBox1 to the first line, and it does not returns bak automatically as needed to the neded 50 position. And it's logical: the Timer does not execute any code.

I repeat: whatever user or code do with UniListBox1 is needed to maximally show 50 line for the user as possible until form closed.

Okay.

I think mistake in the code was that you specified the ItemIndex of the selected row (UniListBox1). That's not so.

Should always be zero. 

procedure TMainForm.UniTimer1Timer(Sender: TObject);
begin
 with UniListBox1 do
  if ItemIndex <> -1 then
   JSInterface.JSCall('boundList.getSelectedNodes()[0].scrollIntoViewIfNeeded', [True]);
end;

 

[Tokay]

Thank you! That it!

[x11]

On 9/28/2021 at 8:26 AM, Sherzod said:

JSInterface.JSCall('boundList.getSelectedNodes()[0].scrollIntoViewIfNeeded', [True]);

 

Подскажите, как прокрутить программно список TUniListBox до нужной или до выбранной строки?

Этот код у меня не работает.

Идея такая. На форме лежит отсортированный TUniListBox, пользователь добавляет строку и нужно до нее прокрутить автоматически.

[Sherzod]

3 minutes ago, x11 said:

JSInterface.JSCall('boundList.getSelectedNodes()[0].scrollIntoViewIfNeeded', [True]);

Где Вы вызываете код?

[x11]

Сразу после добавления строки.

 

Но... я взял пример выше и добавил кнопку и код

 

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
 with UniListBox1 do
  if ItemIndex <> -1 then
   JSInterface.JSCall('boundList.getSelectedNodes()[50].scrollIntoViewIfNeeded', [True]);
end;

нажимаю ее и ничего не происходит

[Sherzod]

Just now, x11 said:

Сразу после добавления строки.

Тогда попробуйте с defer.

JSInterface.JSCallDefer('boundList.getSelectedNodes()[50].scrollIntoViewIfNeeded', [True], 100);

 

[x11]

Quote

Uncaught TypeError: O13.boundList.getSelectedNodes()[50] is undefined

 

[x11]

при старте приложения, в консоли браузера тоже ошибка

Uncaught TypeError: list.getSelectedNodes()[0].scrollIntoViewIfNeeded is not a function

[Sherzod]

Почему 50?