Is there any way how to force uppercasing value in textbox when typing? Not after value changed, but when typing.
You can use CSS for that:
<input id="textbox" style="text-transform: uppercase" />
<script>
$("#textbox").kendoTextBox();
</script>
Example
Related
Need to check format of the value of a textfield inside the Javascript.
I am using thymeleaf for rendering the page.
To achieve this I plan to use th:id and use this inside Javascript (similar to document.getElementById and read the value. But I donot know how to get the value of the textfield inside the javascript as I am doing an iteration..
Below is the scenario
While iterating through a Map<String,Field> (where Field is a class containing two elements fieldValueList (List) and timeField(boolean) check for the format of the textField entered in the page, (format of the textfield should be hh:mm:ss) need to be done in javascript. I used id for reading the value, but donot know how to get the value of the textfield inside the javascript.
The code for the page is
<fieldSet th:each="fieldKey,fieldKeyIndex : *{recipeFieldMap.keySet()}">
<div class="fieldDiv" th:each="fieldVal,field : *{recipeFieldMap[__${fieldKey}__].fieldValueList}">
<span class="fieldSpan" th:if="*{recipeFieldMap[__${fieldKey}__].timeField}">
<input type="text" th:id="|text_${fieldKeyIndex.index}_${field.index}|" th:field="*{recipeFieldMap[__${fieldKey}__].fieldTimeValueList[__${field.index}__].displayStr}" onchange="checkTimeStr()">
<script th:inline="javascript">
/*<![CDATA[*/
function checkTimeStr() {
// Something like this.. to read the value
//var value = document.getElementById('/* text_${groupKeyIndex.index}_${field.index} */').value;
//alert(value)
}
/*]]>*/
</script>
</span>
<span class="fieldSpan" th:unless="*{recipeFieldMap[__${fieldKey}__].timeField}">
<input type="text" th:field="*{recipeFieldMap[__${fieldKey}__].fieldValueList[__${field.index}__]}">
</span>
</div>
</fieldSet>
enter image description here
try this:
<script th:inline="javascript">
[[${field.index}]]
</script>
I want to exclude an html-element from getting transformed to a kendo ui widget.
Is this possible? Maybe via css class or so?
Example:
https://jsfiddle.net/8L4zg92x/
<input type="file" class="first"> // => KendoUpload
<input type="file" class="second"> // => plain Html-File-Upload
--
i'm not able to change the jquery selector.
$(document).ready(function() {
$("input[type=file]").kendoUpload();
);
I realise this is a different approach which might not be practical in your situation, but using declarative initialization, instead of imperative (jQuery) initialization would give you what you want:
<body>
<div id="outer">
<input type="file" class="first" data-role="upload">
<input type="file" class="second">
</div>
<script>
kendo.init($("#outer"));
</script>
</body>
See Initializing with MVVM for more information on using this approach.
Example: https://dojo.telerik.com/eLOWaluL
just in case someone has the same problem, but can edit the selector. Here is an easy way to don't select the second input-field:
$(function() {
$("input[type=file]:not('.second')").kendoUpload();
});
I have this simple kendo-template script:
<!-- popup editor template -->
<script id="userEditor" type="text/x-kendo-template">
<div id="popServerErrorSummaryPlaceholder" style="display:none"></div>
<div class="control-row">
<label class="span2" for="FirstName">Vorname</label>
<input Id="FirstName" class="span4" data-bind="value:FirstName" maxlength="50" name="FirstName" required="true" type="text" />
<span class="k-invalid-msg" data-for="FirstName"></span>
</div>
<div class="control-row">
<label class="span2" for="LastName">Nachname</label>
<input Id="LastName" class="span4" data-bind="value:LastName" maxlength="50" name="LastName" required="true" type="text" />
<span class="k-invalid-msg" data-for="LastName"></span>
</div>
</script>
Which is used while editing a single row within the Kend-UI grid.
I have got right now two issues:
a) The documentation states that I can control the position for validation messages via a "span" element that has a class "k-invalid-msg".
The behaviour right now is that this span Element gets replaced with a div element and it is positioned below the label element. I would like to get the message next to the input.
b) The validation is triggered immediately when the pop up is displayed.The validation should be trigger either when leaving the input or clicking the "update" button.
Someone out there who can help me here?
Things I am not quite sure how to handle:
c) Some validations are performed at the server. I get them back to the browser via the DataSource error event (custom JSON which is basically a list of field name and associated error messages). I would like to display the error messages within the validation span. I can create custom validation rules as documented here.
How do I get the validator that is associated with the pop up editor window? Or is there foreach input a validator created?
Anyone did this before?
Thanks for any help!
Updates:
regarding to point a)
OnaBai pointed me to the right direction. Thanks for that.
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 problem with checkbox. I have a list of checkbox, and I want to mark only one check and unmark other.
I want do that this in the same view , is it posible?
How can I do that?
<div><input type="checkbox" id="<%= id %>" onchange='submit();'/> </div>
thanks
Sounds like you really need a radio button instead. Radio buttons are mutually exclusive if you give them the same name:
<input type="radio" name="something" ... />
<input type="radio" name="something" ... />
If you really want checkboxes you will have to write some JavaScript logic.
Use radio buttons, not checkboxes.
<div>
foreach (var foo in model.Foos) {
<input type="radio" name="foo" id="foo_#foo.Id" value="#foo.Id" />
<label for="foo_#foo.Id">#foo.Value</label> <br />
}
</div>
Something like that should create a list of radio buttons.
Also, why are you submitting when the selection is changed? You should be using jQuery to do any selection-based manipulation to the page on the client side.
You could use jQuery. on document.Ready you'll have to bind a change event on checkboxes to some function, then in your function you want to reset all other checkboxes. That's assuming you don't want to use radio buttons as suggested above.