JQGrid - How can I Create Check box in Navigation to Trigger Multiselect or SingleSelect

Question

function bind_single_select() {
  if (!$("input#single").length > 0) {
    $("span.single_select").prepend("<input type='checkbox' name='single' id='single' checked='checked' style='vertical-align:middle' />");
  }
  $("table#gridTable").find("tr").click(function () {
    if ($("input#single").attr("checked")) {
      $(".trSelected").removeClass("trSelected");
      $(this).addClass("trSelected");
    }
  });
}

I found this in Flexigrid but in JQGrid How can I do it.

Another Question :

.navButtonAdd('#pager',
              { caption: "Add",
                buttonimg: "/Areas/Pages/Content/Images/add.png",
                onClickButton: function () {
                    PopupCenter('<%= Url.Action("CreatePublisher","Publisher") %>',
                                'CreatePublisher', '500', '300');
                }, position: "last"
              })

the buttonimg is not work even I use ui-icon-plus

Thanks in Advance.

Answer 1

The second part of your question is very easy to answer. The parameter buttonimg is no more supported in the navButtonAdd function. You should use buttonicon instead. An example you can find here. In general as a value of buttonicon you can use any from the jQuery UI Framework Icons.

To toggle multipleSearch parameter you can just define search parameters of navGrid separately and toggle the value of the multipleSearch property. To make all more easy I suggest to use an additional parameter recreateFilter:true.

var grid = jQuery('#list');
var pSearch = { multipleSearch:false, recreateFilter:true };
grid.jqGrid({
    // all jqGrid parameters
}).jqGrid ('navGrid', '#pager', {edit:false, add:false, del:false, refresh:true, view:false},
           {},{},{},pSearch));

$("#pager_left table.navtable tbody tr").append ( // here 'pager' part or #pager_left is the id of the pager
    '<td><div><input type="checkbox" class="myMultiSearch" id="navMultiSearch"/>Multi-Search</div></td>');
$(".myMultiSearch").change(function() {
    if ($(this).is(':checked')) {
        pSearch.multipleSearch = true;
        $(".myMultiSearch").attr("checked","checked");
    }
    else {
        pSearch.multipleSearch = false;
        $(".myMultiSearch").removeAttr("checked");
    }
});

On the small demo I inserted both internal and external checkboxes to the navigation bar and a custom button additionally:

Answer 2

Thanks you very much.But I try to the same like you to Create MultiSelect chekck box but it not work. //Add Checkbox MultiSelect $("#pager_left table.navtable tbody tr").append( // here 'pager' part or #pager_left is the id of the pager 'Multi-Select'); $(".myMultiSelect").change(function () { if ($(this).is(':checked')) { grid.setGridParam({ multiselect: true, recreateFilter: true }); grid.trigger("reloadGrid"); } else { grid.setGridParam({ multiselect: false, recreateFilter: true }); grid.trigger("reloadGrid"); } });