jqGrid - edit function never getting called

Posted by dcp on Stack Overflow See other posts from Stack Overflow or by dcp
Published on 2010-05-13T21:10:45Z Indexed on 2010/05/13 21:14 UTC
Read the original article Hit count: 495

Filed under:
|
|

I'm having a problem with JQGrid using ASP.NET MVC. I'm trying to follow this example (after you go to that link, over on the left side of the page please click Live Data Manipulation, then Edit Row), but my edit function is never getting called (i.e. it's never getting into the $("#bedata").click(function(). Does anyone know what could be the problem?

    <script type="text/javascript">
        var lastsel2;

        jQuery(document).ready(function() {
            jQuery("#editgrid").jqGrid({
                url: '/Home/GetMovieData/',
                datatype: 'json',
                mtype: 'GET',
                colNames: ['id', 'Movie Name', 'Directed By', 'Release Date', 'IMDB Rating', 'Plot', 'ImageURL'],
                colModel: [
                  { name: 'id', index: 'Id', width: 55, sortable: false, hidden: true, editable: false, editoptions: { readonly: true, size: 10} },
                  { name: 'Movie Name', index: 'Name', width: 250, editable: true, editoptions: { size: 10} },
                  { name: 'Directed By', index: 'Director', width: 250, align: 'right', editable: true, editoptions: { size: 10} },
                  { name: 'Release Date', index: 'ReleaseDate', width: 100, align: 'right', editable: true, editoptions: { size: 10} },
                  { name: 'IMDB Rating', index: 'IMDBUserRating', width: 100, align: 'right', editable: true, editoptions: { size: 10} },
                  { name: 'Plot', index: 'Plot', width: 150, hidden: false, editable: true, editoptions: { size: 30} },
                  { name: 'ImageURL', index: 'ImageURL', width: 55, hidden: true, editable: false, editoptions: { readonly: true, size: 10} }
                ],
                pager: jQuery('#pager'),
                rowNum: 5,
                rowList: [5, 10, 20],
                sortname: 'id',
                sortorder: "desc",
                height: '100%',
                width: '100%',
                viewrecords: true,
                imgpath: '/Content/jqGridCss/redmond/images',
                caption: 'Movies from 2008',
                editurl: '/Home/EditMovieData/',
                caption: 'Movie List'
            });
        });

        $("#bedata").click(function() {
            var gr = jQuery("#editgrid").jqGrid('getGridParam', 'selrow');
            if (gr != null)
                jQuery("#editgrid").jqGrid('editGridRow', gr, { height: 280, reloadAfterSubmit: false });
            else
                alert("Hey dork, please select a row");
        });            
    </script>

The relevant HTML is here:

<table id="editgrid">
</table>
<div id="pager" style="text-align: center;">
</div>
<input type="button" id="bedata" value="Edit Selected" />

© Stack Overflow or respective owner

Related posts about jqyery

Related posts about jqgrid