How to display a "Select" element in JQGrid, when not in Edit mode?

Question

I'm aware of the editype="select" option, however, in order to see the Select, the user has to initiate an editing.

Instead, I just want the drop-down list to be displayed in the cell by default without the user having to start Editing.

What I've tried: The html is returned from the the PHP function called by jQGrid AJAX:

<cell><select><option>Test</option></select></cell>

And I set the formatter of the column to "select"

How do I accomplish this?

@V0R73X what does the grid display if it's not showing the `select` box? — FastTrack, Nov 22 '13 at 13:10
It's unclear what you mean under "The html is returned from the the PHP function called by JQGrid ajax". Do you use currently `editoptions.dataUrl`? It will be used **only during editing**. If you need to load the list of options for some columns you have to extend the main response which fill the grid with the list of options. I mean usage of `beforeProcess` like [here](http://stackoverflow.com/a/17410568/315935) or [here](http://stackoverflow.com/a/16288582/315935) — Oleg, Nov 29 '13 at 08:04
You should provide more details what you do. For example the definition of the column in `cloModel` where you want to place ` — Oleg, Nov 30 '13 at 09:25
I classicly populate it using $('#tablename').jqgrid({url:"asdasd"}); — dsynkd, Nov 30 '13 at 10:02
@V0R73X: Sorry, but *classically* one returns **pure JSON or pure XML data** in the response on `url` and **not HTML fragments** inside of the data for cells. I think that other people don't understand what you do and in which context one should consider your question. It would be helpful if you append the text of your question with more details. — Oleg, Dec 01 '13 at 13:29

Murali Murugesan · Answer 1 · 2013-11-22T12:24:25.927

3

Yes you can do it with custom fortmatter in a column model

{
name: 'MyCol', index: 'MyCol', formatter: customSelectboxRenderer
}

then

function customSelectboxRenderer(cellValue, opts, rowObject){
   return "<select>...</select>";//options can be prepared from some local array
}

edited Nov 22 '13 at 12:24

answered Nov 22 '13 at 10:57

Murali Murugesan

22,423
17
73
120

What if the html is already written into the JQGrid and I just want it to display it as a Select? – dsynkd Nov 22 '13 at 11:05
@V0R73X, you cant simply change the html to select box. jQgrid provides the full control of rendering the cell. Please use it instead of showing the text and then converting to selct :) – Murali Murugesan Nov 22 '13 at 11:12
But my data is already pulled during the initial ajax request and using the custom formatter would mean another ajax request for the Select box, and that't not efficient. – dsynkd Nov 22 '13 at 11:15
@V0R73X, keep those options data in local array when initial request made and use it – Murali Murugesan Nov 22 '13 at 11:16
I doubt that would work, depends on WHEN the custom formatter will be called: After or Before gridComplete – dsynkd Nov 22 '13 at 11:30
Yup, just tested and it doesn't work since the formatter is called before the grid is done loading data. – dsynkd Nov 22 '13 at 11:31
@VOR73X..you can use the option formatter:select that Jqgrid supports by default. – Sai Avinash Nov 22 '13 at 12:06
@V0R73X, your edit `formatter: customSelectboxRenderer()` is wrong. its a handler to a function. so we need to remove `()` :) – Murali Murugesan Nov 22 '13 at 12:25
@Murali You still haven't provided me a solution in which there's no need to make a separate ajax request from the one JQGrid calls initially. – dsynkd Nov 23 '13 at 10:41

score 1 · Answer 2 · answered Nov 28 '13 at 08:33

1

Assuming that you meant

<cell><select><option>Test</option></select></cell>

is the response returned for the cell in question.

I think you just have to strip out the cell tag and return that from your own custom formatter something like

function customFormatter(cellValue, opts, rowObject){
   // Assuming that cellValue is <cell><select><option>Test</option></select></cell>

  return cellValue.replace(blah);
}

Or if you can change the value returned from the server for the cell, then I would try seeing if that works without a formatter, if it doesnt you would want to a create custom formatter that returns the cellvalue.

function customFormatter(cellValue, opts, rowObject){
  // Assuming that cellValue is <select><option>Test</option></select>
  return cellValue;
}

If my assumption is incorrect, please clarify.

answered Nov 28 '13 at 08:33

Sumit

1,661
1
13
18

It doesn't work since the formatter function is called before the ajax call for populating the data is done. I tested it to verify. – dsynkd Nov 28 '13 at 23:36
The formatter function is called for every row in your data. I have used this technique before. I think what is happening is that you are not using local/json as your data source, instead the table is already marked up and you are adding the jqgrid to it, is that right? – Sumit Nov 29 '13 at 12:25
Cell value is the data with all the html tags stripped out. E.g for the example above, it's just Test. – dsynkd Dec 21 '13 at 02:10

score 0 · Accepted Answer · answered Dec 21 '13 at 02:23

I did the sneakiest thing I have ever done in my life:
I changed the '<' characters to < and changed the '>' characters to > on the server side data.
This way, the data wouldn't be stripped of tags when received by jqgrid.
Then I made a custom formatter in which it replaced the html code with the actual characters, causing the data to be displayed correctly.

formatter: function(cellvalue, options, rowObject){ return cellvalue.replace("&lt;","<").replace("&gt;",">"); }

Boom! Done deal.

How to display a "Select" element in JQGrid, when not in Edit mode?

3 Answers3