json grid

[sgagn0]

Is there a way to set field attributes on a grid record when using data url?
Something like
"Name": "joe", "id": "name",width: 20, color: "blue"

[Scott Klement]

No, sorry.

The data url is only used to control the data that gets placed into the grid. The code that draws the widget does not look for attributes in the data from the data url.

The way it works is that the screen data (your display file) contains the information about how the grid is formatted, including widths, colors, fonts, etc. It then draws out this grid, and one of the attributes is 'data url'. After it draws the grid, it calls this URL (the grid is already on the display) to get the data, and it loads the data into the already formatted grid...

You could, however, change the attributes of the grid in JavaScript code that's running in your display file.

[sgagn0]

How would you separate the search criterias from the grid using profoundui?
I would really like to have the grid refresh without reloading the hole page when someone change a search criteria.
I can't figure out a good way to do it by designing my page with profoundui product.
I tried to put the grid in an Iframe, but don't want to have my programs anonymous as this will bypass our system security (user qtmh... having too much authorities on our files). This would also close and reopen a session on each Iframe refresh.

Basically I would like to design two screens. One for search criterias and one for the grid. I would then put the the grid in an ajax container. This way I would be able to design all my screens using profoundui designer. Otherwise I would need to build the grid manually using cgi pgm.

I have been trying to find a solution since a long time ago as this is a major request we have from our users.

Thanks,
P.S. I really like profound forum, never had questions being answered that quick.

[Scott Klement]

Profound UI never reloads the entire page, it only re-loads the data for the one screen, and replaces that part of the page. Typically, a subfile is the only thing that takes much time to load, the rest of the screen loads very fast.

Do you find that your data-url approach loads noticably faster than just reloading the screen? That would be strange to me.

Can you explain why changing the criteria requires you to reformat the grid? Are you writing something like a general-purpose report writer where the user can query any file they want, and therefore the grid will change to match the data they're querying?

[sgagn0]

The page reload is really fast, the slow part is on our side. It could take 1 to 5 seconds for our program to retrieve info to load 15-20 records. I would like the user to be able to continue working on the search criterias while the program build the info for the grid.

The same could apply for a simple search (clients, suppliers, users). Would like to have it work the same way as google (being able to tap fast without losing any key punch character) and with the grid loading without pressing any button.

We do not want to reformat the grid (my english is far from perfect, I must have improperly express myself)
We would always have the same columns & fields showing in the grid, we would only play with attributes of fields (color, font).

[Scott Klement]

Your English is quite excellent! I could not tell that you weren't a native speaker.

In your first post, you gave an example of '"width":20, "color":blue', and that made me think you wanted to change the formatting of the grid itself (i.e. change the width of a column.)

I can bring this question up at our developer's meeting this week, and see what the team thinks.

One concern I have with your approach is that you may get back the responses out of order (especially the first few.) For example, if you're searching for someone's name as you type, and you first type 's', then 'sc', 'sco', 'scot', 'scottt'.... the 's' database query will take the longest, because there are many people who's names begin with 's'. So it's very possible that you'd get the response from the 'sc' query before the response for the 's' query, and that would be confusing (if this is done purely asynchronously).

Have you thought about how to solve that?

[sgagn0]

Sorry, width was a bad example.

I did not think about the ordering issue at all, thanks for bringing it up. I just read about this and I could fix that issue by either using the jQuery.Deferred or build my own queuing process.

As for another way to make this work:
I am thinking of doing it the other way around.
Is there a way I could trigger a pui.click() event on the IFrame when a search criteria is changed in the parent container?
If so, I would set values of the Iframe variables based on the parent criterias, then do the pui.click() on the Iframe.
This way control would be given to the program that is in the IFrame. It should not prevent the user to work on search criterias as only the Iframe part will be block until the Exfmt is done. There would also be no open/close of sessions.

Do you think this could work?

[Scott Klement]

One way you can add styling to the grid elements (that I didn't think of until someone pointed it out in our developer meeting) is by adding HTML tags to your grid data.
For example, you could do this:

Code: Select all

{
   "success":true,
   "response":{
      "totalRecs":8,
      "results":[
         {
            "A":"1",
            "B":"Description 1",
            "C":"<span style=\"color: blue; font-family: Consolas\">Scott</span>",
            "D":"44"
         },
         {
            "A":"2",
            "B":"Description 2",
            "C":"<span style=\"color:red\">Alex</span>",
            "D":"35"
         },
         {
            "A":"3",
            "B":"Description 3",
            "C":"David",
            "D":"99"
         },
         {
            "A":"4",
            "B":"Description 4",
            "C":"Rob",
            "D":"15"
         },
         {
            "A":"5",
            "B":"Description 5",
            "C":"Brian",
            "D":"29"
         },
         {
            "A":"6",
            "B":"Description 6",
            "C":"Antonio",
            "D":"5"
         },
         {
            "A":"7",
            "B":"Description 7",
            "C":"SWagers",
            "D":"10"
         },
         {
            "A":"8",
            "B":"Description 8",
            "C":"Other",
            "D":"42"
         }
      ]
   }
}

Notice the HTML tags in column C of the first two rows. You do need to make sure you escape the data so it's valid for a JSON document, of course. (Which mainly means putting backslashes in front of quotes that you use in your HTML data.) This should let you change any of the styling in your data url program.

[sgagn0]

Thanks,
This way were able to attach an id to the field and easily work with it in javascript.
it will be really useful for what we are planning to do with profound.