I have a multiselect inside a Kendo template (type="text/kendo-x-tmpl") in a list.
I can't find a way to set property autoClose to false without jQuery.
<script type="text/kendo-x-tmpl" id="tmplRow">
<td style="width:100%" id="td">
<select data-id="myId" data-show=""
multiple="multiple"
data-role="multiselect"
data-text-field="Libelle"
data-value-field="IdProduct"
data-value-primitive="true"
data-loading-text="Chargement..."
data-bind="value: MyList, source: getSource, events: { select: onSelectedEvent, change: onChangeEvent }" />
</td>
</script>
Any idea would help me. Thanks.
You can specify the autoClose configuration option using this attribute data-auto-close="false":
<script type="text/kendo-x-tmpl" id="tmplRow">
<td style="width:100%" id="td">
<select data-id="myId" data-show=""
multiple="multiple"
data-role="multiselect"
data-text-field="Libelle"
data-value-field="IdProduct"
data-value-primitive="true"
data-loading-text="Chargement..."
data-bind="value: MyList, source: getSource, events: { select: onSelectedEvent, change: onChangeEvent }"
data-auto-close="false" />
</td>
</script>
The documentation gives this guidance:
Each configuration option can be set with the data attribute of the target element. Add the "data-" prefix to the name of the configuration option and specify the option value—for example, data-delay="100".
The camelCase options are set through dash-separated attributes. For example, the ignoreCase option of the AutoComplete is set through data-ignore-case.
Options which start with data do not require an additional "data" in the attribute name. For example, the dataTextField option is set through the data-text-field attribute and dataSource is set through the data-source attribute
For more information, see Setting the data Options. See working demo here.
Related
I want to limit kendo multiselect to 2 items selection. I see maxSelectedItems option can help me but not sure where to add this in the tag below. Any help would be appreciated.
<select class="k-widget multiselect" data-role="multiselect" id="CompSelect"
data-placeholder=""
data-value-primitive="true"
data-text-field="CompNameId"
data-value-field="CompId"
data-bind="value: SelectedComps,
source: CompaniesList,
events: {
change: onChange,
}">
</select>
You can set that easily like this:
$("#CompSelect").data("kendoMultiSelect").options.maxSelectedItems = 2;
The above code can be placed in a function for the dataBound event. That way, as soon as the data is bound to the MultiSelect it will set the maxSelectedItems.
Also, check this link.
<select id="multiselect" multiple="multiple">
<option>Item1</option>
<option>Item2</option>
<option>Item3</option>
<option>Item4</option>
</select>
<script>
$("#multiselect").kendoMultiSelect({
maxSelectedItems: 3 //only three or less items could be selected
});
</script>
I am trying to use jQuery validate for a form.
I have added
<script type="text/javascript" src="Scripts/jquery.validate.js"></script>
My form:
<form id="Main">
<asp:TextBox ID="Box" name="box" required runat="server"
</form>
At bottom of page
$('#Main').validate();
This works. Which is great. But if I remove the required attr and try say
$('#Main').validate({rules:{box:{required:true}}});
This does not work. For the life of me i cant figure out what I am doing wrong.
In the end I need that input to be required and numeric.
I tried adding 'number' as an attribute but that didn't work either.
some guidance would be great.
Thanks.
There are a number of validation plugins available, after some searching I think I found the plugin you're using based on the usage here.
I created a fiddle to demo how to make a field required and numeric ... click here for fiddle.
Based on the code you provided, it looks like you're only including the base validate.js library. You need to be sure to include the css file, and if you want to use some out of the box validations, such as number validations then you will also need to include the additional-methods.js file. All these files can be found HERE.
Here is the code from the fiddle above..
<form id="myform">
<input type="text" class="box" id="box" name="box">
<br/>
<input id="submit" type="submit" value="Validate!">
</form>
$(document).ready(function()
{
$("#myform" ).validate(
{
rules:
{
box:
{
required: true,
number: true
}
}
});
});
I have a kendo listview with custom edit template,
And this is the list view Code
var warrantyContact_listview = $("#warrantyContact_listview").kendoListView({
autoBind: false,
dataSource: dataSource,
template: kendo.template($("#warrantyContact_listview_template").html()),
editTemplate: kendo.template($("#warrantyContact_editview_template").html())
}).data("kendoListView");
And here is the edit template Code
<script type="text/x-kendo-tmpl" id="warrantyContact_editview_template">
<div id="con_editview">
<dd>
<dt>Person</dt>
<input type="text"
data-role = "autocomplete"
data-source = "some_datasource"
data-text-field = "fname"
data-value-field = "bid"
class="k-textbox"
data-bind="value:some_value"
name="builder"
required = "required"
validationMessage = "required"
id="builder"/>
<span data-for="some_value" class="k-invalid-msg"></span>
</dd><br clear="all"/>
<dt>City</dt>
<dd>
<input type="text" class="k-textbox" data-bind="value:city" name="city" required = "required" validationMessage = "required" />
<span data-for="city" class="k-invalid-msg"></span>
</dd><br clear="all"/>
<dt>State</dt>
<dd>
<input type="text" name = "state" class="k-textbox" data-bind = "value:state" data-value-field="abbrev" data-text-field="abbrev" data-min-length="1" data-source="states_datasource" data-role="autocomplete" required = "required" validationMessage = "required" />
<span data-for="state" class="k-invalid-msg"></span>
</dd><br clear="all"/>
<dt>Zip</dt>
<dd>
<input type="text" class="k-textbox" data-bind="value:zip" name="zip" required = "required" validationMessage = "required" />
<span data-for="zip" class="k-invalid-msg"></span>
</dd><br clear="all"/>
</dl>
</div>
</script>
Here is the scenario
When the listview enters into the edit mode, I would fill in in the first field "Person" which is an auto complete.
Based on what value I select for the Autocomplete "Person", I would like to assign its corresponding values to the city, state and zip. I am able to assign the values successfully. ( which I do with jquery ajax in the select event of the Person Auto complete)
But, when I call the $("#warrantyContact_listview").data("kendoListView").save();
When I check the firebug console,
those changed values city, state and zip are not been passed to the server side.
What I am missing here?
Do I have to change the binding of values in the template here?
I tried to change the values in the parameter map function, but, it did not work.
Any help would be greatly appreciated!
My first guess is that when you change the values, you don't use the set() method of the ObservableObject in dataSource, so the kendo dataSource doesn't know that the fields of the observable are modified.
So on save() ( which calls sync() for the dataSource ) it doesn't see anything new, and it doesn't update anything.
Check manually your datasource, change something with set() and use save() to see if it's saved.
how to assign value directly to kendo data-bind
here is the code
<script type="text/x-kendo-template" id="add-new-user-template">
<li>
<a class="user-result">
<span class="row-name">Create New User</span>
<br/>
<input type="hidden" class="hf-user-role-id" data-bind="value: 0"/>
<input type="hidden" class="row-party-id" data-bind="value: "/>
</a>
</li>
</script>
hav to set first input field value to 0 and second to empty string
Ok, I don't really know if I understood what you try to achieve, but if you want to set static values, why not just doing <input type="hidden" name="user-id" value="0" class="hf-user-role-id" /> since there is (in my opinion) no sense of binding static values.
The data-bind attribute needs a variable or some JSON to be bound to not a static value.
Cheers
If I understand correctly you want to do this:
$('.hf-user-role-id').attr('data-bind', "value: 0");
$('.row-party-id').attr('data-bind', "value:");
The jquery attribute method allows you to change the values of an attribute.
If you are using kendo ui then you will almost certainly have included jquery.
I have a drop down list and a form with a few textboxes. I would like to populate this form with details of selected item in the drop down list.
I'm doing this in java MVC app (or wannabe) and I have in my jsp page something like this:
<select name="item">
<c:forEach items="${persons}" var="selectedPerson">
<c:set var="person" value="${selectedPerson}" />
<option value="$selectedPerson.id">${selectedPerson.LastName}</option>
</c:forEach>
</select>
Persons is a list of the Person class.
I wonder is it possible to use the variable 'person' directly to fill the form, for example:
<textarea name="name" rows="1" cols="34" >
${selectedPerson.Name}
</textarea>
so that the rest of the form updates when the selectedPerson is changed?
I know how to do this within c#, but I don't have experience with java technologies.
Is it necessary to submit the form to servlet to do this, or it can be done on the client, since I have all my data in the persons list, from the moment of populating the drop down list?
The ${} syntax is JSP syntax, which will only be parsed and run once on the server to generate the HTML, and then sent down the wire as HTML. The changes to the select list then just happen in the client browser: the server doesn't know anything about them.
What you want to do is register a javascript listener on the select box. You should look into using a library ideally to help you do this. JQuery is a very popular solution and is worth reading up on if you're going to be doing this type of development.
If you end up using JQuery, you'll want to do something like the following
<select id="item" name="item">
<c:forEach items="${persons}" var="selectedPerson">
<c:set var="person" value="${selectedPerson}" />
<option value="$selectedPerson.id">${selectedPerson.LastName}</option>
</c:forEach>
</select>
<input name="lastName" id="lastName" type="text"/>
<script type="text/javascript">
$(function() {
$("#item").change(function() {
$("#lastName").val($("option:selected", this).text());
});
});
</script>
This will make more sense once you've read a basic JQuery tutorial, but basically what it does is that each time the select list changes value, it gets the selected option and sets it's content to the lastName input field. Hope this helps.