I have a couple of Web Connection questions:

1. When using the paging option of the grid object I’m losing the form values that had previously populated the grid (part number and partial description). I realize this is documented in the help, but I’m wondering if there is a way to get the values of the two textboxes to persist in order to go to page 2 of the previously produced query results. Currently they are removed when I press a page button, resulting in the grid being populated with un-filtered results.
2. When I use chromium development tools to view the page on iPad Pro, iPhone, Asus laptops, etc… I realize I should change the positioning of the Form input textboxes (separate rows seems the best best). Does it make sense to code the HTML in the Web Connection procedure to test the screen width and have a CASE…ENDCASE decide how to display the input textboxes? I think I could use the screen.width value as HTML code so as not to disrupt the responsive.css layout of the form which looks really great.

What are you using to render the page? Scripts? Templates? Old Web Control Framework Pages?

+++ Rick ---

This is the first time I've used this forum.

I'm working with Web Connection 7.2 Here's the code - a function (i.e. endpoint) that renders HTML as well as executes VFP code The system works great, I've been able to edit the templates to get the header and footer I need. I'm not sure how to answer your question but I've included the code.

I'm using a function in the main procedural file.

Here's the code:

*********************************************************************
*-- FUNCTION ListProducts()
************************
FUNCTION ListProducts()

     lcCode = Request.Params("Code")  && QueryString(), Params()

      lcDescription = Request.Params("Description")  && QueryString(), Params()

   *** Run a query with code as parameter
       LOCAL lc_where
       lc_where = l_composewhere(lcDescription,lcCode) && my UDF in the same directory - will parse GETWORD values
       IF !EMPTY(lc_where)
         SELECT code AS Part_Number,inv_description AS description,;
         TRANSFORM(bvrtlprice01,"$$$,$$$.99") AS price,TRANSFORM(INT(onhand)) AS onhand ;
         FROM itemsbi ;
         WHERE &lc_where. ; 
         ORDER BY code ;
         INTO CURSOR TQuery
         ELSE
           SELECT code AS Part_Number,inv_description AS description,;
           ALLTRIM(TRANSFORM(bvrtlprice01,"$$$,$$$.99")) AS price,TRANSFORM(INT(onhand)) AS onhand ;
           FROM itemsbi ;
           ORDER BY code ;
           INTO CURSOR TQuery     
       ENDIF
   
   lnRecCount = _Tally   
   
   * **Helper to generate templated HTML Header
   Response.Write(this.PageHeaderTemplate("Product List"))
   
   *** Display the dynamic record count as part of the header
   TEXT TO lcHtml TEXTMERGE NOSHOW
   <h3>
      <i class='fa fa-list'></i> Product List
      <span class='badge badge-info badge-super'><<TRANSFORM(lnRecCount)>></span>
   </h3>   
   <hr />
   
   <!-- THIS CODE SHOWS THE INPUT FORM  THAT POSTS BACK TO THIS SAME PAGE -->
   <form action="listproducts.wp" method="POST">
   
   <div class="input-group mt-4 mb-3">
     <div class="input-group-prepend">
      <span class="input-group-text">
      <i class="fas fa-search"></i>&nbsp; PART NO.</span>
     </div>
     <input type="text" name="Code" 
            style="text-transform: uppercase"
            class="form-control" 
            placeholder=""
            value="<<lcCode>>"
      />
      <div class="input-group-prepend">
      <span class="input-group-text">
      <i class="fas fa-search"></i>&nbsp; DESCRIPTION</span>
     </div>
     <input type="text" name="Description" 
            style="text-transform: uppercase"
            class="form-control" 
            placeholder=""
            value="<<lcDescription>>"
      />
     <div class="input-group-append">      
         <button type="submit" name="btnSearch" class="btn btn-primary mt-0" AccessKey="S">
            Search...
         </button>	      
      </div>
   </div>
   
   </form>
   ENDTEXT
   Response.Write(lcHtml)
   
   
   IF lnRecCount > 0
      loConfig = CREATEOBJECT("HtmlDataGridConfig")
      loConfig.Width = "100%"
      loConfig.Id = "tblTquery"
      *-- loConfig.PageSize = 10  && took this out because of the POST wiping out the values each time

      loColumn = loConfig.AddColumn("part_number")
      loColumn.HeaderText = "Part Number"
      loColumn.ItemAttributeString = [ style="text-align: left" ]

      loColumn = loConfig.AddColumn("description")
      loColumn.HeaderText = "Description"
      loColumn.ItemAttributeString = [ style="text-align: left;" ]

      loColumn = loConfig.AddColumn("price")
      loColumn.HeaderText = "Price"
      loColumn.ItemAttributeString = [ style="text-align: left;" ]

      loColumn = loConfig.AddColumn("onhand")
      loColumn.HeaderText = "On Hand"
      loColumn.ItemAttributeString = [ style="text-align: center;" ]

      lcHtml = HtmlDataGrid("TQuery",loConfig)
   ELSE
      lcHtml = "<div class='alert alert-warning'><i class='fa fa-warning'></i>" + ;
               "No matching products found for <b>'"  +  lcCode + "'</b>.</div>"	
   ENDIF
   
   Response.Write(lcHtml)
   
   Response.Write(this.PageFooterTemplate())
   
ENDFUNC
*********************************************************
   
ENDDEFINE

This is beyond the basic scope of the server side grid, which only works GET links natively. It's possible to do this but it'll take some work.

Basically you need to force the page to do a form submission in order to send the data as part of the request. There are several ways that you can do this, but as a general rule I would recommend to not mix Datagrids with post data in this scenario.

The first thing I suggest is don't use paging unless your data set is huge. if you have a list of data that is manageable, use a fixed size list with a scrollbar in the page and let the user scroll through the data perhaps with a client side Javascript based search box to jump to what they're looking for. Paging is very annoying for users and unless the data is very large it's often easier and even more efficient if you can avoid having to go back to the server to retrieve a second or third page.

if you really need paging and do it on the server side, then I would recommend keeping the list separate from other data to avoid the scenario that you describe as any combination of data and the grid requires you to submit all the data.

The final option is that you can capture those extra fields, but it'll require some JavaScript code to intercept the grid navigation clicks. Instead of just navigating you can inject the click handler, pick up the original url and then append the form variables captured in Javascript and send them on the query string along with the data grid data. You could also force a form submission if you have a lot of data and store the Grid data as post variables in hidden variables.

This is obviously a lot more work than just using the built-in paging, but there's only so much you can automate with server side grid/navigation controls.

+++ Rick ---

In order to capture the page content beyond the grid, you have to POST the page, and you'll need some JavaScript script to handle the

Thanks Rick, the list (i.e. grid) is fairly large when there are no values in part number or description textboxes, but the user can scroll quite quickly downwards and can always redefine their search criteria as they see results. I like the idea of a client side Javascript based search box, if there is any article you could point me to on coding that it would be great, I'll dig into this on my own as well. Conceptually, is there a recommended way (or place) to put the Javascript code in the Web Connection procedure? Thanks for your help, it's really appreciated.

jquery filters work great for filtering text content, it takes very little code and works just fine with server side code.

Here's an old blog post that talks about this:

• Filtering List Data with a jQuery-searchFilter Plugin

(and it's built into ww.jquery.js which is part of Web Connection)

+++ Rick ---

Thanks Rick, I'll check that out, sounds promising.