Use ActiveWidgets grid as editable ComboBox

Hi there!

I think, this is a tricky task, but if somebody can solve it, that would be a great thing.

I'm looking for a combox widget, that can display data in rows and columns. The whole thing could probably consist of one hidden field for the unique ID, a normal input box (if editable) or a span area (if non editable) and an, which displays the grid.

If a user opens the "combobox" (which is only a click on the image) the datagrid appears and gets the focus, so the user can navigate in it.

As soon as the user presses enter or doubleclicks one item, the ID of the record is transfered to the hidden field and the content of one specific row is displayed as a text within the form.

Does anyone have an idea of how to do that?

Thanks
Mike

Mike

April 24,

All that should be possible. But I don't see what is the benefit of having the grid in the dropdown (instead of say plain HTML table) - do you need headers/sorting/resizing or it is something else?

Alex (ActiveWidgets)

April 29,

I would really like to use the complete widget as a dropdown.

This means that a user sees for instance a plain input field. Next to this input field there is an icon that indicates that this is a dropdown field too. After clicking the dropdwon button, your great widget appears and the user can select a value from the widget.

The idea came up, because I haven't found a free combobox widget that offers multiple rows and can be integrated easily into an application yet. As I've seen how easy it is to integrate the widget into an application, I thought that it would be great to have a professional combobox within the web environment.

This would also provide sorting within the combobox, and I think this would be a great benefit.

So if anyone could suggest some code that does this, I would really be greatful.

Thanks
Mike

Mike

April 30,

Mike & Alex
It would be great if the grid could do that. I'm trying to develop EXACTLY this widget, but my lack of experience its a big problem :-(
My web app needs several dropdown lists with 2 or 3 columns. I'm thinking that the grid is the best option in order to do that. The only thing to do is put the grid in a container that appears when the user clicks on a link/button.
If someone have any ideas of how to do this...welcome!!

Thanks

Sergio

April 30,

Something like this maybe?

<body>
  <INPUT ID=inp TYPE=TEXT><INPUT TYPE=BUTTON VALUE=">" onClick="grid.style.display='inline';">
    <script>
    var obj = new Active.Controls.Grid;
    obj.setRowProperty("count", 20);
    obj.setColumnProperty("count", 5);
    obj.setDataProperty("text", function(i, j){return myData[i][j]});
    obj.setColumnProperty("text", function(i){return myColumns[i]});
    obj.setRowHeaderWidth("28px");
    obj.setColumnHeaderHeight("20px");
    obj.setAction("click", function(src){inp.value = src.getItemProperty("text"); grid.style.display='none';});
    document.write("<SPAN ID=grid STYLE='display: none;'>"+obj+"</SPAN>");
    </script>
</body>

Christiaan

May 1,

Hi Christian!

Great, this works fine. I've added some code in order to have the grid displayed when the button is clicked and to be hidden when it's pressed again.

I've also added a doubleclick code. Right now the current row number is returned to the input box. This needs to be changed in order to provide a real combobox widget.

Do you also have an idea of how to set the position of the whole widget just below the input box inp without moving the other objects? I've tried to set the position through position: absolute; left... but that's not what I was looking for.

It would be great if the grid would be positioned right there.

Here's the code:

<script>
        function toggle(theElem){
            document.getElementById(theElem).style.display = (document.getElementById(theElem).style.display == 'none')?'':'none';
        }
    </script>
</head>
<body>
<br>
Test
<br>
<INPUT ID=inp TYPE=TEXT><INPUT TYPE=BUTTON VALUE=">" onClick="javascript:toggle('grid');">
<script>
var obj = new Active.Controls.Grid;
obj.setRowProperty("count", 20);
obj.setColumnProperty("count", 5);
obj.setDataProperty("text", function(i, j){return myData[i][j]});
obj.setColumnProperty("text", function(i){return myColumns[i]});
obj.setRowHeaderWidth("28px");
obj.setColumnHeaderHeight("20px");
var row = obj.getTemplate("row");
row.setEvent("ondblclick", function(){this.action("myAction")});
obj.setAction("myAction", function(src){inp.value = src.getProperty("item/index")});
document.write("<SPAN ID=grid STYLE='display: none; position: absolute; width: 400; height: 300;'>"+obj+"</SPAN>");
</script>

Mike

May 1,

You can position the dropdown with "position:relative" and negative margins, which are equal to the grid size (so there is no empty space left).

#grid {
    display: none;
    position: relative;
    top: 1.3em;
    left: -100px; /* size of the input box */
    width: 200px;
    height: 300px;
    margin: 0px -200px -300px 0px;
}

Alex (ActiveWidgets)

May 4,

Thank you Alex, that works fine.

It's just amazing what can be done, when someone knows how to.

Mike

May 5,

I don't get it to work....
where is my mistake?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<META name="GENERATOR" content="IBM WebSphere Studio">
<TITLE>grid.html</TITLE>

<link href="css/grid.css" rel="stylesheet" type="text/css" ></link>

<style>  
    .active-column-0 {width: 80px;} 
    .active-column-1 {width: 200px; background-color: threedlightshadow;} 
    .active-column-2 {text-align: right;} 
    .active-column-3 {text-align: right;} 
    .active-column-4 {text-align: right;} 
    
#grilla {
    display: none;
    position: relative;
    top: 1.3em;
    left: -100px; /* size of the input box */
    width: 200px;
    height: 300px;
    margin: 0px -200px -300px 0px;
} 
</style>

<script LANGUAGE="JavaScript" src="js/grid.js"></script>


<script>
        function toggle(theElem){
            document.getElementById(theElem).style.display = (document.getElementById(theElem).style.display == 'none')?'':'none';
        }
    </script>
</head>
<body>
<br>
Test
<br>
<INPUT ID=inp TYPE=TEXT style="width: 100px;">
<INPUT TYPE=BUTTON VALUE=">" onClick="javascript:toggle('grid');">
<script>
                var myData = [ 
                    ["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"], 
                    ["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"], 
                    ["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"], 
                    ["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"], 
                    ["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"], 
                    ["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"], 
                    ["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"], 
                    ["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"], 
                    ["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"]
                ];
                            
                var myColumns = [ "Ticker", "Company Name", 
                 				   "Market Cap.", "$ Sales", "Employees" ];				
                var obj = new Active.Controls.Grid;
                obj.setId("grilla");
                obj.setRowProperty("count", myData.length);
                obj.setColumnProperty("count", 5);
                obj.setDataProperty("text", function(i, j){return myData[i][j]});
                obj.setColumnProperty("text", function(i){return myColumns[i]});
                obj.setRowHeaderWidth("28px");
                obj.setColumnHeaderHeight("20px");
                var row = obj.getTemplate("row");
                row.setEvent("ondblclick", function(){this.action("myAction")});
                obj.setAction("myAction", function(src){inp.value = src.getProperty("item/index")});
                document.write("<SPAN ID=grid STYLE='display: none; position: absolute; width: 400; height: 300;'>"+obj+"</SPAN>");
</script> 


</BODY>
</HTML>

sdgian

May 11,

Mike,

In open-modeling we have relate fields were users can relate data. A popup comes up and the widget is appearing. It is a popup because the dialogue is more complex (selection from multiple grids interacting with each other).
If you want to see how it looks:
http://open-modeling/dyndns.org/openmodeling215b (default guest user now editing possible) if you want to edit use from menu-item Access: user model password om.
A popup is the same way were users can select dates from the well-known calendar object. A popup now a days with the pop-up stuff is a little bit of a horror. But without popups pages becomes heavier (loading takes longer) and more complex.

John Ophof

July 28,

This topic is archived.

Use ActiveWidgets grid as editable ComboBox

See also:

Search

New Data Grid

Version 2