jqGrid - Insert custom HTML into cell

Question

I am trying to convert a plain old html table to a jqGrid. The old table has a column containing tags which are constructed using an unordered list and list items.

Here is an example (jsfiddle) of the table before and the jqGrid after.

In this example I am using a custom formatter which uses jQuery Templates to construct DOM elements and then the formatter returns the $.html() from the resulting DOM elements.

function getTagCellContents(cellvalue) {
    var domitems=$("#jqgrid-tag-list-item").tmpl({tags: callvalue});
    return domitems.html();
}

The problem I had with this is that whitespace included in the resulting html causes the rows to be too high. This also results in awkward "Title" attributes on the cells.

Does the jqGrid provide an API for inserting DOM objects directly into the cell rather than by returning text from the custom formatter? What is the best practice for placing customized html into a jqGrid cell?

score 8 · Accepted Answer · edited May 23 '17 at 12:24

8

I find your question very interesting and so +1 from me for the question.

The main understanding problem with usage of custom formatter is: it required that your callback function return HTML fragment as string. The benefit of it is good performance, which one can see mostly on the large grid. If you works with DOM elements and uses constructs like domitems.html() you will have not so good performance.

So first of all I would recommend you to use $.template function of jQuery Templates. It allows you to work with strings without usage of DOM. The answer for example describes the main idea of the modification of your code.

To fix your main problem I suggest just to remove \n and withespaces from the string. I am not RegEx professional so I suggest the following quick and dirty solution:

// Create and cache a named template function
$("#jqgrid-tag-list-item").template("cellContents");
var tmpl = $.template("cellContents"); // template function

function getTagCellContents(a) {
    var strings = tmpl($, {data: {tags: a}}); // array of strings
    return strings.join('')
               .replace(/\n+/g,'')
               .replace(/\s+/g,' ')
               .replace(/> </g,'><');
}

Your jsfiddle demo will be the following after such modification.

edited May 23 '17 at 12:24

Community

1
1

answered Sep 11 '13 at 09:44

Oleg

220,925
34
403
798

Oleg, is it possible to add a new method to jqGrid API that actually append a DOM or jQuery object to a cell? I understand that using HTML is faster but sometimes there's no equivalent HTML for a DOM. For example, I want to insert a button with a custom eventListener. I can't do `` because my `doSomething()` is a private function and not accessible by HTML. Thanks! – Lei Zhao Nov 22 '13 at 21:59
@LeiZhao: The memory used by web browser will be increased on setting of every *separate* `onclick` event handle. `click` supports event bubbling: if no event handle exist on ` – Oleg Nov 23 '13 at 09:06
Oleg, thanks for your suggestions. However, in many case, I still need to actually insert/access/manipulate the DOM. The click event was just an example. Sometime it's more than that. For example I need to insert a native ` – Lei Zhao Nov 25 '13 at 17:15
but it's not very readable and if the order of columns change I'll need to find and update all these numbers. – Lei Zhao Nov 25 '13 at 17:16
@LeiZhao: You can manipulate DOM inside of `loadComplete` for example, but you should understand that if you change *one* element on the page the position and some properties of *all* elements on the page could need be recalculated. It's so named [reflow](https://developers.google.com/speed/articles/reflow). So if you modify *x* elements on the page which contains *y* elements the complexity of the operation is *x*y* instead of just *x*. You can ask new question where you detailed describe your problem and I could try to help you. – Oleg Nov 25 '13 at 18:21
After long time working again on jqGrid with similar requirement, as in past @Oleg your answer saved my lots time in searching. – Shaggy Oct 25 '17 at 08:43
@Shaggy: Thank you for your comment! I like that my old posts are still helpful. – Oleg Oct 25 '17 at 09:09

jqGrid - Insert custom HTML into cell

1 Answers1