i've been struggling with this a couple of hours, but i don't find any way to make it work.
the thing is that the dropdownlist doesn't work if you put it inside a window. here you have an example.
https://plnkr.co/edit/eBpc4kEcHr7uSq6Zdq6h?p=preview
<kendo-window :width="'300px'" :title="'Window title'" :visible="visible" style="display:none">
<kendo-datasource ref="datasource" :type="'odata'" :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products'">
</kendo-datasource>
<kendo-dropdownlist :data-source-ref="'datasource'" :data-text-field="'ProductName'" :data-value-field="'ProductID'" :placeholder="'Select product'">
</kendo-dropdownlist>
https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products'">
is there a workaround for this?
regards.
I can't see anything wrong with what you are trying, but it works with an internal slot datasource:
<kendo-window
:width="'300px'"
:title="'Window title'"
:visible="visible"
style="display:none">
<kendo-dropdownlist
:data-text-field="'ProductName'"
:data-value-field="'ProductID'"
:option-label="'Select product'">
<kendo-datasource
slot="kendo-datasource"
:type="'odata'"
:transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products'">
</kendo-datasource>
</kendo-dropdownlist>
</kendo-window>
It looks like a bug - I have logged it here. You can use temporary use the internal slot (as suggested by rareclass) as here
<kendo-window :width="'300px'"
:title="'Window title'"
:visible="visible"
style="display:none">
<h4>Window content</h4>
<kendo-dropdownlist style="width: 100%" :data-text-field="'ContactName'" >
<kendo-datasource slot="kendo-datasource"
:type="'odata'"
:transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers'"
:group-field="'Country'">
</kendo-datasource>
</kendo-dropdownlist>
</kendo-window>
Related
I'm currently trying to add validation to an angular 2 form, but for some reason I can't get my submit button to disable when the required fields are not filled in.
Here is the code of my form template:
<h1 md-dialog-title>{{title}}</h1>
<form #formCtrl="ngForm">
<md-dialog-content>
<md-input-container>
<input #name md-input placeholder="Name" value="" name="name" focused required>
</md-input-container>
<br />
<md-select #inputtype placeholder="Input type" name="inputtype">
<md-option *ngFor="let inputtype of inputtypes" [value]="inputtype.id">
{{inputtype.name}}
</md-option>
</md-select>
</md-dialog-content>
<md-dialog-actions>
<button type="submit" md-raised-button color="primary" [disabled]="!formCtrl.form.valid">Create</button>
</md-dialog-actions>
</form>
According to several examples, this should work, however the button is never disabled. I've also tried "!formCtrl.valid", also to no avail.
I've tried using non-material design input fields thinking maybe that would be the issue, but it still won't work.
I then tried copy/pasting the following simple example into my application, and even that won't work at all:
http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/
Any ideas as to what might prevent it from working correctly?
Assuming you are using a newer release than Angular 2 final:
You need to add ngModel, which binds the form value based on the name attribute’s value. In your case one is name="inputtype" the other is name="name". So you need to add ngModel to bind the values, and your form should work as you wish! :)
So the following should work (removed a bit of noise from code):
<form #formCtrl="ngForm" (ngSubmit)="save(formCtrl.value)"> //whatever your submit method is
<md-dialog-content>
<md-input-container>
<input md-input name="name" required ngModel>
</md-input-container>
<md-select name="inputtype" required ngModel>
<md-option *ngFor="let inputtype of inputtypes" [value]="inputtype.id">
{{inputtype.name}}
</md-option>
</md-select>
</md-dialog-content>
<md-dialog-actions>
<button type="submit" md-raised-button color="primary" [disabled]="!formCtrl.form.valid">Create</button>
</md-dialog-actions>
</form>
Don't remember when this was introduced, this should be found somewhere in the changelogs which can be useful to have a look at once in a while, since Angular is constantly tweaking things almost in every release. So following that will keep you updated with changes and syntax :)
I am trying to change the default promptChar for a Kendo MaskedTextBox. I tried with code:
<div class="box-col" style="width: 300px">
<h4>Enter a number</h4>
<input data-role="maskedtextbox"
data-mask="(999) 000-0000"
data-promptChar="#"
data-bind="visible: isVisible,
enabled: isEnabled,
value: phoneNumber,
events: { change: onChange }"
style="width: 200px">
</div>
However, the textbox still has '_' as the prompt character. Any idea why this is happening? How do I fix this?
Thanks in advance.
Change data-promptChar="#" to data-prompt-char="#"
See working sample http://jsbin.com/xivede/1/edit?html,js,output
in my ember app I'm looking for a way to reference an element in <label for> that works within an {{#each}}-Block. Example:
{{#each}
...
{{view "radio-button" name="options" selectionBinding="options" value="1"}}
<label for="???">Option 1</label>
{{view "radio-button" name="options" selectionBinding="options" value="2"}}
<label for="???">Option 2</label>
...
{{/each}}
Searching the net I found several solutions, but none works within {{#each}}. What is the recommended way to do this?
Thanks in advance.
Dirk
You can solve this by giving each radio-button a viewName.
{{view "radio-button" name="options" selectionBinding="options" value="1" viewName="option1"}}
<label {{bind-attr for="view.option1.elementId"}}>Option 1</label>
See http://emberjs.jsbin.com/xokurixucapi/1/edit for an example.
Just saw that you actually want it to work in a loop. You can try to bind the viewName to the loop index, did you have a look at this?
I am trying to invoke a form submit using javascript (jquery) to invoke a webflow transition. It works and the submit invokes the desired transition. But, the updated radio button values is not reflected on the model object which is posted.
Here is the code:
<form:form method="post" action="#" commandName="infoModel" name="pageForm">
<form:input type="input" path="testMsg" id="success" />
<input type="button" id="clearSelections" value="Clear Selections">
<div class="question">
<h4><c:out value="${infoModel.questionInfo.description}"/> </h4>
<form:radiobuttons path="infoModel.answerId"
itemValue="answerId" itemLabel="answerDescription" items="${infoModel.answers}" delimiter="<br/>" />
</div>
<input type="submit" name="_eventId_saveQualitativeInput" value="Save" id="save" />
$(document).ready(function() {
$('#tabs').tabs();
//Clear selections (copy is server-side)
$('#clearSelections').click(function() {
//$('input[type="radio"]').prop('checked', false);
$('input[type="radio"]').removeAttr('checked');
$('#save').trigger('click');
});
});
</form:form>
The form:radiobutton, generates the below html:
<div class="question">
<h4>Is this a general obligation of the entity representing a full faith and credit pledge? </h4>
<span>
<input type="radio" checked="checked" value="273" name="infoModel.answerId" id="infoModel.answerId1">
<label for="infoModel.answerId1">Yes</label>
</span>
<span><br>
<input type="radio" value="274" name="infoModel.answerId" id="infoModel.answerId2">
<label for="infoModel.answerId2">No</label>
</span>
<br>
<span class="error"></span>
</div>
The input id= "success" value is registered and when the control goes to the server, the value of input id= "success" is updated in the "infoModel" object. But the value of answerId is not updated on the "infoModel" object.
Thoughts if i am missing something in the form:radiobutton element or if there is something else wrong?
Thanks in advance!
EDIT:::::::
Thanks mico! that makes sense. I stripped of some of the code first time to make it precise, but i have a list which is being used for building the radio-buttons, below is the code:
<c:forEach items="${infoModel.list["index"]}" var="qa" varStatus="rowCount">
<div class="question">
<h4><c:out value="${question.questionInfo.description}"/> </h4>
<form:radiobuttons path="list["index"][${rowCount.index}].answerId" itemValue="answerId" itemLabel="answerDescription" items="${question.answers}" delimiter="<br/>" />
<br>
</div>
</c:forEach>
Could you please suggest how i could try this one out?
NOTE: The same code works on a regular form submit on click of a button of type submit. Its the javascript form submit which is not working. I also tried to do whatever i want to do in javascript and then invoke the button.trigger('click'); form got submitted but the changes made on form in my javascript didnt reflect.
With commandName inside a form:form tag you set "Name of the model attribute under which the form object is exposed" (see Spring Documentation). Then in path you should tell the continuation of the path inside the model attribute.
With this said I would only drop the extra word infoModel from path="infoModel.answerId" and have it rewritten as path="answerId" there under the form:radiobutton.
I've got a plain and simple HTML form which allows people to order some brochures. The form first loads with something looking a little like this:
<script type="text/javascript">
var tableRowN = 1;
</script>
<form id="Order" name="Order" method="post" action="includes/orderCheck.php">
<input id="name" type="text" name="name" width="100" />
<table id="orderingTable">
<tr class="lastRow">
<td><div id="itemGroupdiv1">
<input type="text" class="disabled" name="itemGroup1" id="itemGroup1" />
</div></td>
<td><div id="itemCodediv1">
<input type="text" name="itemCode1" id="itemCode1" class="disabled" />
</div></td>
<td><div id="itemCodeVersiondiv1">
<input type="text" class="disabledSmall" id="itemcodeversion1" name="itemcodeversion1" />
</div></td>
</tr>
</table>
<input type="submit" name="submit" id="submit"/>
</form>
Then when the user wants to add a new line to the table he can click a button which fires the following javascript function to grab the new table code via AJAX and insert it.
function createItemLine() {
tableRowN++;
$('tr.lastRow').attr('class', '');
$('#orderingTable').append('<tr class="lastRow"></tr>');
$.ajax({
url: "/orderingTable.php?rNumber=" + tableRowN,
cache: false,
success: function(html){
$("tr.lastRow").append(html);
alert('loaded');
}
});
}
The AJAX function then runs off to a PHP script which creates the next line, rolling the IDs and Names etc with +1 to the number.
<td><div id="itemGroupdiv2">
<input type="text" class="disabled" name="itemGroup2" id="itemGroup2" />
</div></td>
<td><div id="itemCodediv2">
<input type="text" name="itemCode2" id="itemCode2" class="disabled" />
</div></td>
<td><div id="itemCodeVersiondiv2">
<input type="text" class="disabledSmall" id="itemcodeversion2" name="itemcodeversion2" />
</div></td>
So so far, nothing suprising? Should all be pretty straight forward...
The problem is that when I add new lines (In Firefox and Chrome) the new lines are completely ignored by the form submission process, and they never get passed through into the $_POST array.
Is this a known problem? I've not come across this before...
Thanks for any pointers,
H
use jQuery.trim(data) but this is not pretty sure because can affect the
content of your data. or see this one may help u
Is your table missing an html id? The jQuery selector $('#orderingTable') is looking for something with id="orderingTable"
On some thorough (and boy do I mean thorough) it turned out that the following simple (yet obvious) HTML errors can cause this issue:
Badly formed code EG missing etc
Duplicate or missing form "name" attributes
On creating properly validated HTML, the form submitted and all values were passed correctly into the _POST array. An object lesson in making sure your developers pay attention to the basics before trying to get all fancy in their coding approach ;)
I've found that using .html() to insert the content instead of .append() or .prepend() causes the inserted form fields to work as expected.
I've just spent quite a while laboring over a problem like this.
I was ajax-ing an input field into a form and that input field was not showing up in the $_POST submission array, was completely annoying!!!! Aaaaanyway, I fixed it by just checking over all my html and it turns out that my form 'open' was inside one of the main div's on page and not outside.
thus:
<div>
<form>
<input type="text" name="input_field">
</div>
</form>
is now fixed to be:
<form>
<div>
<input type="text" name="input_field">
</div>
</form>
Silly, I know, but in a massive form, it was tricky to spot! So in short just be tidy with your html and it WILL work, I hope that helps someone somewhere :-)
M