CustomFormatter for JQgrid updates title attribute of td instead of adding html

Question

I'm having some trouble creating a custom formatter for one of my cells. I'm trying to add in a progress bar for a specific cell, but it seems that the html code/ javascript code is being thrown in the title rather than the actual body of the td.

Here's the code for the custom formatter.

{ name: 'StudyCacheStatus', index: 'StudyCacheStatus', width: 15, align: 'center', formatter: CacheStatusFormatter}],

function CacheStatusFormatter(cellValue, options, rowObject) {
    if (typeof cellValue === 'string') { return cellValue; }
    var cellValueHtml = cellValue.text;
    //obviously we are adding a button
    if (cellValue.buttonText) {
        var buttonHtml = ' <input type="button" value="' + cellValue.buttonText + '" onclick="' + cellValue.buttonCallBack + '"/>';
        cellValueHtml += buttonHtml;
    }
    else if (cellValue.progressBarValue)
    {
        var progressBarHtml = '<div id="progress-bar-' + cellValue.Uid + '>' + cellValue.progressBarValue +'</div>';
        + '<script> $( "#progress-bar-' + cellValue.Uid + '").progressbar({value:' + cellValue.progressBarValue + '});</script>';
        cellValueHtml += progressBarHtml;
    }
    return cellValueHtml;
}

The odd part is that the input button html is added properly to the cell, even though they're being populated the same way.

<td role="gridcell" style="text-align:center;" title=" " aria-describedby="list_StudyCacheStatus"> 
     <input type="button" value="Cache on Server" onclick="CacheStudy('12345');">
</td>

However the progress bar html ends up like this.

<td role="gridcell" style="text-align:center;" title="<div id='progress-bar-12345>5" aria-describedby="list_StudyCacheStatus"></td>

I thought it might be due to trying to force a javascript function to run in the customformatter, so I commented out the script tag, but I had the same result. What exactly am i doing wrong here? Thanks for the help!

Hi, I'm just trying to implement a progress bar to show the current cache update status. Progress bar is from jquery-ui 1.11. The progress bar is shown after the input button is pressed, and the button should go away afterwards. I just have it there since it was odd that it worked, but the div did not. Jqgrid version is version 4.6.0. — Bird, Aug 14 '15 at 16:10

score 0 · Accepted Answer · edited May 23 '17 at 11:58

0

The goal of the custom formatter is providing custom HTML fragment as string. The value returned from the custom formatter will be used as content of <td> element.

I would recommend you to reduce the code of your custom formatter to return <input type="button" value="' + $.jgrid.htmlEncode(cellValue.buttonText) + '"/>'; or return <button type="button">' + $.jgrid.htmlEncode(cellValue.buttonText) + '</button>';. To implement onclick logic I would recommend you to use beforeSelectRow callback. See the answer and this one for more details. If you want to show the progress bar in the cell if the user click the button in the cell then you can hide the button in the cell inside of beforeSelectRow callback, create and place the <div> dynamically inside of the clicked cell and to call .progressbar(...). You can consider don't place the progress inside of the cell at all and to use position:absolute for the div and to place the progressbar over the whole grid. There are many implementation alternatives. You can decide yourself which one more corresponds your requirements. I want just stress that one should not place <script> inside of <td> and one don't need to use and onclick attribute too.

edited May 23 '17 at 11:58

Community

1
1

answered Aug 14 '15 at 16:27

Oleg

220,925
34
403
798

That makes sense, but I still don't understand why the current function updates the title attribute instead of inserting it in the body. It's possible to do it differently, but I'd like to know why it's behaving like that. – Bird Aug 14 '15 at 17:07
@Bird: I can answer on your question only if you provides the demo with exact input data which generate the problem. You use old jqGrid 4.6. So you should not expect any bug fix. You can try to replace your URLs with jqGrid to the URLs of the latest free jqGrid (see [the wiki](https://github.com/free-jqgrid/jqGrid/wiki/Access-free-jqGrid-from-different-CDNs#access-githib-code-from-rawgit)). I could debug the code and make the bug fix if I would be able to reproduce the problem. In general jqGrid construct `` contain as the string. It can be that some quote produce the problem or `>` symbol – Oleg Aug 14 '15 at 17:22
Looks like it was just some invalid quotations. Thanks for the assistance! – Bird Aug 14 '15 at 17:45

CustomFormatter for JQgrid updates title attribute of td instead of adding html

1 Answers1