CodeCharge Studio
search Register Login  

Visual PHP Web Development

Visually Create Internationalized Web Applications, Web Reports, Calendars, and more.

YesSoftware Forums -> CodeCharge Studio -> Tips & Solutions

 editable grid with lookup search grid popup on each row and more!

Print topic Send  topic

Author Message

Posts: 21
Posted: 06/02/2011, 5:38 AM

Well it took me a while but i finally got this working
perhaps it'll help some of you who are looking for a similar functionality, or some of the features i got working.

i've implemented this for an invoice entry form, where the main invoice body is entered through an editable grid
you have part number, description, quantity, price and total price

i wanted to set it up with auto-fill, so the user keys in the part-number, and the description and price are automatically filled from the DB.

now this is generally simple, you just need to add the auto-fill feature, however in many cases the data-entry user doesn't have the part-number memorized, and typically there are hundreds, if not thousands of parts, so a lookup search grid would come in handy, as long as there was a way to popup the lookup grid, search, find the part, click the part you need and have the part number automatically filled on the master form (on the appropriate grid row) and have the ajax auto-fill feature kick in then to fill the rest of the fields.

so first of all, to get the popup window, i added a column to the editable grid, and i put a link control (basically a magnifying lens icon) with an OnClick set as
OpenPop_UpList({invoice_detail:rowNumber}); return false;

now in the top of the HTML, i added the following custom script:
function OpenPop_UpList(rowNumber)  
  var linkhref = document.getElementById("invoice_detailLink1_"+rowNumber).href;  
  var"?row="+rowNumber, "invoice_detailLink1_"+rowNumber, "left=100,top=10,width=640,height=480,status=no,toolbar=no,menubar=no,location=no,scrollbars=yes");  

as you can see, when the editable grid is populated, each search button has the row number embedded in the onclick script call, and the function reads the value, and embeds it in the target URL parameter of the search grid popup (i.e: search_popup.php?row=1 )

the search grid popup is a simple grid with a search form on top..
i changed the part_number column from a label to a link, and the link has an OnClick event set as
SetOpenerValue(this);return false;

and within the HTML, i added the following functions, first a function to retrieve the row number from the URL (you can probably simplify this, but i wanted something generic that i can use elsewhere too)

function getParameter(name) {  
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");  
  var regexS = "[\\?&]"+name+"=([^&#]*)";  
  var regex = new RegExp( regexS );  
  var results = regex.exec( window.location.href );  
  if( results == null )  
    return "";  
    return results[1];  

and the actual function that returns the clicked row value back to the master form
function SetOpenerValue(currentObj)  
var rowNumber = getParameter('row');  
var target_cell = "item_pn_"+rowNumber;  
        var IE  = (document.all) ? 1 : 0;  
        if(IE) {  
                var PartNum = currentObj.innerText;   
        } else {  
                var PartNum = currentObj.text;    
        window.opener.document.invoice_detail[target_cell].value = PartNum;  
        //HACK: invoke ajax call directly to fill the fields   

notice in the code above, under the HACK remark, the following line invokes an Ajax call on the parent form to trigger the auto-fill feature.

this way when the part number field on the main editable grid is filled via the search popup, ajax-autofill would also fill the description/price fields just like with normal entry

hope this helps!

View profile  Send private message

Add new topic Subscribe to topic   

These are Community Forums for users to exchange information.
If you would like to obtain technical product help please visit

Web Database

Join thousands of Web developers who build Web applications with minimal coding.

Home   |    Search   |    Members   |    Register   |    Login

Powered by UltraApps Forum created with CodeCharge Studio
Copyright 2003-2004 by  and YesSoftware, Inc.