How to add a vertical scrollbar for a dynamic list

[attaluriraj]

Hi,

I have a script which displays statictext and edittext field pairs dynamically - if we say "5" then five pairs will be displayed. and have got two buttons at the end. The panel size also increases dynamically.

But if we are displaying some "20" pairs of statictext and edittext fields then the panel is streching and at this point we cannot view all the elements.

So to view all the hidden elements we need to add a vertical scrollbar, but I am not sure about how to add this one and make it work. Can anyone please help me here!!!

Thanks for your help.

Regards,
Raj

Here is the code snippet that I have used:



Code: Select allvar dialogDef1 = 
            "dialog { orientation: 'column', alignChildren: 'center', \
               info: Panel { orientation: 'column', alignChildren: 'right', \
               text: 'Scrollbar test:',";
var dialogDef2 = '';
var metadataCount = 0;            
var count = 18;





for(metadataCount = 0; metadataCount < count; metadataCount++)  {
         
            var metaName = "Name"+metadataCount;
            var metaValue =  "Value"+metadataCount;   
            var bounds = {x:25,y:280,width:10,height:20 };
            
            var dialogDef2Temp = "metagroup"+count+": Group { orientation: 'row', margins: 0, \
            s"+metadataCount+": StaticText { text:'"+metaName+"' },preferredSize: [150, 30], \
            e"+metadataCount+": EditText { preferredSize: [150, 30] , text:'"+metaValue+"'}, properties:{multiline:false} \
            },";
      
            dialogDef2 = dialogDef2 +dialogDef2Temp;
            }
      
      
         
         
         var dialogDef3 = "}, \
            buttons: Group { orientation: 'row', \
               ok: Button { text: 'OK', properties:{name:'ok'} }, \
               cancel: Button { text: 'Cancel', properties:{name:'cancel'} } \
               } \}";
         var dialogDef = dialogDef1 + dialogDef2 + dialogDef3;
         
         
         win = new Window(dialogDef);
         win.show();
      

[Patrick]

If you are unsure how much space you will need, I believe your only option here would be to use a listbox object. You would just define the size of the listbox and it automatically adds the scrollbar if there is enough items in it. Hope this helps,

Patrick

[attaluriraj]

Thanks Patrick for the quick reply.

But if we go with listbox option then how are we going to display statictext and edittext fields within the listbox. As far as my knowledge goes we can either provide a text or an icon ( listitem..). Hope I am understanding your quote correctly - panel -> listbox -> add static text and edittext fields?

If it was a simple static text then I think this option would be perfect but I have to display edittext field also and this is complicating things.


Regards,
Raj

[Patrick]

You are correct, listbox is only for static text -- i misread your initial post and didn't see that you had edittext also. There is no other way (that I know of) to have a scrollbar in a dialog palette. The only other suggestion I can offer would be to count how many fields are going to be shown and have the size of the dialog as a whole be dynamic. Every time you run it it could be a different size to accommodate the amount of info you are going to display. Far from an ideal solution but thats all I can think of.

Patrick

[attaluriraj]

Thanks for your time Patrick.

yeah, my dialog panel is a dynamic one and its size depends upon the number of elements. But after certain point the elements are getting chopped and this is where srollbar came into picture.

Wonder how am I going to get this one...!

Raj

[Andrew]

With work, there are some options you could try.

The simplest is to decide the maximum number of pairs on a page, and when that is exceeded have a series of buttons appear that allow you to move forward to the next page of pairs etc.

Alternatively you could add a slider control which would achieve the same but which would offer easier use.

None of these are ideal or particularly pretty, but they can be made to work.

Of course edit text can have a scrollbar so you could set the whole dialog as a single edit-text field - I think you can vary font etc within edit text (can't remember for sure) - so you could do something to make static and edittext fields recognisable.

Andrew

[attaluriraj]

Thanks Andrew for suggesting some work arounds.

the end users can modify/delete/input the text/data from textfields and when they click on ok button ( which will be there at the bottom of the screen..), we have to grab all the textfield values and save them.

If we go with first work around, then I am not sure if it would be possible to get the textfield values of the previous screen from the current one. And moreover clients want to see all the items in the same dialog.

And regarding the slider control, I think here again the placement issue will pop up if we are going to add this item to dialog or panel.

Also I have been trying with the below code snippet ( got the basic script from the forum and am modifying it..). I am able to display the items dynamically ( defined the no.of elements in the count variable..). But for some reason the dialog is not increasing beyond a certain point. Am working on this. For your ref.this is the code snippet:


Raj


Code: Select all

var WindowPositionX = 100;
var WindowPositionY = 100;

var WindowWidth = 800;
var WindowHeight =800;

var PanelPositionX =  20;
var PanelPositionY =  20;

var PanelWidth =355;
var PanelHeight = 600;

//Create dialog box

var bounds = {x:WindowPositionX ,y:WindowPositionX ,
              width:WindowWidth ,height:WindowHeight };

var dlg = new Window('dialog', 'Scrollbar-',bounds );
var uiButtonClose = "Close";

var bounds = {x:380,y:30,width:50 ,height:20 };
dlg.btnClose = dlg.add("button",bounds ,uiButtonClose );
dlg.btnClose.onClick = function() { this.parent.close(0); };

var bounds = {x:PanelPositionX ,y:PanelPositionY ,
              width:PanelWidth ,height:PanelHeight };
dlg.msgPnl = dlg.add('panel',bounds ,'New Panel');

var count = 15;
var metadataCount;

var textYSize = 30;
var textHeightSize = 30;

var fieldYSize = 30;
var fieldHeightSize = 30;


var temp1 = 0;
var temp12 = 0;

var temp2 = 0
var temp21 = 0



for(metadataCount = 0; metadataCount < count; metadataCount++)  {
   
   
   var finalYSize = 0;
   var finalHeightSize = 0;
   
   var finalTextSize = 0;
   var finalTextHeightSize = 0;
   
   if (metadataCount == 0){
      finalYSize = 15;
      finalHeightSize = 35;
      
      finalTextSize = 15;
      finalTextHeightSize = 35;      
      
      temp1 = finalYSize;
      temp12 = finalHeightSize;
      
      temp2 = finalTextSize;
      temp22 = finalTextHeightSize;
   }else{
      finalYSize = temp1 + textYSize;
      finalHeightSize = temp12 + textHeightSize;
      
      finalTextSize = temp2 + fieldYSize;
      finalTextHeightSize = temp22 + fieldHeightSize;
      
      temp1 = finalYSize;
      temp12 = finalHeightSize;
      
      temp2 = finalTextSize;
      temp22 = finalTextHeightSize;      
      
   }   
   
   
   
   var textVal = "Alert box title:"+metadataCount;
   dlg.msgPnl.titleSt = dlg.msgPnl.add('statictext', [15,finalYSize,105,finalHeightSize],
textVal);
dlg.msgPnl.titleEt = dlg.msgPnl.add('edittext', [115,finalTextSize,315,finalTextHeightSize],
'Sample Alert');
   
   
   
}




var bounds = {x:480,y:0,width:20 ,height:320};
dlg.widthScrl = dlg.add('scrollbar',bounds,0,0,150);

//Change the height of the panel using the scroll bar value
dlg.widthScrl.onChange =
    function () {this.parent.msgPnl.bounds =
                {x:PanelPositionX,y:PanelPositionY,width:PanelWidth ,
                 height:PanelHeight + Math.round(this.parent.widthScrl.value)};
         
                 dlg.msgPnl.hide();
                 dlg.msgPnl.show();};

dlg.center();
dlg.show();