I have two kendo date picker in input boxes and one checkbox I want to show the kendo datepickers all the time with current date . but they become enable /selectable /editable ONLY when user has checked the checkbox.
Checkbox
<input type="checkbox" id="RequredFilter" />
2 kendo Datepickers.
<input type="text" id="DateFrom" />
<input type="text" id="DateTo" />
I have tried various things like disabling text-boxes etc but datepickers just keep working/showing..
There is special method for enabling/disabling the DatePicker called enable - check this demo.
$('#RequredFilter').click(function(e){
if($(this).is(':checked')){
$('#DateFrom').data('kendoDatePicker').enable(true);
$('#DateTo').data('kendoDatePicker').enable(true);
}
else{
$('#DateFrom').data('kendoDatePicker').enable(false);
$('#DateTo').data('kendoDatePicker').enable(false);
}
})
Here's a slightly different approach:
$(document).ready(function() {
$("#RequredFilter").change(function() {
$('#DateFrom').data('kendoDatePicker').enable(this.checked);
$('#DateTo').data('kendoDatePicker').enable(this.checked);
});
});
Related
On a page I have two classic report in different tabs.
I'm adding options: check all
eg.
In classic report query column
apex_item.checkbox2(1,country_id) checkbox_ID
On Heading column checkbox_ID
<input type="checkbox" id="checkAll" >
Function and Global Variable Declaration
$('#checkAll').click(function () {
$('input:checkbox').prop('checked', this.checked);
});
Work fine on one classic report, but when add select option on second classic report after click on checkbox all item select all items in both classic report!
On second classic report I'm changing
<input type="checkbox" id="checkAll_TAB2" >
and
$('#checkAll_TAB2').click(function () {
$('input:checkbox').prop('checked', this.checked);
});
Inspect element on page shows:
classic report 1
<input type="checkbox" name="f01" value="1">
<input type="checkbox" name="f01" value="2">
classic report 2
<input type="checkbox" name="f01" value="5">
<input type="checkbox" name="f01" value="6">
Any solutions?
The command $('input:checkbox').prop('checked', this.checked); will check all checkboxes on the page, not just the ones for the column that you clicked the header for.
One solution is to give each of the report regions a static id and use that in the function. For example I created 2 reports, one with static id 'EMP1', one with 'EMP2'. It works ok for me. If you have multiple columns with checkboxes you'll need another option.
$('#checkAll').click(function () {
//$('input:checkbox').prop('checked', this.checked);
$('#EMP1').find('input:checkbox').prop('checked', true);
});
$('#checkAll_TAB2').click(function () {
$('#EMP2').find('input:checkbox').prop('checked', true);
});
The existing solution for dropdownlist:
<input id="countryid" name="countryid"
data-role="dropdownlist"
data-text-field="text"
data-value-field="value"
data-bind="value: countryid"
data-source="CountryidNameList"
data-auto-bind="true"
data-bound="updateModel"
data-value-primitive="true"/>
function updateModel(e) {
var widget = e.sender;
setTimeout(function() {
widget.trigger("change");
});
};
when we migrate to new version of Kendo UI 2015 (commercial version), the above solution does not work any more:
for form, the dropdownlist does not set the first value of the dropdownlist any more;
for kendo-grid (change the input, but still use the updateModel function), in edit mode: the dropdownlist is showing a loading icon (there is no error and the value is loaded in the dropdownlist while click)
anyone can help?
Well you can modify your kendo element a bit as:
<input id="countryid"
name="countryid"
data-text-field="text"
data-value-field="value"
data-option-label="Select Country..."
data-bind="source: CountryidNameList,value:countryid" data-role="dropdownlist"
></input>
and do the source binding from javascript. Have done a JSBin for your issue here. Hope you find it useful!
I am using ASP.net for a program with a number of check boxes and a submit button which initiates an action depending on the selected check boxes.
However, one of my check boxes should behave as this submit button, i.e, upon selecting/deselecting this check box, the same action as the button must be triggered. Can someone please help me in doing this (or perhaps direct me to a tutorial)
I have a controller class and model.
Thanks you
EDIT
The program look like:
#using(Html.BeginForm("controllername", FormMethod.Get)) {
#html.CheckBox("check1");
#HTMl.Checkbos("check2");
<input type="submit" value="Submit" />
}
Everything else is pretty much handled in the controller.
You can use javascript to listen to the check event of your check box and then invoke the form submit.
Assuming your markup of view is like this
<form id="yourFormId" action="user/post">
<input type="checkbox" class="optionChk" value="1" /> One
<input type="checkbox" class="optionChk" value="2" /> Two
<input type="checkbox" class="optionChk" value="3" /> Three
</form>
<script type="text/javascript">
$(function(){
$(".optionChk").click(function(){
var item=$(this);
if(item.val()=="2") //check your condition here
{
item.closest("form").submit();
}
});
});
</script>
EDIT : As per the question edit.
Change the CheckBox Helper method usage like the below to add a css class to the checkbox so that we can use that for the jQuery selection.
#Html.CheckBox("check1",new { #class="optionChk"})
imagining you have something like this:
#using(Html.BeginForm()) {
<label class="checkbox">
<input type="checkbox" name="chb_a" id="chb_a"> Option A
</label>
<label class="checkbox">
<input type="checkbox" name="chb_b" id="chb_b"> Option B
</label>
<label class="checkbox">
<input type="checkbox" name="chb_c" id="chb_c"> Option C
</label>
<label class="checkbox">
<input type="checkbox" name="chb_d" id="chb_d"> Option D
</label>
<button type="submit" class="btn">Submit</button>
}
you can write a simple jQuery to complement:
$(".submit").click(function() {
// find the <form> the element belongs and submit it
$(this).closest('form').submit();
});
and with this, all you need is to add a class named submit to any checkbox or more buttons if you want them to submit
for example:
<label class="checkbox">
<input type="checkbox" name="chb_e" id="chb_e" class="submit"> Option E
</label>
You can bind the click events on the checkboxes.
$( '.myCheckboxes' ).click(function () {
var clickedBox = $( this );
// now do something based on the clicked box...
});
If you need to know which checkboxes are checked, that's just another selector.
$( '.myCheckboxes:checked' ).each(function () {
// Now you have access to each checked box.
// Maybe you want to grab their values.
});
Just bind the checkbox to a click event. Assuming you have a way of uniquely identifying the checkbox that submits the form.
$( '#formSubmitCheckbox' ).click(function() {
$( '#myForm' ).submit();
});
I have this problem :
I have a submit button defined as follows :
<input type="submit" name="actionName" value="search" />
<input type="submit" name="actionName" value="New" />
both submit buttons are included in an Ajax beginForm:
#using (Ajax.BeginForm("PFSearch", "Payer", ajaxOptions))
In the controller ... based on the actionName string provided .. i do different actions based on the value of button pressed within my Ajax befin form :
if (actionName="search")
{
//do something
}
And everything works like a charm .. until i want to add i want to add an image to the class of my submit button :
<input class="search" type="submit" name="actionName" value="search" />
<input class="search" type="submit" name="actionName" value="New" />
My search tab looks like this :
As you can clearly see my main impediment is that by adding value ... the text appears over my image.
How can i make those button act differently within my ajax begin form considering that giving value to the buttons doesn't work ? Any alternatives or workarounds are appreciated. Thanks !
Can you please give us a link to your project's demo? And try to use some margin, padding and background-position:center;
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.