jqGrid - add Checkbox in toolbar dropdown

Question

I'm trying to add checkbox in dropdown of jqGrid Toolbar, but I can't able to figure out how to do it. I have a multiselect box which is working fine but I want to replace it with checkbox which will be visible on dropdown.

My code is

{
    name: 'Status',
    index: 'account.status',
    searchoptions: {
        sopt: ['eq'],
        value: ":All;0:Pending;1:Warming;2:Running;3:Dead;4:ID Verification",
        multiple: true
    },
    stype: 'select'
}

jqGrid js version 5.1.1

I have also attached screenshot for better understanding.

This is what I have

This is what I need

Any suggestion will be very helpfull for me.

Thanks in advance.

Answer 1

You can achieve dropdown with checkbox by using ui.multiselect.

Include this 2 files

<link rel="stylesheet" type="text/css" href="path/to/your/ui.multiselect.css" />
<script src="path/to/your/jquery-ui.min.js" type="text/javascript"></script>

Then try this code.

{
name: 'Status',
 index: 'account.status',
 stype: 'select',
 searchoptions: {
  sopt: ['eq'],
  value: ":All;0:Pending;1:Warming;2:Running;3:Dead;4:ID Verification",
  multiple: true,
  dataInit: function(e){
  $(e).multiselect({
  minWidth: 120,
   selectedList: 2,
   noneSelectedText: "Any"
  });
  }
 }
}