Switch to HTML Classes for Select+Btn

Fixes several issues with multiple GridFields on a page with actions
being applied accross all GridFields

code/GridFieldBulkManager.php

@@ -170,7 +170,9 @@ class GridFieldBulkManager implements GridField_HTMLProvider, GridField_ColumnPr
 		Requirements::javascript(BULK_EDIT_TOOLS_PATH . '/javascript/GridFieldBulkManager.js');
 		
 		$dropDownActionList = DropdownField::create('bulkActionName', '')
-			->setSource( array('edit' => 'Edit','unlink' => 'UnLink','delete' => 'Delete') );
+			->setSource( array('edit' => 'Edit','unlink' => 'UnLink','delete' => 'Delete') )
+			->setAttribute('class', 'bulkActionName')
+			->setAttribute('id', '');
 
     $templateData = new ArrayData(array(
     	'Menu' => $dropDownActionList->FieldHolder(),

css/GridFieldBulkManager.css

@@ -8,18 +8,18 @@
 	text-align: center;
 }
 
-#bulkManagerOptions
+.bulkManagerOptions
 {
 	/*float: right;
 	margin: 0 0 0 20px;*/
 }
 
-#bulkManagerOptions th.bulkmanagerselect
+.bulkManagerOptions th.bulkmanagerselect
 {
 	text-align: center;
 }
 
-#bulkActionName
+.bulkManagerOptions .dropdown 
 {
 	display: inline-block;
 	border: none;
@@ -31,16 +31,6 @@
 	color: #000;
 }
 
-#bulkActionName #bulkActionName_chzn
-{
-	width: auto !important;
-}
-
-#bulkActionName .chzn-drop
-{
-	width: 95% !important;
-}
-
 .cms table.ss-gridfield-table tbody td a.tempDisabledEditLink
 {
   background: url('../../framework/admin/images/btn-icon/document--pencil.png') no-repeat 2px 0px;

javascript/GridFieldBulkManager.js

@@ -47,7 +47,7 @@
 			}*/
 		});
 		
-    $('#toggleSelectAll').entwine({
+    $('.toggleSelectAll').entwine({
       onmatch: function(){
 			},
 			onunmatch: function(){				
@@ -58,7 +58,7 @@
       }
     });
     
-		$('select#bulkActionName').entwine({
+		$('select.bulkActionName').entwine({
 			onmatch: function(){
 			},
 			onunmatch: function(){				
@@ -66,8 +66,8 @@
 			onchange: function(e) {
 				var value, btn, icon;
 				value = $(this).val();
-				btn = $('#doBulkActionButton');
-				icon = $('#doBulkActionButton .ui-icon');
+				btn = $(this).parents('.bulkManagerOptions').find('.doBulkActionButton');
+				icon = $(this).parents('.bulkManagerOptions').find('.doBulkActionButton .ui-icon');
 				
 				switch (value) {
 					case 'edit':
@@ -97,14 +97,14 @@
 		});
 		
 		//@TODO prevent button click to call default url request
-		$('#doBulkActionButton').entwine({
+		$('.doBulkActionButton').entwine({
 			onmatch: function(){
 			},
 			onunmatch: function(){				
 			},
 			onmouseover: function(){
 				var action, ids = [];
-				action = $('select#bulkActionName').val();
+				action = $(this).parents('.bulkManagerOptions').find('select.bulkActionName').val();
 				if ( action == 'edit' )
 				{
 					$(this).parents('.ss-gridfield-table').find('td.col-bulkSelect input:checked').each(function(){
@@ -115,7 +115,7 @@
 			},			
 			onclick: function(e) {
 				var action, url, data = {}, ids = [], cacheBuster;
-				action = $('select#bulkActionName').val();
+				action = $(this).parents('.bulkManagerOptions').find('select.bulkActionName').val();
 				
 				if ( action != 'edit' )
 				{				

templates/BulkManagerButtons.ss

@@ -1,14 +1,14 @@
-<tr id="bulkManagerOptions">
+<tr class="bulkManagerOptions">
 	<th class="extra bulkmanagerheading" colspan="$Colspan">
 		
 		$Menu
-		<a id="doBulkActionButton" href="$Button.Link" data-url="$Button.DataURL"  class="action ss-ui-button cms-panel-link" data-icon="pencil">
+		<a href="$Button.Link" data-url="$Button.DataURL"  class="doBulkActionButton action ss-ui-button cms-panel-link" data-icon="pencil">
 			$Button.Label
 		</a>
 		
 
 	</th>
 	<th class="extra bulkmanagerselect">
-		<input id="toggleSelectAll" type="checkbox" title="$Select.Label" name="toggleSelectAll" />
+		<input class="toggleSelectAll" type="checkbox" title="$Select.Label" name="toggleSelectAll" />
 	</th>
 </tr>