jqGrid navGrid button calling ASP.NET MVC view - h

Question

I am using: VS 2010, ASP.NET MVC2, jqGrid 3.8.2.

I want to have the navGrid 'Edit' button open a different view in the controller. I have tried a number of things to no avail. In order to open the selected row, I assume I will need to append the id to the url.

jQuery('#listComponents').jqGrid({
    url: '/Components/Get',
    editurl: '/Components/Edit',
    ...
    }).navGrid('#pagerComponents', {edit:true, ...}, {url: '/Components/Edit'});

Any suggestions are welcome. If I can't get it to work, I will add an 'Edit' button outside the jqGrid and do a normal Html.ActionLink call to open the different view.

Thanks!

Update

Following @Oleg's answer, I now have the following working perfectly:

    jQuery('#listComponents').jqGrid(
    {
        url: '/Components/Get/',
        ...
    }).navGrid('#pagerComponents', { edit: false, ...})
    .navButtonAdd('#pagerComponents', {
        caption: "",
        title: "Edit Component",
        buttonicon: "ui-icon-pencil",
        onClickButton: function () {
            var id = jQuery("#listComponents").getGridParam('selrow');
            if (id) {
                var data = jQuery("#listComponents").getRowData(id);
                window.location = '/Components/Edit/' + data.COMPONENTID;
            }
            else {
                alert("Please select a row to edit.");
            }
        }});

Answer 1

The option {edit:true, ...} of the navGrid follow to the usage of editGridRow method of the form editing, so the dialog will be displayed and not the View of your MVC controller. To have the behavior which you want you should use {edit:false, ...} setting and add custom button which look exactly like the original "Edit" button. To make this you should use buttonicon: "ui-icon-pencil" parameter (see editicon default parameter in the navGrid source code). In this answer you will find code example. You can additionally use $.jgrid.nav.edittitle as the title parameter:

var grid = $("#listComponents");
grid.jqGrid({
    url: '/Components/Get',
    editurl: '/Components/Edit',
    ...
});
grid.navGrid('#pagerComponents', {edit:false, ...}, ...);
grid.jqGrid ('navButtonAdd', '#pagerComponents',
    { caption: "", buttonicon: "ui-icon-pencil", title: $.jgrid.nav.edittitle,
      onClickButton: function() {
          var rowid = grid.jqGrid('getGridParam', 'selrow');
          window.location = '/Components/Edit/' + 'rowid';
      }
    }
);