MVCJqGrid checkbox column disable

Question

I'm using JqGrid with MVCJqGrid Html wrapper in my mvc5 project. MVCJqGrid version I'm using is 1.0.15. I have following code in my cshtml file in order to create grid in page.

@(Html.Grid("Contacts")
        .SetCaption("Contacts")
        .SetUrl(@Url.Action("Contacts", "Home"))
        .SetAutoWidth(true)
        .SetViewRecords(true)
        .AddColumn(new Column("Name").SetAlign(Align.Left).SetEditable(false))
        .AddColumn(new Column("IsPrimaryContact").SetAlign(Align.Center).SetFormatter(Formatters.Checkbox).SetLabel("Is Primary?"))
        .AddColumn(new Column("Email").SetLabel("Email Address").SetFormatter(Formatters.Email))
        .AddColumn(new Column("Handphone").SetAlign(Align.Right).SetFormatter(Formatters.Number))
        .AddColumn(new Column("Office").SetAlign(Align.Right))
        .AddColumn(new Column("Telephone").SetAlign(Align.Right))
        .AddColumn(new Column("Other").SetAlign(Align.Right))
)

In above code, "IsPrimaryContact" is bool value and I display it as checkbox column in grid. When page loads, all the columns are shown as readonly i.e. I cannot edit but Checkbox column remains editable and can check/uncheck the checkbox in column. I want checkbox also to be disabled and user should not be able to change its value. I have already added SetEditable for Checkbox column to false and also tried few other things but checkbox in column always remains enabled. How I can show the checkboxes in column as disabled when page loads?

Answer 1

Instead of using the standard formatters, you could use a custom formatter. You can find an example here http://mvcjqgrid.skaele.it/Home/Formatters

Set the custom formatter for the column:

.AddColumn(new Column("IsPrimaryContact").SetAlign(Align.Center).SetCustomFormatter("displayCheckBox").SetLabel("Is Primary?"))

Formatter function

<script type="text/javascript">
    function displayCheckBox(cellvalue, options, rowobject) {
        return '<input type="checkbox" value="' + cellvalue + '" disabled="disabled">';
    }
</script>

Didn't test the code, but it should work ;)