JQGrid Dynamic Column and Search Query

Question

Suppose I have the following data:

Name        Month           Expense
----------  --------------  ----------
XYZ         February         10
XYZ         March            50
KLM         March            20
ABC         April            30

Following the solution in this SO question I have been able to create a JQGrid instance that has the "Expense" value represented in columns instead of rows. For example:

Name        Expense February     Expense March     Expense April
---------   -----------------    ---------------   --------------
XYZ         30,00                50,00             0,00
KLM         0,00                 20,00             0,00
ABC         0,00                 0,00              30,00

In the colModel that I am dynamically building I am using the same index value for every dynamically added column so every search will be redirected automatically to the Expense field.

This works like a charme :)

Unfortunately in the search dialog the users does not see a single column to filter on the Expense field but he has the opportunity to filter for the columns called respectively Expense February, Expense March and Expense April which is a little bit confusing because he thinks that is going to filter not only for the Expense property but also for the Month property.

Is there any way to instruct the jqGrid plugin to hide those unwanted labels and using only a generic field called Expense?

Thanks a lot for helping!

EDIT:

This is the generated object coming back from the first call (it contains colNames and colModel)

{
   "ColNames":[
      "Name", "Expense February", "Expense March", "Expense April"
   ],
   "ColModel":[
      { "name":"Name", "index":"Name", ... },
      { "name":"Expense1", "index":"Expense", ... },
      { "name":"Expense2", "index":"Expense", ... }, 
      { "name":"Expense3", "index":"Expense", ... }
   ]
}

Also this is the code that create the grid

$.ajax({
    url: 'http://server/GetColumns',
    type: "post",
    dataType: "json",
    data: JSON.stringify({ }),
    contentType: "application/json; charset=utf-8",
    async: false,
    success: function (result) {
        if (result) {
            var colM = result.ColModel;
            var colN = result.ColNames;

            grid.jqGrid('GridUnload');

            grid.jqGrid({
                url: 'http://server/GetData',
                datatype: 'json',
                mtype: 'post',
                colModel: colM,
                colNames: colN,

                [other params here]
            })
        }
    },
    error: function (xhr, ajaxOptions, thrownError) {
       [...]
    },
    complete: function () {
       [...]
    }
});

Do you want to implement searching on the server or you use `loadonce: true` and want to use searching on the client side? — Oleg, Mar 15 '12 at 15:35
Hello Oleg, the search is implemented on the server and I am generating the `colModel` exactly as in the sample link provided. The sequence is: first I am doing an ajax call which return an object that has two arrays (colNames and colModel). On success I am unloading the grid and then recreate it using the data received from the previous call. Please let me know if you need further details... — Lorenzo, Mar 15 '12 at 16:08
I understand that you get `colModel` from the server, but which properties exactly you use. You wrote about the same `index` value, but I don't full understand how exactly the final settings look like. So it would be better to see `colModel` returned from the server. — Oleg, Mar 15 '12 at 16:16

score 1 · Accepted Answer · edited May 23 '17 at 11:48

1

It seems that you can just include search: false in all ExpenseX columns excepted the column Expense1. In the case the searching dialog will contains only one 'Expense' column for searching.

UPDATED: If you use Advanced Searching Dialog you can change the "Expense February" to "Expense" with respect of the afterRedraw callback:

afterRedraw: function () {
    $(this).find("table.group td.columns option[value=Expense1]").text("Expense");
}

In the demo I change the standard "Client" name which come from colNames to the text "!!! My Client Name !!!":

enter image description here

The code of afterRedraw in the demo is longer only because I used the demo from the answer as template. It allows additionally use Enter to start the searching.

edited May 23 '17 at 11:48

Community

1
1

answered Mar 15 '12 at 16:35

Oleg

220,925
34
403
798

Yes you are right and I have already tried to do this. But unfortunately in the search dialog I will have the field `Expense February` wich is still confusing for the user. For this reason I was looking for a different way :) – Lorenzo Mar 15 '12 at 16:42
@Lorenzo: It's not a problem. I'll post a workaround. You just wrote about searching and it was unclear which one you used. In case of Toolbar Searching for example you have no problem with the field name. – Oleg Mar 15 '12 at 17:17

JQGrid Dynamic Column and Search Query

1 Answers1

Linked