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)
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>
I would like to send my dynamically generated DIV items, but I do not understand how to do it
I create my div dynamically:
$("#clt_forf_ti").click(function(e){
e.preventDefault();
if(x < max_input){
x++;
var addDIV = $('<div id="clt_forf_div'+x+'" class="w-100 form-control" ><label for="clt_forf_num'+x+'">Ligne :</label> <input type="text" class="font-weight-bold border-top-0 border-right-0 border-left-0 mR-10" id="clt_forf_num'+x+'" autocomplete="off" style="width: 100px" > Forfait : <i id="clt_forf_forf_select'+x+'" style="display:none;"></i><input type="text" class="border-top-0 border-right-0 border-left-0" id="clt_forf_forf'+x+'" autocomplete="off" style="width: 180px"><i class="ti-calendar mL-20 mR-5"></i><input type="text" class="border-top-0 border-right-0 border-left-0" id="clt_forf_date_start'+x+'" name="datepicker" placeholder="Début" style="width: 80px"><i class="ti-calendar mL-20 mR-5"></i><input type="text" class="border-top-0 border-right-0 border-left-0" id="clt_forf_date_end'+x+'" name="datepicker" placeholder="Fin" style="width: 80px"><i id="clt_forf_ti_remove" class="ti-close c-red-500 mL-5" style="cursor: pointer;"></i></div>');
$('#clt_forf_bloc').append(addDIV);
$('#clt_forf_forf'+x, addDIV).autocomplete(autocomp_opt);
$("input[id^='clt_forf_date']", addDIV).datepicker(datepick);
//$('#clt_forf_date_end'+x, addDIV).datepicker(datepick);
}
});
I want to send each value by ajax:
var data = {
op_clt_forf_ref: $("[id^='clt_forf_forf_select']").html(),
op_clt_forf_num: $("[id^='clt_forf_num']").val(),
op_clt_forf_start: $("[id^='clt_forf_date_start']").val(),
op_clt_forf_end: $("[id^='clt_forf_date_end']").val(),
op_clt_forf_nom: $("[id^='clt_forf_forf']").val(),
};
however he only takes me the first div and not the others,
can you help me ?
The Elements that you have created were not present in the DOM earlier. So can't target them directly.
Try doing this:
var data = {
op_clt_forf_ref: $('body #clt_forf_forf_select').html(),
op_clt_forf_num: $('body #clt_forf_num').val(),
op_clt_forf_start: $('body #clt_forf_date_start').val(),
op_clt_forf_end: $('body #clt_forf_date_end').val(),
op_clt_forf_nom: $('body #clt_forf_forf').val(),
};
I'm trying to clone a select2 list and 2 text areas, but it's working only for the first clone, and I don't understand why..any new eye will certainly help !
(the cloning is OK, but the select2 is not applied to the 3rd clone)
HTML part
<fieldset>
<div id="test">
<div>
<label>Tool Name : </label>
<select class="toollist" name="FSR_tool_id[]" style="width: 350px" />
<option></option>
<option value="1" >bla 1</option>
</select>
<input type="Button" value="ADD ANOTHER TOOL" class="AddTool">
<label>Service Scope</label>
<textarea rows="5" style="width:99%" name="FSR_servicescope[]" class="validate[required]" />
</textarea>
</br>
<label>Service Description</label>
<textarea rows="10" style="width:99%" name="FSR_servicedesc[]" class="validate[required]" />
</textarea><hr>
</div>
</div>
<input type="hidden" value="0" id="countertool">
</fieldset>
JS part (I call jquery and select 2 before, of course)
$('#test .toollist').select2({ //apply select2 to my element
placeholder: "Search your Tool",
allowClear: true
});
$("input[type='button'].AddTool").live('click',
function() {
var index = $(this).closest('div').index();
if (index > 0) {
$(this).closest('div').remove();
} else {
$('#test .toollist').select2('destroy');
//we have to destroy the select2 before cloning
var $div = $(this).closest('div').clone(true);
$div.find('input.AddTool').val("DELETE THIS TOOL");
//to replace the button "add" by another "delete"
var $input = $div.find('input.exp');
var index = $('input#countertool').val();
var id = 'exp' + index;
index++;
$('input#countertool').val(index);
$input.attr('id', id).data('index', index);
$(this).closest('#test').append($div);
//then, we re-apply select2 to the lists
$('#test .toollist').select2({
placeholder: "Search your tool !",
allowClear: true
});
};
});
Any idea of my mistake ?
Thanks a lot in advance !
See this fiddle: http://jsfiddle.net/omugbdm1/3/ it's a bit of a mashup of code but should do the trick.
<div id="test">
<div id="tooltest0" class="tooltest0">
<label>Tool Name :</label>
<select class="toollist" name="FSR_tool_id[]" id="FSR_tool_id0" style="width: 350px" />
<option></option>
<option value="1">bla 1</option>
</select>
</div>
<div id="tool-placeholder"></div>
<div>
<input type="button" value="Add another" />
</div>
</div>
and
$('.toollist').select2({ //apply select2 to my element
placeholder: "Search your Tool",
allowClear: true
});
$('input[type=button]').click(function () {
$('.toollist').select2("destroy");
var noOfDivs = $('.tooltest0').length;
var clonedDiv = $('.tooltest0').first().clone(true);
clonedDiv.insertBefore("#tool-placeholder");
clonedDiv.attr('id', 'tooltest' + noOfDivs);
$('.toollist').select2({ //apply select2 to my element
placeholder: "Search your Tool",
allowClear: true
});
});
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>
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