At the risk of doing something that is considered a NO-NO, I am pretty sure doing this is the only way that makes logical sense.

Simple requirement: User is presented with a list of items they can order. Only 2 columns in grid, Item description and Quantity the user wants to order. My WebProcess function:

FUNCTION ProductList()
private lnreccount,pcGridHtml,pcerrormsg
pcerrormsg=""

lcId = Request.Params("Id")

IF !USED("Products")
   USE Products IN 0
ENDIF
SELECT Products

SELECT HREF([EditProduct.wp?id=] + id,prodname) as ItemName, ;
   0 as quantity ;
   FROM Products ;
   ORDER BY ItemName ;
   where cprodcatid=lcId;
   INTO CURSOR TQuery
*** Capture the record count
lnRecCount = _Tally

IF lnRecCount > 0
	pcGridHtml = HtmlDataGrid("TQuery")
ELSE
   this.ErrorMsg("Invalid product Id",;
   "No products this category. hr/>Please return to the <a href='ProductCategories.wp'>product categories</a>...")
   RETURN 
ENDIF

Response.ExpandScript()

ENDFUNC

My template, Productlist.wp:

<% 	
	* VS Addin Comment: SourceFile="~\..\deploy\YOUR_PROCESS_CLASS.PRG"
	pcPageTitle = "productlist" 	
%>
<% Layout="~/views/_layoutpage-CFSInmatePOS.wcs" %>

<div class="container">
    <h3>
        <i class='fa fa-list'></i> Product List
		<span class='badge'><%= lnRecCount %></span>
    </h3>
    <hr />

    <!-- Conditionally display an error message  -->
    <% if !Empty(pcErrorMsg) %>
    <div class="alert alert-warning">
        <i class="fa fa-warning error"></i>
        <%= pcErrorMsg %>
    </div>
    <% endif %>

    <div class="container">
        <% if lnreccount < 1 %>
        <div class="alert alert-warning">
            <i class="fa fa-warning"></i>
            There are no matching products to display.        
        </div>
        <% else %>
        <%= pcGridHtml %>
        <% endif %>
    </div>

</div> <!-- container -->

All the above works fine. I see:

What I want to do: I want the quantity column to be editable. It should probably be a spinner control. Anytime the user enters a quantity for an item I will need to execute POST code to add that item to the "shopping cart". I have searched the documentation and the message board for any examples of editing from a grid but can not find anything and am having difficulty figuring out how. Any examples or reading material would be appreciated. John

You can render a textbox (or type="number") into the datagrid with custom HTML to produce the textbox. That part's pretty easy.

The second bit is about retrieving the data if it's changed. There are no simple solutions to to this, but a number of different ways to solve this.

You can use:

• Special naming in for the textbox field that reflects the record each textbox belongs to (ie. "_" + TRANS(Pk) + "_Id") and then match all the values on the server to records that were displayed. This is slow and but can work well if all or a lot of records get changed.

• Use JavaScript change events to detect when a field is changed and post the value to the server using an AJAX call

• For full editing scenarios pop up an overlay that lets you edit the record on the client side and use JavaScript to capture the input and post it to the server.

For you I would likely choose option #2 with single field edit. For scenario #3 I would actually recommend putting a link to an edit form rather than doing in place editing.

Finally there are also a number of client side JavaScript grid controls that allow full edit support. They take a bit of effort to set up properly, but once set up you can get a lot of features out of them that are as rich or richer than what you can do in a FoxPro Grid.

+++ Rick ---

Thanks Rick. I will spend some time thinking about it but having looked at some retailers sites option 3 may be the smarter choice with something like a + and - signs in place of the Quantity column of the grid, like you did in Step 6 of MVC development with bizobjs and particularly adding the edit and delete columns to the grid. Conceptually that is how Wal-Mart's site works. I don't understand things well enough yet to even ask a question but I am pretty sure sessions is going to be involved. When I get there I will surely ask.

Thanks again, John

If you do a full 'record' editing mode I would open a new form and show the edit view there (rather than a popup which is more complicated to handle).

For single field or a few fields the live editing with AJAX updates is not a bad way to go and relatively easy to implement but this can get complex, especially if you need to recalculate values based on the changes. Not very difficult but not simple either.

+++ Rick ---

Well, I have been reading about AJAX which led me to your papers on JQuery. At this point it seems JQuery and AJAX "processing" (for lack of better words), are just EASIER (and likely faster) ways to retrieve data from forms and act on that data. Assuming that is even remotely correct, I have decided to stop my development to discuss a bigger issue, let's call it, "retaining data" (I know that is VERY broad).

For my website, I know the user because it is passed to me in the URL, something like, https://www.correctionalfoodservices.com/inmateorderentry.wp?sid=002337841 where 002337841 is the inmate’s SID# or main identifier for the user/inmate. I would have server code to retrieve the sid from the URL and display a page so the inmate can verify they are the person wanting to order commissary.

Upon verification I would do like I do for my desktop app i.e. look up a lot of information from my database such as the inmate's current account balance, any restrictions, such as this inmate can only purchase personal hygiene products or this inmate is diabetic or the inmates age for tobacco products, or the number of ink pens he has purchased in the last x days, etc. There is a lot more of this type information and some of it can be intensive to pull from the database. Pulling product information (items the inmate's can purchase) can be just as intense/time consuming. The point is there is a lot of information that should be pulled once when the order entry process is begun and then again when the user selects "check out" after finishing entry of their order, the key point being, not while the order is being filled out by the user.

Finally to my question: In a really big picture conceptual way, for a desktop app, the solution is storing all the "pulled" data in properties, temporary variables, cursors and arrays. For a website where every roundtrip between the end user's browser and the server means redoing everything, what big picture concept should be used or understood to accomplish the same thing?

Thanks, John

For a quick tour of making AJAX calls with jQuery in Web Connection check these two links:

• Using jQuery.get() to retreive data from a server
• Accessing the REST API with jQuery

+++ Rick ---