How to toggle multiselect feature and bulk edit button via toolbar button?

QuestionsHow to toggle multiselect feature and bulk edit button via toolbar button?
Richard Samson asked 7 years ago

Hi,
 
Is there a way to add a button via jQuery(“#list1”).jqGrid(‘navButtonAdd’… that will perform the following routines:
 

  1. Toggle/Enable multiselect mode to show multiselect tick boxes etc.
  2. Then once enabled, enable the bulkedit feature (so the bulk edit icon appears on the toolbar).
  3. Toggle/Disable multiselect mode to return to normal single record selection.
  4. Then once disabled, deselect any currently selected records and disable the bulkedit feature (so the bulk edit icon appears hidden).

 
Many Thanks,
Richard

2 Answers
Richard Samson answered 7 years ago

Just thought I’d feed back that I’ve found a way of doing this, not the most elegant but works well enough for our needs.  Unless someone can suggest a simpler way, here’s how we enabled this.
Basically, we set a cookie which is read during page load, and when the toolbar button is toggled the cookie state changes and the page reloads.  If the cookie exists we enable multi-select and bulk-edit features, if the cookie doesn’t exist we disable them.  The cookie life span is only 60 seconds, plenty of time for the page to refresh, and the next time someone visits the page it will default back to multi-select disabled.
So, in php within the code where we create the phpgrid:

$cookieName = “mypage_multiselect”; // Php cookie names only allow letters, numbers, and underscores.
if(isset($_COOKIE[$cookieName])){ // If cookie exists then button has been pressed to enable bulk edit.
  $multiselect = true;
  $bulkedit = true;
} else { // If cookie doesn’t exist or has been deleted then load normal mode.
  $multiselect = false;
  $bulkedit = false;
}

$options[“multiselect”] = $multiselect;
$list1 -> set_options($options);

$actions[“bulkedit”] = $bulkedit; // Show bulk editing button.
$list1 -> set_actions($actions);

 
Within the pages header tags add:

// Function to retrieve cookie values by name
<script>
  function getCookie(cname) {
    var name = cname + “=”;
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(‘;’);
    for(var i = 0; i <ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == ‘ ‘) {
        c = c.substring(1);
      }
      if (c.indexOf(name) == 0) {
        return c.substring(name.length, c.length);
      }
    }
    return “”;
  }
</script>

Within the html body tag, after the grid has been loaded.

<script type=”text/javascript”>
  jQuery(document).ready(function(){
    // Insert toolbar button to toggle multiline and bulkedit.
    var multiselect = “<?php echo $multiselect ?>”;
    jQuery(“#list1″).jqGrid(‘navButtonAdd’,”#list1_pager”,{caption:””,title:”Toggle Multiselect”, buttonicon :’ui-icon-check-on’,
      ‘onClickButton’:function(){
        if((getCookie(“<?php echo $cookieName ?>”) == “”) && (multiselect == “”)){
          // If cookie doesn’t exists create it and reload page. Note: Passing mutliselect as false results in empty string. 
          var d = new Date();
          d.setTime(d.getTime() + (60*1000)); // Set cookie to expire after 60 seconds – causes page to default to normal mode.
          var expires = “expires=”+ d.toUTCString();
          document.cookie = “<?php echo $cookieName ?>=true;” + expires + “; path=/”;
          location.reload();
        } else { // Cookie already exists so delete it and reload.
          document.cookie = “<?php echo $cookieName ?>=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;”;
          location.reload();
        }
      }
    });
  });
</script>

Within the block of php code I suggest changing the $cookieName value to something unique to your page, that way it won’t affect other pages if this code is reused elsewhere.

Abu Ghufran Staff answered 6 years ago

Hi,
In case you need JS solution, Following code will enable toggle multiselect via javascript code.

<input type="button" value="Multiselect" onclick="toggle_multiselect()">
<script>
function toggle_multiselect()
{
if ($('#list1 .cbox:visible').length > 0)
{
$("#list1").jqGrid('setGridParam',{multiboxonly : true});
$('#list1').jqGrid('hideCol', 'cb');
}
else
{
$("#list1").jqGrid('setGridParam',{multiboxonly : false});
$('#list1').jqGrid('showCol', 'cb');
}
}
</script>

where `list1` is grid id.
To hide / show bulkedit button, you can find its selector and hide/show it using jquery inside this function.

Ref: https://github.com/tonytomov/jqGrid/issues/768

_________________________
Abu Ghufran - Dev Team
Grid 4 PHP Framework
 
Your Answer

19 + 1 =

Login with your Social Id:

OR, enter

Attach code here and paste link in question.
Attach screenshot here and paste link in question.



How useful was this discussion?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate it.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?