How to render multiselect picklists as checkboxes on a visualforce page - salesforce

I want to Implement multi-select drop down in salesforce through Visual force page. I want to display my drop down like this Please find below scrren shot :


I have used jquery to add the list in this:
<apex:page standardStylesheets="false" doctype="html-5.0">
<head lang="en">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<apex:form >
<select id="countries" multiple="multiple">
<option value="India">India</option>
<option value="USA">USA</option>
<option value="Japan">Japan</option>
<option value="UK">UK</option>
</select>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#countries').multiselect({
includeSelectAllOption: true
});
});
</script>
</apex:form>
</body>
</apex:page>
Reference: http://www.jqueryfaqs.com/Articles/Multiple-Select-MultiSelect-DropDownList-with-CheckBoxes-using-jQuery.aspx

Related

md-input-container issue on k-rebind

I'm facing troubles when using md-input-container directive with the k-rebind event of Kendo UI. The issue ocurrs when I tried to rebind the min value for the end date (Second datepicker).
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.mobile.all.min.css"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.8.1/angular-translate.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="appController">
<input id="datepicker" kendo-date-picker k-ng-model="date" />
<md-input-container>
<label>End Date</label>
<input id="datepicker" kendo-date-picker k-min="date" k-rebind="date" />
</md-input-container>
</div>
<script>
angular
.module('app', ['kendo.directives', 'ngMaterial'])
.controller('appController', function (){});
</script>
</body>
</html>
I think the issue ocurrs because when Kendo performs the rebinding, it clones the input node; but I am not sure of that.
Have you ever faced this issue? Or How do you get working both (md-input-container and k-rebind) together?

keyup is not working in bootstrap-select leave search using jQuery

This is my code, and I want to catch changing in search input field, but jQuery "keyup" is not working. And I'm using Angular to manipulate my data. I tried to add default text input to my page, and everything worked fine.enter code here
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap-select live search</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
//angular stuff
var app = angular.module('app', []);
app.service('service', function(){
this.getCities = function (){
return ["Аксаковщина д. Минская обл., Минский р-н, Горанский с/с",
"Андреевщина д. Витебская обл., Оршанский р-н, Андреевщинский с/с",
"Антоновка д. Гомельская обл., Калинковичский р-н, Горбовичский с/с",
"Антоново д. Брестская обл., Барановичский р-н, Колпеницкий с/с"];
};
});
app.controller('ctrl', function ($scope, service){
$scope.cities = service.getCities();
});
//jquery stuff
$(document).ready(function (){
$('input').on('keyup', function() {
alert('keyup is fired!!!');
});
});
</script>
</head>
<body ng-app="app" ng-controller="ctrl">
<div id="destinationFrom">
<select id="selectDestinationFrom" class="selectpicker" data-live-search-style="startsWith" data-live-search="true">
<option ng-repeat="city in cities track by $index">{{city}}</option>
</select>
</div>
<input type="text"/>
</body>
</html>

Please use these css and js.You are using older version of css and js.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>

Bootstrap-Multiselect: how to get both features of optionClass and includeSelectAllOption

I was following the Bootstrap Multiselect documentation to implement bootstrap multiselect. However I want to get both the effects of optionClass and includeSelectAllOption so that I get select all and alternate coloring. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#example-optionClass').multiselect({
optionClass: function(element) {
var value = $(element).val();
if (value%2 == 0) {
return 'even';
}
else {
return 'odd';
}
}
});
});
</script>
<style type="text/css">
#example-optionClass-container .multiselect-container li.odd {
background: #eeeeee;
}
</style>
</head>
<body>
<div class="container">
<h2>Bootstrap Multiselect Test</h2>
<p>I want to use both <b>optionClass</b> and <b>includeSelectAllOption</b> togather:</p>
<div id="example-optionClass-container">
<select id="example-optionClass" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</div>
</body>
</html>
Please Help me to get both of their effects.

You can simply add the includeSelectAllOption, this looks as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#example-optionClass').multiselect({
includeSelectAllOption: true, // add select all option as usual
optionClass: function(element) {
var value = $(element).val();
if (value%2 == 0) {
return 'even';
}
else {
return 'odd';
}
}
});
});
</script>
<style type="text/css">
#example-optionClass-container .multiselect-container li.odd {
background: #eeeeee;
}
</style>
</head>
<body>
<div class="container">
<h2>Bootstrap Multiselect Test</h2>
<p>I want to use both <b>optionClass</b> and <b>includeSelectAllOption</b> togather:</p>
<div id="example-optionClass-container">
<select id="example-optionClass" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</div>
</body>
</html>
If you want to take into account the select all option in your coloring, i.e. treat the select all option as odd (as the first option), you can reverse the coloring and manipulate the multiselect-all class:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#example-optionClass').multiselect({
includeSelectAllOption: true, // add select all option as usual
optionClass: function(element) {
var value = $(element).val();
if (value%2 == 0) {
return 'odd'; // reversed
}
else {
return 'even'; // reversed
}
}
});
});
</script>
<style type="text/css">
#example-optionClass-container .multiselect-container li.odd {
background: #eeeeee;
}
#example-optionClass-container .multiselect-all {
background: #eeeeee;
}
</style>
</head>
<body>
<div class="container">
<h2>Bootstrap Multiselect Test</h2>
<p>I want to use both <b>optionClass</b> and <b>includeSelectAllOption</b> togather:</p>
<div id="example-optionClass-container">
<select id="example-optionClass" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</div>
</body>
</html>

unable to get the index of the selected item in AngularJs

I have a drop down with values which I am using a drop box to display the items. I want to handle the click event and print the index of the element in the array. The view code is as below:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link data-require="font-awesome#4.5.0" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
<script data-require="jquery#*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="bootstrap#*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myController">
<select ng-options="item for item in items" ng-model="item" ng-change="handleClick($index)">
</select>
</html>
On the controller I have the function but I am not getting the index on selecting.
// Code goes here
angular.module("myApp", []).
controller("myController", function($scope){
$scope.handleClick = function(index){
console.log("came inside the handleClick function with the currext index "+index);
}
$scope.items=["pradeep","praveen", "sagar","vinod"];
})
Please let me know where I am going wrong. link to Plunkr - Link to Plnkr

$index isn't defined when using ngOptions - your best bet is to use indexOf and find the index:
<select ng-options="item for item in items" ng-model="selectedItem" ng-change="handleClick(selectedItem)">
And the JS:
$scope.handleClick = function(selectedItem) {
var index = $scope.items.indexOf(selectedItem);
}

Fuel UX 3: is element id required for initialization through Javascript?

I am new to Fuel UX and trying to make checkbox work. I have the following simple page:
<!DOCTYPE html>
<html lang="en" class="fuelux">
<head>
<meta charset="utf-8">
<title>Fuel UX 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="dist/css/fuelux.min.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//www.fuelcdn.com/fuelux/3.11.0/js/fuelux.min.js"></script>
</head>
<body>
<div class="checkbox" id="myCheckbox">
<label class="checkbox-custom" id="myCustomCheckbox1">
<input class="sr-only" type="checkbox" value="">
<span class="checkbox-label">Custom checkbox unchecked on page load 22234</span>
</label>
</div>
<script>
//javascript initialization goes here
</script>
</body>
</html>
I need to initialize the checkbox via Javascript. The following works:
$('#myCustomCheckbox1').checkbox();
The following are not working:
$('input[type="checkbox"]').each(function(index, item) {
$(this).checkbox();
});
or
$('input[type="checkbox"]').checkbox()
Could any expert confirm that checkboxes must have id if they are initialized via Javascript? Or I did it in a wrong way?

Please review the documentation. The checkbox jQuery plugin can only be bound to the label, not the wrapping div (if present), nor the input.
You might try:
$('.checkbox > label').each(function(index, item) {
$(this).checkbox();
});

Resources