jQuery & jqGrid - multiple options within grid column

Question

Using jQuery & AJAX to retrieve data from a SQL database. I'm considering using jqGrid (if it is possible). When the data is retrieved, depending on its priority & whether it must be acknowledged, it can present 1 of 3 options on each row: a Dropdown box (requiring the user to select an option in it), a submit button (to acknowledge it was received), or it can say "None Required". In general, it would look like the image below:

ActionPanel

The AJAX call is on an interval & will be refreshed every 30 seconds.

What has to happen is the items requiring an action when the user clicks/selects them, would update the data source & update the row with their response and the date time they responded.

There could be multiple rows with dropdown boxes, there could also be multiple rows with submit buttons. Once an item has been responded to (or if nothing is required) the message would go away (be filtered out) on the next refresh.

Other info - the items in the dropdown would be the same ones for each row. Also, if the user has a dropdown open, the interval would stop and would then restart once a selection is made (the grid should not refresh while the dropdown box is open).

Can something like this be done using jqGrid, or better/easier done using another jQuery plugin, or should it be done in HTML (using jQuery)? I would appreciate any input.

EDIT

I am testing the grid now (just displaying data) to see how it is working using setInterval. I use code below to set the interval.

iLoad = setInterval(function(){
    mytime = new Date();
    mytime = new Date(mytime - 60000);
    mytimeString = ('00'+(mytime.getHours())).slice(-2) +":"+('00' + (mytime.getMinutes())).slice(-2) + ":"+ ('00' + (mytime.getSeconds())).slice(-2) + "."+ ('000' + (mytime.getMilliseconds())).slice(-3);
    var cday = new Date();
    var curday = ('00'+(cday.getdate())).slice(-2);
    var curmon = ('00'+(cday.getMonth())).slice(-2);
    var curyr = cday.getFullYear();
    var currdate = curyr +"-"+curmon+"-"+curday;
    gridload(id, mytimeString, currdate);
    }, 60000);

What I notice is that on the first time it is called, the grid does a GET on the data source, but that afterwards, when the interval fires again, it's not doing a new GET. I put in some log displays that shows it is calling the function, but a display within the grid code (in the loadComplete) fires only the first time. The time I am sending is asking for anything new on the table since the time parameter I am passing, so I was expecting it to fire each time.

The code that is setting the interval had previously been getting the same info & putting it into an HTML table, so I know the interval is firing like it is supposed to.

I don't have anything set to cache or load once on the grid. What am I missing? Why isn't the interval making it do a subsequent GET on the data?

*About **EDIT** part of your question:* You don't included the code of `gridload` function. You should **create** the grid from empty `` **once**. After creating the empty `
` will be converted into **complex structure of divs and tables**. Later you should use `trigger("reloadGrid")` to reload **the body** of the grid with new data returned from the server. See [the answer] (http://stackoverflow.com/a/10461964/315935) for the code example. — Oleg, Jun 19 '13 at 18:31
@Oleg - I found the very post you refer to late yesterday, but that wasn't what I was really after. Since I am passing a new time every time the interval is called, I want to retrieve (1) what hasn't been responded to (and was a requirement), and (2) what was new since the last interval. I then found your post (http://stackoverflow.com/questions/4920323/jqgrid-gridunload-griddestroy/4920612#4920612) about the difference between gridunload & gridDestroy - the gridUnload is what I needed to use. I tested for existence of the grid, then unload & then retrieved the data from SQL. — steve_o, Jun 20 '13 at 13:36

score 1 · Accepted Answer · answered Jun 19 '13 at 15:01

1

Yes, this can be done using jqGrid or other data grid options such as SlickGrid.

With jqGrid, you will want to use the Custom Formatter for the specific customization to cells you desire.

answered Jun 19 '13 at 15:01

ljs.dev

4,449
3
47
80

jQuery & jqGrid - multiple options within grid column

1 Answers1