Formatters Example

Source:

@(Html.Grid("formatters")
    .SetCaption("Formatters")
    .AddColumn(new Column("CustomerId")
        .SetLabel("Id")
        .SetCustomFormatter("buttonize"))
    .AddColumn(new Column("Name"))
    .AddColumn(new Column("Company"))
    .AddColumn(new Column("EmailAddress")
        .SetFormatter(Formatters.Email))
    .AddColumn(new Column("Last Modified"))
    .AddColumn(new Column("Telephone"))
    .SetUrl("/Home/GridDataBasic")
    .SetAutoWidth(true)
    .SetRowNum(10)
    .SetRowList(new[] { 10, 15, 20, 50 })
    .SetViewRecords(true)
    .SetPager("pager"))

<script type="text/javascript">
    function buttonize(cellvalue, options, rowobject) {
        return '<input type="button" value="' + cellvalue + '" onclick="alert(' + cellvalue + ')">';
    }
</script>

Explanation:

Formatters can attached to each individual column to easily format the content of the column. JqGrid 
supports a number of predefined formatters, also custom formatters can be set.

SetFormatter: Sets predefined formatter for individual column. Available formatters: Integer, Number,
Currency, Date, Email, Link, Showlink, Checkbox, Select

SetCustomFormatter: Use this method to attach a custom formatter to a column. The method expects the 
name of the function which will handle the custom formatting. The following variables are passed to 
the function:
    'cellvalue': The value to be formated (pure text).
    'options': Object { rowId: rid, colModel: cm} where rowId - is the id of the row and colModel is 
               the object of the properties for this column retrieved from colModel array of jqGrid
    'rowobject': Row data represented in the format determined from datatype option.