Formatting cell values

Jun 19, 2011 at 12:00 AM


I spent a few days trying to figure out how to format cell values in the grid (I am new to both this library and jqGrid - so if it's documented somewhere, I'd greatly appreciate the link). I have several rather common scenarios.

First use case:

First column shows product id 123, and clicking on it should take the user to product details. In other words, I would like to generate

<a href="/Products/Details/123">123</a>

I don't think it is possible through MVC.Controls out of the box. I created a LinkColumnRenderer with the following return from Render():

return "edittype: 'select', formatter: 'showlink', formatoptions: {baseLinkUrl: '" + Url + "'} "

Now I can specify this in the view:

.SetColumnRenderer(new LinkColumnRenderer { Url = "/Products/Details" })

jqGrid doesn't generate MVC URL, but /Products/Details?id=123 (there is a way to specify ProductID instead of id as well) - I guess it is as good as it gets.

Second use case:

I have a column that has a supplier name, and I want the user to be able to click on the link and get to the details page for this supplier. That is, I would like to generate:

<a href="/Suppliers/Details/456">Contoso</a>

I couldn't figure out how to do that without extending jqGrid formatter. I created $.fn.fmatter.showmvclink = function (cellval, opts) { ... } to generate such MVC link; I created a new MvcLinkColumnRenderer to specify 'showmvclink' instead of 'showlink' (I probably could combine the two and have some logic to select appropriate one); and I my controller creates a view model that includes a Supplier view model with SupplierID, and name.

Overall, it looks like very complex way to handle what seems to be a common situation, and should be handled by the library instead...

I have another use case - but if I get some pointers for these two - it will go along way to solve the third one :)


Jun 19, 2011 at 12:46 AM
Edited Jun 19, 2011 at 12:53 AM


The current version does offer poor support for the formatters infrastracture of the  jqGrid, and this will be greatly improved in the next release.

So until then, you could achieve your scenario with the use of the built-in grid events, e.g:

@Html.Grid(new GridControl()

<script language="javascript" type="text/javascript">
 function onGridRowSelected(row) {
            window.navigate('/Person/Details/' + row.PersonId);

Hope this could help you
Jun 19, 2011 at 1:06 AM

Thanks, sternr, for such a quick response! Looking forward to the update.

The big problem with onGridRowSelected (and it seems to be jqGrid problem; not MVC Controls) is that it is utterly counter-intuitive. The most common response that user expects from click on a grid row - is highlighting the row. Maybe a popup dialog. But unless there is some visual indicator (as an underline for the link) certainly not navigate away from the screen.

As a practical matter, I have several columns that should navigate to different places. I can't figure out from onGridRowSelected or in any other way - how can determine which cell the user clicked! Even $("td").click(function() { ... }) doesn't get invoked.

Nov 10, 2011 at 10:40 AM

also got this issue, only just started with jqGrid, but seems weird you can't do this with simple string manipulation....