Lorenzo
Lorenzo

Reputation: 29427

JQGrid Dynamic Column and Search Query

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 () {
       [...]
    }
});

Upvotes: 2

Views: 2116

Answers (1)

Oleg
Oleg

Reputation: 221997

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.

Upvotes: 1

Related Questions