asp.net mvc jqgrid submit grid using a button outside of the grid

I'm new to jqgrid and MVC. My Jqgrid is in multi select mode, and I want to submit all 开发者_C百科selected items on the grid to the controller by clicking on a button (tbrSave) outside of the grid.

@using (Html.BeginForm("Save", "Home"))

{

<button type="submit" id="tbrSave" class="toolbar">
    <span title="Config" class="icon-32-save"></span>Save</button>

<script src="@Url.Content("~/Scripts/grid.locale-en.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.custom.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var lastSelectedRow;

        $('#jqGridCategoryCreate').jqGrid({
            //url from wich data should be requested
            url: 'CategoriesList',
            //type of data
            datatype: 'json',
            editurl: '@Url.Action("UpdateCategory")',
            //url access method type
            mtype: 'POST',

            //columns names
            colNames: ['CategoryId', 'Category Name', 'Display Order', 'Is Featured Product'], //columns model
            colModel: [

             { name: 'Id', index: 'Id', align: 'left', editable: false },
            { name: 'Name', index: 'Name', align: 'left', editable: false },
             { name: 'DisplayOrder', index: 'DisplayOrder', align: 'left', editable: true, edittype: 'text', editoptions: { maxlength: 10 }, editrules: { required: true} },
              { name: 'IsFeaturedProduct', index: 'IsFeaturedProduct', align: 'left', editable: true, edittype: 'text', edittype: 'checkbox', editoptions: { maxlength: 10, value: '1:Yes;0:No' }, formatter: 'checkbox', editrules: { required: true}}],
            //pager for grid
            pager: $('#jqPagerCategoryCreate'),
            //number of rows per page
            rowNum: 10,
            //initial sorting column
            sortname: 'Id',
            //initial sorting direction
            sortorder: 'asc',
            //we want to display total records count
            viewrecords: true,
            multiselect: true,
            //grid width
            width: 'auto',
            //grid height
            height: 'auto',
            ondblClickRow: function (id) {
                if (id && id != lastSelectedRow) {
                    //save changes in row 
                    jQuery('#jqGridCategoryCreate').saveRow(lastSelectedRow);

                    $.lastSelectedRow = id;
                    //trigger inline edit for row
                    $('#jqGridCategoryCreate').editRow(lastSelectedRow, true);
                }

            }
        });

        $('#jqGridCategoryCreate').jqGrid('navGrid', '#jqPagerCategoryCreate',
                { add: false, del: true, edit: false, search: false },
                { width: 'auto', url: '/Category/Edit' },
                { width: 'auto', url: 'SaveCustomLanguageData' },
                { width: 'auto', url: '/Category/Delete' });

        function getSelectedRows() {

            //make sure all items must be in view mode before submitting.
            jQuery('#jqGridCategoryCreate').saveRow(lastSelectedRow);

            var rows = $("#jqGridCategoryCreate").jqGrid('getGridParam', 'selarrrow');

            var categories = [];
            $.each(rows, function (index, rowId) {
                var gridRow = $("#jqGridCategoryCreate").getRowData(rowId);

                var category = { "Id": rowId,
                    "DisplayOrder": gridRow['DisplayOrder']
                };
                categories.push(category);
            });

        }
    });
</script>

}

How can I attach getSelectedRows to the grid in order to post it to Controller ("Save").

Thanks a mil. Nam Vo.

This would involve following steps

1) Create a anchor link on your razor view

<a id="somelink" href="">Select Multiple Accounts</a>

2) Create a click event handler for anchor link created above

$('#somelink').click(function () {

var multiplerowdata = jQuery("#grid").getGridParam('selarrrow');  

$.ajax({ type: 'POST',
    url: '@Url.Action("YourController", "YourActionMethod")',
    data: JSON.stringify(multiplerowdata),
    traditional: true, 
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function () { alert("row submited"); }
});}) 

3) At times you may get javascript error of JSON is not defined, this can be solved by inserting meta tags in shared\_layout.cshtml page as shown below

<meta http-equiv="X-UA-Compatible" content="IE=8" />

4) YourActionMethod inside YourController should like be somewhat like this

 [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult YourActionMethod(List<string> datarow)
    {
        //return "sucessfully validated";
        return null;
    }