OlegK said:

It seems to me that it is a new question. Nevertheless…

Nothing is impossible. But some things are a little tricky. What do you asked for can be realized outside of jqGrid (as external filters) very easy. The realisation of the same scenario inside of jqGrid is do possible but a little tricky. One can define use dataEvents property of editoptions and define 'change' custom event handle. In the handle you can make an ajax request to the server (I recommend you include caching of this ajax request, because information about coutries will be changed not so friquently) and then rebuild <select> element of the secton column.

You can searach the forum for the corresponding examples. For example here you will find discussion and examples on the subject.

Best regards
Oleg

Hi Oleg,

Much thanks for the reply. I am new to this forum (and also to jqGrid) and not being able to search for help topics I need efficiently. This topic was similar to what I needed and asked the question here.

Really appreciate your help.

Thanks,

-Deepak

Nothing is impossible. But some things are a little tricky. What do you asked for can be realized outside of jqGrid (as external filters) very easy. The realisation of the same scenario inside of jqGrid is do possible but a little tricky. One can define use dataEvents property of editoptions and define 'change' custom event handle. In the handle you can make an ajax request to the server (I recommend you include caching of this ajax request, because information about coutries will be changed not so friquently) and then rebuild <select> element of the secton column.

You can searach the forum for the corresponding examples. For example here you will find discussion and examples on the subject.

Best regards
Oleg

Is it possible to filter other select inputs in the same row based on value from select input selected during inline edit without reloading the grid? 

Eg. If I have two columns in a table country and state, I select the row so that it becomes editable (using event based editing); when I select country, it automatically filters states based on the selection or even vice versa if I select a state then it filters the country.

It could be assumed that country and state dropdowns are pre-populated with values.

Thanks,

-Deepak

1) If you use mtype: 'GET' the values from postData will be just concatinated to the value of url parameter of jqGrid. To be exactly the values will be encoded with respect of encodeURIComponent function. Before concatianting postData value to url will be verified whether url already contain '?' in not yet then the '?' will be inserten between url and converted postData. If '?' alreasdy exist, then '&' will be used like between on different properties of postData. For example if url:'/myDataProvider' and postData: {city:"New York",regionId:2} then the destination url will be '/myDataProvider?city=New+York&regionId=2'. So it is very easy in use.

Morover if postData: {city:function() { return $("#country option:selected").val(); },regionId:2} then on every reload of data will be get the current selected value from the drop-down list with id="contry" (# selector mean 'id' and not 'name' attribute): '<select id="country">...</select>'

2) you should better never use event handle like "onchange" direct in HTML code: '<select id="country" onchange="myReload(this.value)">'; It is every old style, it has many disadvantages. For example myReload() funtion must be global which is bad because of different reasons.  Yo can use $("#country").change(/*..your function.*/) which is simplified form of $("#country").bind('change', /*..your function.*/). You can declare a local function myReload() which you can place inside of can inside of jQuery(document).ready event handler

var myReload = function () {...};

but all this only the question of style and performance, but another way will be also work.

3) It is not important how much rows has you database. The server should get back only 10 rows in every responce back (you have rowNum:10). The value will be send to the server as a part of every request. If the user select another value from the rowList:[10,20,30] array, that the server should get back the correspondind maximal number of rows. You can use SELECT TOP (10) on the backend or other will known construction. Examine how paging of data could be better implemented in your database. The server should produce output in the one of the form described in "Data Manipulation" chapter of registry. If you want a liitle speed up your solution you can produce and transfer data in JSON format instead of XML.

Best regards
Oleg

I have followed the pieces of code here and there and tried to put it all together to the top of my head, I think I am somewhat close, yet, there are lines of code uncompleted

STARTING TO DEFINE THE CLIENT SIDE

jQuery('#grid_selector').jqGrid({

    url:'example.php',
    postData: //THIS WOULD BE THE FILTERING PARAMETERS

    {
        CountryId: function() { return jQuery("#CountryId option:selected").val(); },
        RegionId: function() { return jQuery("#RegionId option:selected").val(); },
        CityId: function() { return jQuery("#CityId").val(); }
        }
    
    datatype: 'xml', // STANDARD JSON INFO
    mtype: 'GET',
    colNames:['HotelName','Description', 'Address','Price','Total','Notes'],
    colModel :[
        {name:'Hname', index:'invid', width:55},
        {name:'descript', index:'invdate', width:90},
        {name:'address', index:'amount', width:80, align:'right'},
        {name:'price', index:'tax', width:80, align:'right'},
        {name:'total', index:'total', width:80,align:'right'},
        {name:'note',index:'note', width:150, sortable:false} ],
    pager: jQuery('#pager'),
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'id',
    sortorder: 'desc',
    viewrecords: true,
    imgpath: 'themes/basic/images',
    caption: 'My first grid'

});

If you have your own interface for searching/filtering..Yes I do, selectboxes

you should just append your url yourself ...Yes, but how, where ?

and reload the grid with respect of trigger('reloadGrid')

like this then...
    
    var myReload = function()
    {
           myGrid.trigger('reloadGrid');
    };

On the HMTL block (same page as above):

Now, if user change selected option in select box with id=CountryId or another select box with id=CityId (with mouse or keyboard), the function myReload will be called

echo '<select name="country" onchange="myReload(this.value)">';

...yet, there must be something missing...

lets see the logic. The select boxes have an onChange event. When something "shakes" in the select box, the onChange event sends that parameter (this) to myReload function (which would probably be just an ajax piece of code). Then this myReload forwards that parameter to a php script which will build the table. ..

Also, what about the XML file the plugin needs to build the table ? I  have hundreds of rows ...

thank you very much

Now I understand you problem. It can be very easy implemented with respect of jqGrid. Look at my old answer on the stackoverflow.com.

You should define 'change' event handler on the select html element with contries and call trigger('reloadGrid') on your jqGrid to refresh the data on any select of net contry. Moreover, you can send in all requests to the server the curent value selected in the 'country' select element. To do this you can use postData with functions as the value of some properties. I recommend you also insert in all select lists like 'country' the option with the text 'All' and the empty value. This option could be default. This will allows to get unfiltered data.

You can also use filterToolbar to implement the same bevavior inside of jqGrid. I prefere to use stringResult:true option additionally to stay compatible with the advanced searching.

How you can see jqGrid is very flexible and allow you impelment different scenarios.

Best regards
Oleg

Hello Oleg

The scenario I describe is everywhere, so maybe I did not explain myself correctly. I give you a real life example. Think of a web for hotels. You see 3 select list. Countries, Provinces and Cities, of course, each select list has many of everything, any countries, many provinces within that country and many cities within that province.

          Country Germany, Staat Bayern, City Munich.  All of them are interdependent, Bayern will contain Stuttgart, München etc.

Below those select lists, you have  a table displaying hotels. Once you select Munich, you may get 46 hotels, divided in 5 pages, (4 of 10 and the last has 6 hotels). You may click next next and at a moment, you decide to change city and you choose Stuttgart (You are still in Bayern) and now you get 34 hotels, which would be of course, 4 pages, (3 x 10) + 1 x 4 .  Well, the pagination updates itself and now. But you dont need to press buttons or change pages. The select lists OnChange event passes new values to the SQL query of the table and the table which is passed those parameters via Ajax calls, renders different shows of pages every time you choose new country or new province or new city.

This is what I meant. Yes, it is true, the web administrator, or a hotel owner may at any time add one hotel more, but until the insertion has not been completed, the end user sees nothing different. After the insertion has been completed, when the user does another search of the same place, obviously, he will see one new row.

If you dont see it clearly, I can send you a videoshot of how those menus work, but I think it is clear now.

spasiva zsaranie

OlegK said:

Hello Vivaldi,

In my opinion you do can use jqGrid to implement dynamic table. But loading of current data from the server on every row select or cell select I find not good. The developer of jqGrid found this also not good and not implemented this kind of "dynamic tables" in the jqGrid. The reason is easy to explain. If you do so, and a some row before selected row is inserted then the selected row must be one row below after the data refresh. This behavior will make the user crazy. He selected a row and the row run away. So I see no sense in reloading of data on every row/cell select.

If the data (a cell or a row) will be modified, then the modified data will be send to the server and if you implemented on the server a concurrency check (I prefer optimistic concurrency), then an error will be displayed if the same data row was modified by another user. But modifying of data is another question.

What jqGrid do is asking the page of data from the server per ajax. If you use datatype:'xml' then the server should send to the client the page in xml format. If you use jqGrid with the datatype:'json', than the data must be send in JSON format. In every request the server received always 1) the name of the column by which the data should be sorted and the sorting direction 2) the page number requested 3) the current number of rows per page. So if the user click on a column for the data sorting or click on the next/previous page and so on the request to refresh the data will be send to the server. The server can ask the Database Server per SELECT statement or more sophisticated STORED PROCEDURE to get only one requested page of actual information. So the user will be see really current information.

In the last project which I implemented using jqGrid I cached the data additionally with ETags. So if the client has already the data for the page requested the client send ETag from the page which it has in the cache (ETag is a part of HTTP header which are saved in the local cache of every browser together with the data). If the server see that the current data in the database are not changed and the calculated ETag is the same as the client has, then the server send back no data and "Not Modified" HTTP code instead of usual 200 (OK). The client get the data from the local cache and for the user all stay exactly as all would be without data caching. Nevertheless one can be sure also in the scenario that what the user see after the page refresh, after the click on the next page or change of sorting are really actual data.

So I can repeat: in my opinion jqGrid allows you implement really dynamic tables.

Best regards
Oleg 

In my opinion you do can use jqGrid to implement dynamic table. But loading of current data from the server on every row select or cell select I find not good. The developer of jqGrid found this also not good and not implemented this kind of "dynamic tables" in the jqGrid. The reason is easy to explain. If you do so, and a some row before selected row is inserted then the selected row must be one row below after the data refresh. This behavior will make the user crazy. He selected a row and the row run away. So I see no sense in reloading of data on every row/cell select.

If the data (a cell or a row) will be modified, then the modified data will be send to the server and if you implemented on the server a concurrency check (I prefer optimistic concurrency), then an error will be displayed if the same data row was modified by another user. But modifying of data is another question.

What jqGrid do is asking the page of data from the server per ajax. If you use datatype:'xml' then the server should send to the client the page in xml format. If you use jqGrid with the datatype:'json', than the data must be send in JSON format. In every request the server received always 1) the name of the column by which the data should be sorted and the sorting direction 2) the page number requested 3) the current number of rows per page. So if the user click on a column for the data sorting or click on the next/previous page and so on the request to refresh the data will be send to the server. The server can ask the Database Server per SELECT statement or more sophisticated STORED PROCEDURE to get only one requested page of actual information. So the user will be see really current information.

In the last project which I implemented using jqGrid I cached the data additionally with ETags. So if the client has already the data for the page requested the client send ETag from the page which it has in the cache (ETag is a part of HTTP header which are saved in the local cache of every browser together with the data). If the server see that the current data in the database are not changed and the calculated ETag is the same as the client has, then the server send back no data and "Not Modified" HTTP code instead of usual 200 (OK). The client get the data from the local cache and for the user all stay exactly as all would be without data caching. Nevertheless one can be sure also in the scenario that what the user see after the page refresh, after the click on the next page or change of sorting are really actual data.

So I can repeat: in my opinion jqGrid allows you implement really dynamic tables.

Best regards
Oleg 

Please, just one question. I have read the 127 pages manual. Still I dont have the answer to this simple question.

I am seeing that all table formatters plugins, say they format also from server, ajax etc, and they call that Dynamic data. However, as I read they actually ask you to indicate a table from the database upon which to make the plugin work. A table or an XML data, but that makes no difference, it is still static.

I want to know if Jquery Grid can be used in this scenario:

Really dynamic loading of data. For example, you have select boxes, and as you interact with them, a table which is receiving their parameters alters itself. Here, here is where I want to have them paginated in real time. The table that is actually shown as you interact with the select boxes will probably be the result of a SQL query to several tables, that is the simple but true dynamism I want. In the 127 pages by Mr.Tonkov, they give an example but they ask you to manually populate an XML datafile. Obviously, that would not be feasible with more than 20 rows. let alone some thousands.

So far, all I see is, like I said, a static table of the DB.

Thanks a lot

Emelianenko fan