Zac Gross

Code & More

jqGrid Inline Editing With asp.net MVC

| Comments

I am a frequent user of the popular jQuery plugin jqGrid. It comes with a large feature set for viewing and manipulating tabluar data in the browser. When I am working on an asp.net mvc projects I work with it via Robin van der Knaap’s lightweight html helper library: https://github.com/robinvanderknaap/MvcJqGrid . It has strongly typed html helpers and a handy model binder for handling async grid functions.

Recently I required jqGrid’s inline editing feature which is not supported in the MvcJqGrid library so via the power of github I went ahead and added it https://github.com/zacg/MvcJqGrid.

The syntax follows the exisitng MvcJqGrid builder pattern and is very straightforward: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

@(Html.Grid("editing")
    .SetCaption("Inline Editing")
    .AddColumn(new Column("CustomerId")
        .SetLabel("Id")
        .SetCustomFormatter("buttonize"))
    .AddColumn(new Column("Name")
        .SetFormatter(Formatters.Email)
        .SetEditable(true)
        .SetEditType(EditType.Text))
    .AddColumn(new Column("Company")
                .SetEditable(true)
                .SetEditType(MvcJqGrid.Enums.EditType.Select)
                .SetEditOptions(new EditOptions() { Value = "0:Twitter; 1:Google; 2:Microsoft; 3:Cisco" }))
    .AddColumn(new Column("EmailAddress")
        .SetFormatter(Formatters.Email)
        .SetEditable(true)
        .SetEditType(EditType.Text)
        .SetEditRules(new EditRules() { Email = true }))
    .AddColumn(new Column("Last Modified"))
    .AddColumn(new Column("Telephone"))
    .SetUrl(Url.Action("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="Edit" onclick="edit(' + options.rowId + ')">';
    }
    function edit(id) {
        $("#editing").jqGrid("editRow", id, true);
    }
</script>

I have submitted a pull request for my additions so it will become part of the core library shortly, if you can’t wait that long just clone my fork here: https://github.com/zacg/MvcJqGrid

Comments