Hi Rick,

As I try to suss this out on my own I figure I can post the question here. Let's see if I can frame this clearly.

I have a hidden modal on a page. This modal is invoked from a button on the page. The contents of the modal is a list of files retrieved from the OS. There are 2 file modes. The initial list is created in mode 1 with a js call in the document.ready event of its page. When the modal is invoked, it displays the list of files for the default mode. In the default mode, we display a thumbnail for the file type and a Delete button. The appropriate viewer (PDF, XLSX, etc) is invoked by using a little js that's bound to the onclick event of the img tag. Mode 1 looks like this:

The dropdown in the modal allows toggling between the 2 file modes. The 2nd mode uses a more compressed view, and in particular, this is the one where I want to use the HtmlDataGrid object although for consistency sake I may want to use it for both modes. Leaving aside my junky test files, it displays a user-friendly name for the underlying file and uses the same js onclick event to invoke the associated viewer. A second column displays a datetime string for info purposes. Both modes are currently constructed in VFP code using divs and rows to build an HTML string. Mode 2 looks like this:

Using the various examples in the help I've got the initial load of the page seemingly working as desired. I can switch the modes using the dropdown and when mode 2 is displayed I have an HtmlDataGrid. The sad part is when I use any of the controls to navigate to other pages or sort, the returned HTML is not getting "injected" into the modal so I'm losing the rest of the page.

Modal in mode 2 with HtmlDataGrid:

After clicking the page 2 button:

Clearly, I need to figure out how to update only the html associated with the modal so that the rest of the page is preserved when using the embedded HtmlDataGrid controls. Equally clearly, this requires a bit more experience/skill than I currently have. 😃 Any suggestions or thoughts to share will be greatly appreciated.

TIA

You should probably use client side scripting to drive this content and serve the datagrid as an HTML snippet. So when you navigate you don't re-render the entire page but rather re-render just the datalist and hten inject that into the page.

Pretty easy to do with jQuery (or raw JS) with a few lines of code assuming you can figure out how to communicate with the grid display to give you the appropriate output (via parameters or POST ).

Honestly you'd be better off not using the WWWC datagrid. Maybe use it to render a small bit of data, then use the HTML and manually hook up the data and links. The server side grid isn't designed to work in client side or even mixed mode so sort/page operations won't work without navigating the page entirely. For this you need client side code if you do the modal and you don't want the whole thing to refresh.

Keep it simple. In fact I would argue that data doesn't need to be a grid. Use a ListView type display along with a client side search box, which is probably much more useful than a page/sort grid. +++ Rick ---

Thanks, Rick. I was hoping to take advantage of the baked in pagination and the ability to data drive it from a cursor. Handcrafting divs and rows, which I believe is what we basically do now, doesn't scale real well once the number of files gets into the hundreds or even thousands. And the HtmlDataGrid was just...magic. Back to the drawing board...

You can use the HtmlDatagrid, but not as is in that environment.

My recommendation: Skip the modal and just jump to a new page or tab to handle the file handling separately (or use an <iframe>) and handle the the file display completely separately.

A few hundred files are not a problem if the list is just name link and date. Honestly paging is a shitty a way to represent data. Few people will page through anything more than a couple of pages at best. if that's the case why display hundreds or more items?

+++ Rick ---