How to disable auto open when clicking the kendo multiselect auto complete box.It may be open when i start typing.
You should intercept open event, check for length of typed text and if it is 0 then invoke preventDefault. Something like:
$("#required").kendoMultiSelect({
open : function (e) {
var len = this.input.val().length;
if (len == 0) {
e.preventDefault();
}
}
})
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
<select id="required" multiple="multiple" data-placeholder="Select attendees...">
<option>Steven White</option>
<option>Nancy King</option>
<option>Nancy Davolio</option>
<option>Robert Davolio</option>
<option>Michael Leverling</option>
<option>Andrew Callahan</option>
<option>Michael Suyama</option>
<option selected>Anne King</option>
<option>Laura Peacock</option>
<option>Robert Fuller</option>
<option>Janet White</option>
<option>Nancy Leverling</option>
<option>Robert Buchanan</option>
<option>Margaret Buchanan</option>
<option selected>Andrew Fuller</option>
<option>Anne Davolio</option>
<option>Andrew Suyama</option>
<option>Nige Buchanan</option>
<option>Laura Fuller</option>
</select>
Related
While showing barcode using IDAutomationHC39M font, some times not loading the barcode instead showing number with asterisk. would be great any material on IDAutomationHC39M.
below is the code to generate barcode.
<td style="font-family: IDAutomationHC39M; font-size:12px;">*${dynaming_number}*</td>
I have had trouble in the past using inline styles. Have you tried creating CSS and a custom class?
Then again, it might just be the font-family you are using, try to load the font with the fontlibrary.org link, and then use "IDAHC39M Code 39 Barcode" instead of "IDAutomationHC39M".
var buttonGen = document.getElementById("btnGen");
buttonGen.onclick = function () {
var x = document.getElementById("textIn").value;
var fs;
// Change the font-size style to match the drop down
fs = document.getElementsByTagName("option")[document.getElementById("selList").selectedIndex].value;
document.getElementById("test").style.fontSize = fs + 'px';
document.getElementById("test").innerHTML =
'*' + // Start Code B
x + // The originally typed string
'*'; // Stop Code
}
td, th {
text-align: center;
padding: 6px;
}
.ss {
font-family: "IDAHC39M Code 39 Barcode";
font-size: 24px;
}
<head>
<link rel="stylesheet" media="screen, print" href="https://fontlibrary.org/face/idautomationhc39m-code-39-barcode" type="text/css"/>
</head>
<body>
Font Size:
<select id="selList">
<option value="24" selected>24px</option>
<option value="30">30px</option>
<option value="36">36px</option>
<option value="42">42px</option>
<option value="48">48px</option>
<option value="54">54px</option>
<option value="60">60px</option>
<option value="66">66px</option>
<option value="72">72px</option>
<option value="78">78px</option>
<option value="84">84px</option>
<option value="90">90px</option>
<option value="96">96px</option>
</select>
<input type="text" id="textIn"></input>
<input type="button" id="btnGen" value="Generate Code 39" tabindex=4/>
<div id="check"></div><br /><span id="test" class="ss">*Making the Web Beautiful*</span><br />
<p>This is a demonstration of use of the Free ID Automation 39 Font.</p>
</body>
There is a very beautiful solution in spring to populate up a select list from EL variable such as:
<form:select id="customerentity_customerTitle" path="customerTitle" cssStyle="width:300px;">
<form:option value="None" label="*** Select Your Title ***"></form:option>
<form:options items="${fn:split(title_t, ',')}" />
</form:select>
This JSTL and spring solution can be applied easily and very affection.
When I tried to find a similar solution in Dojo. I found most close solution is dijit/form/FilteringSelect, but when I try to use similar way to populate a dynamic generated dropdown select, it doesn't work.
<select id="customerentity_customerTitle" name="customerTitle" style="width: 300px;" data-dojo-type="dijit/form/FilteringSelect"
data-dojo-props="value: '${customerentity.customerTitle}',placeHolder: 'Select Your Title',options:'${fn:split(title_t, ',')}'">
</select>
My question is: Is there any possible to use similar way to do it in digit/form/FilteringSelect? or I have to do it by using javascript to populate it?
Any advice is welcome!!
Edit
title was hold in a property file and access by using:
<fmt:setBundle basename="bundles.customer-resources" />
resources bundle.
The sources looks like:
storageway.customer.person.title.options=Mr.,Ms.,Mrs.,Dr.,Other
access by:
<fmt:message key="storageway.customer.person.title.options" var="title_t" scope="session" />
It is a simple string array instead of a key:value map. Spring form can handle it properly but dijit/form/FilteringSelect not.
You can create normal option tags inside the dijit/form/FilteringSelect.
They will be rendered. So I bet you can do
<select id="customerentity_customerTitle" name="customerTitle" style="width: 300px;" data-dojo-type="dijit/form/FilteringSelect"
data-dojo-props="value: '${customerentity.customerTitle}',placeHolder: 'Select Your Title'">
<form:options items="${fn:split(title_t, ',')}" />
</select>
See the snippet:
require(["dojo/parser", "dojo/domReady!"], function(parser){
parser.parse();
});
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">
<div class="tundra">
<select id="customerentity_customerTitle" name="customerTitle" style="width: 300px;" data-dojo-type="dijit/form/FilteringSelect"
data-dojo-props="value: 'b',placeHolder: 'Select Your Title'">
<option value="a">value A</option>
<option value="b">value B</option>
<option value="c">value C</option>
</select>
</div>
net mvc and i want to set the MaxSelectedItems property of Kendo Multiselect based on some codition dynamically using javascript. refer code snip below. Thanks in Advance.
#Html.Kendo().MultiSelectFor(model => model.Name)
In my javascript
if(condition)
{
$(#Name).MaxSelectedItems(1);
}
the JS is not working
Try doing:
if (condition) {
var ms = $("#multiselect").data("kendoMultiSelect");
ms.options.maxSelectedValue = 6;
}
Example:
$("#required").kendoMultiSelect({
maxSelectedItems : 4
}).data("kendoMultiSelect");
$("#change6").on("click", function() {
var sel = $("#required").data("kendoMultiSelect");
sel.options.maxSelectedItems = 6;
});
$("#change4").on("click", function() {
var sel = $("#required").data("kendoMultiSelect");
sel.options.maxSelectedItems = 4;
});
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css" rel="stylesheet"/>
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet"/>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
<button id="change6" class="k-button">Change to 6</button><br/>
<button id="change4" class="k-button">Change to 4</button><br/>
<select id="required" multiple="multiple" data-placeholder="Select attendees...">
<option>Steven White</option>
<option>Nancy King</option>
<option>Nancy Davolio</option>
<option>Robert Davolio</option>
<option>Michael Leverling</option>
<option>Andrew Callahan</option>
<option>Michael Suyama</option>
<option selected>Anne King</option>
<option>Laura Peacock</option>
<option>Robert Fuller</option>
<option>Janet White</option>
<option>Nancy Leverling</option>
<option>Robert Buchanan</option>
<option>Margaret Buchanan</option>
<option selected>Andrew Fuller</option>
<option>Anne Davolio</option>
<option>Andrew Suyama</option>
<option>Nige Buchanan</option>
<option>Laura Fuller</option>
</select>
#(Html.Kendo().MultiSelect()
.Name("ArenaList2")
.Placeholder("Select attendees...")
.BindTo(Model.ArenaList)
.DataTextField("Text")
.DataValueField("Value")
.MaxSelectedItems(3)
)
You can configure it in the control itself with this option .MaxSelectedItems(3)
<div id="ab100">
<iframe width="1000" height="600" src="...">
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<body>
<form id="form1" action=".." method="post">
<select id="abl03" style="..">..\',\'\')', 0)" name="l03ue">
<option value="0" selected="selected"><Select a Value></option>
<option value="1">AB</option>
<option value="2">AD</option>
<option value="3">BC</option>
<option value="4">CA</option>
</select>
</div>
When I want to click on DDL, I normally do this:
browser.select_list(:id => 'ab103').select('CA')
and it will select the option value = "4". But I am getting this error:
Watir::Exception::UnknownObjectException: unable to locate element, using {:id=>
"abl03", :tag_name=>"select"}
from C:/Ruby193/lib/ruby/gems/1.9.1/gems/watir-webdriver-0.6.2/lib/watir
-webdriver/elements/element.rb:490:in `assert_exists'
Maybe this problem is due to its in a iframe.
Thanks in advance.
A few things:
There is no opening <select> tag in your example. I'm assuming <div id="abl03"> should be <select id="abl03"> or that it's simply missing.
The id for <select id="abl03"> is abl03, but id locator value in select_list(:id => 'ab103') is ab103.
<Select a Value> in <option value="0" selected="selected"><Select a Value></option> should be <Select a Value>.
So, the unable to locate elementerror is valid because a <select> tag with the specified id does not exist.
If you run into issues with frames, check out http://watirwebdriver.com/frames/ and https://github.com/watir/watirspec/blob/master/frame_spec.rb for examples.
I seen a similar question like this on stackoverflow. Sorry for posting it again. Thanks.
browser.frame(:index => 0).select_list(:id => ab103).select(/CA/)
any other suggestions are welcome too. Thanks.
I am a newbie of smarty so please pardon my innocence :oops:
I am following a code left by previous programmer and i have this problem on dynamically changing the values of a select box depending on the selected value of another select box.
So here's the situation:
I have drop down named "Section" and another one named "Subsection".
What i need to come up with is that when i choose a Section the Values of the Subsection will change too and only displays the Subsections which is under that section selected.
here's a javascript simulation of the problem:
<html>
<head>
<title>Box changing demo</title>
<script type="text/javascript">
var items = new Array();
items[0] = new Array("Dog", "Cat", "Pig");
items[1] = new Array("Andromeda", "Boötes", "Cepheus");
items[2] = new Array("Mercury", "Venus", "Earth");
items[3] = new Array("BMW", "Audi", "Bugatti");
function changeItems(){;
num=document.changer.section.options[document.changer.section.selectedIndex].value;
document.changer.subsection.options.length = 0;
for(i=0; i<items[num].length; i++){
document.changer.subsection.options[i] = new Option(items[num][i], items[num][i]);
}
}
</script>
</head>
<body>
<form name="changer">
<select name="section" onchange="changeItems();">
<option value="0">Animals</option>
<option value="1">Constelations</option>
<option value="2">Planets</option>
<option value="3">Cars</option>
</select>
<select name="subsection">
<!--<option>tgntgn</option> -->
</select>
</form>
</body>
</html>
This is what i need to do with smarty.
Anybody?
Thank you for your help.
You can't do it in Smarty, because it just cannot be done with HTML only. You have to use Javascript for this. Look at http://www.texotela.co.uk/code/jquery/select/ - it seems easy enough to implement.
Hope This Answers Your Question
<!--JAVASCRIPT-->
<!--CREATE DROPBOX WHEN SEC1 IS SELECTED-->
<script>
var section= document.getElementById("section").value;
if(section == SEC1){
document.getElementById("subSEC").innerHTML='
<select name="subsection" type="text" id="subsection">
<option value=""></option>
<option value="Sub1">Sub1</option>
<option value="Sub2">Sub2</option>
<option value="Sub3">Sub3</option>
</select>"
';
}
</script>
<!--HTML MARKUP-->
<select name="section" type="text" id="section">
<option value=""></option>
<option value="SEC1">SEC1</option>
<option value="SEC2">SEC2</option>
<option value="SEC3">SEC3</option>
</select>
<!--SPACE TO PLACE DROPBOX FROM JAVASCRIPT-->
<span id="subSEC">
</span>
try something like:
{html_options name=section options=$options selected=$index
onchange="changeItems();"}
where $options and $index (index of selected option in select tag) are assigned in php:
<?php
...
$smarty = new Smarty ();
...
$smarty->assign ( 'index', $some_php_val );
$smarty->assign ( 'options', $some_php_array );
...
?>
for more info check:
http://www.smarty.net/docsv2/en/language.function.html.options.tpl
http://www.smarty.net/forums/viewtopic.php?p=53422