We Keep Coding

DatePicker Does Not Respect Form Reset

I have an asp.net form with various textboxes and kendo datepickers. I allow the user to fill in the form and if they decide to start again I have a reset button for them.
The reset button should reset the form to its original model data. To be clear I don't want to reset the form to blank values, I want to reset all the inputs to their original model values.
This works nicely for the textboxes however after hitting the reset button the datepicker simply displays a "d" and not the original model value.
I use the following javascript/jquery to reset the form:
$(this).closest('form')[0].reset();
Here is my extract form code with the datepicker:
<tr>
<td><label asp-for="Aircraft.SerialNumber" class="frm-label"></label></td>
<td>
<input asp-for="Aircraft.SerialNumber" autocomplete="off" class="k-textbox k-state-disabled" style="width:400px" disabled />
<span asp-validation-for="Aircraft.SerialNumber" class="text-danger"></span>
</td>
</tr>
<tr>
<td><label asp-for="Aircraft.ManufactureDate" class="frm-label"></label>
</td>
<td>
<kendo-datepicker name="DatePicker" for="Aircraft.ManufactureDate" class="" style='width: 400px;' />
<span asp-validation-for="Aircraft.ManufactureDate" class="text-danger"></span>
</td>
</tr>
I'm not sure wether this problem lies with the telerik widget or my jquery/javascript code so I have also posted here

I tried with code sample :https://demos.telerik.com/aspnet-core/datepicker/tag-helper
And using :
$("#FormID").trigger("reset");
It can successfully reset datetimepicker to default model value :
<kendo-datepicker name='datepicker'
for="OrderDate"
style='width: 100%;'></kendo-datepicker>
But not work for datetimepicker which set with static value(change to format string) :
<kendo-datepicker name="monthpicker"
start="CalendarView.Year"
depth="CalendarView.Year"
format="MMMM yyyy"
value='DateTime.Parse("November 2011")'
style="width: 100%;"></kendo-datepicker>
But you can always set the value for that(store value form model/viewbag in hidden field) :
$("#monthpicker").val("November 2013")
EDIT :
So as a workaround , you can add hidden field :
<input type="hidden" id="DeOrderDate" asp-for="OrderDate"/>
And then use Jquery to re-bind the value :
$("#FormID").trigger("reset");
$("#OrderDate").data('kendoDatePicker').value($("#DeOrderDate").val())
That should work for special scenario .

GridView WebForm having multiple checkboxes per row but only 1 per row is allowed to be checked

I have code in which a gridview in asp.net webforms spits out 3 checkboxes of which I would like to have Jquery easily traverse through the ID's and ONLY allow 1 checkbox per row to be checked.
They will Always have the same name just that the ending numbers will increase thus row 1 might not have a number, but then ending in 1 then ending in 2 , then they all end of 3 etc...
I could do this regretfully long way of writing a ton of javascript/jquery in which I check for each specific checkbox and those that end in 1, those cannot have any others ending with 1 to be checked, they have to be unchecked.
I was thinking about regex in which I check the beginning of the ID and then the end of the ID and making sense that per ID having "chkCtrl" AND ending with a unique number like "1" that the specific box being checked will uncheck the other "chkCtrl" ending in 1 . Thus Out1 , Y1 , N1
I'm sure that there IS a fast way to do this I just cannot seem to find an example of it.
Example
<table>
<tr>
<td>Out</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<td>
<input id="MainContent_chkCtrlOut" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
<td>
<input id="MainContent_chkCtrlY" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
<td>
<input id="MainContent_chkCtrlN" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
</tr>
<tr>
<td>
<input id="MainContent_chkCtrlOut1" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
<td>
<input id="MainContent_chkCtrlY1" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
<td>
<input id="MainContent_chkCtrlN1" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
</tr>

This can easily be done by writing a couple of lines of jquery. For example see the code below.
$('input:checkbox').click(function(){
$(this).closest('tr').find('input:checkbox').removeProp('checked');
$(this).prop('checked',true);
});
jsFiddle: https://jsfiddle.net/taleebanwar/a3qk0kc1/1/
Edit
As Tom Stickel has mentioned in the comments using removeProp is a bad idea. It may not work in jquery 2.*. Refer Tom Stickel's answer for a better way to do this.

The selected answer will work in older jquery, if you changed that selected answer jquery version to a new version the checkboxes do not work.
.removeProp is bad idea https://api.jquery.com/removeProp/
Taleeb was very close however, I would say to edit that one line.
$('input:checkbox').click(function () {
$(this).closest('tr').find('input:checkbox').prop('checked', false);
$(this).prop('checked', true);
});

Unable to uncheck checkbox from chrome

I am trying to check/uncheck a checkbox/radiobutton both from the table cell as well as the actual checkbox /radiobutton
I have written this below code to select a checkbox/radiobutton from table cell
Please refer code pen for actuall code.
The code works fine for IE 11 browser but not in Chrome. If i select the table cell then the checkbox is selected but in chrome when i check on the actual check box nothing happens .
I think it is the checkbox internally calls the PropagateBelow method.
Check/Uncheck check box for chrome(Select on the CHECKBOX itself on TABLE CELL works fine)
<table border="1">
<tr>
<td onclick="PropagateBelow(this);" style="width:100px;">
<input type="checkbox" id="test" value="Test123" />
</td>
</tr>
function PropagateBelow(tableCell) {
alert(tableCell);
var radioButtons = tableCell.getElementsByTagName('input');
for (var i = 0; i < radioButtons.length; i++) {
var radioButton = radioButtons[i];
if (radioButton != null && radioButton != undefined) {
if (radioButton.type == 'radio' || radioButton.type == 'checkbox') {
radioButton.click();
}
}
}
}

Not quite sure what the exact misbehavior is you're observing. What happens when I test your code is that when clicking the cell, PropagateBelow(this) is called which activates/deactivates the checkbox, based on its current state. When I click the checkbox, the checkbox is ticked, but then the click event bubbles up, again triggering PropagateBelow(this) which in turn unticks the checkbox again.
If you want to prevent that, you have to stop the propagation of the event when you click on the checkbox, like
<table border="1">
<tr>
<td onclick="PropagateBelow(this);" style="width:100px;">
<input type="checkbox" id="test" value="Test123" onclick="cancelPropagation();" />
</td>
</tr>
</table>
and then implement cancelPropagation() as follows
function cancelPropagation(ev){
var event = ev || window.event;
event.stopPropagation();
return false;
}
Here's your modified codepen project: http://codepen.io/anon/pen/MwEpxm
As mentioned, I'm not sure I got what you mean. If this doesn't help, let me know, so I'll delete my answer again :)

Instead of using a JavaScript function to propagate the click to all of the radio buttons, you can wrap the radio button in label which takes up the whole space of the table cell. Wrapping a radio button in a label will allow you to click anywhere in the label to toggle the radio button without having to use any JavaScript.
Please see example here: http://codepen.io/anon/pen/GJMWzb
<table border="1">
<tr>
<td style="width:100px;">
<label style="width:100%;height:100%;display:block;">
<input type="checkbox" id="test" value="Test123" />
</label>
</td>
</tr>
</table>

Funnily enough this does work fine for me in Chrome, but as a general rule it's better to set the checked property to true on checkboxes instead of trying to simulate clicks.
This could simply be done by replacing radioButton.click(); with radioButton.checked = true;, or if you wanted to toggle the checkbox radioButton.checked = !radioButton.checked;.
https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/checked

Jquery get different input hidden value to a link

I making a context menu and it almost done, just left this problem for me, but i have no idea to do this:
This is the JS Fiddle
Get different value from input hidden to a single link, because I want to pass it into a controller action
<table>
<tr>
<td class="element">im here
<input type="hidden" id="theid" name="theid" value="1"/>
</td>
</tr>
<tr>
<td class="element">im there
<input type="hidden" id="theid" name="theid" value="2"/>
</td>
</tr>
<tr>
<td class="element">im where
<input type="hidden" id="theid" name="theid" value="3"/>
</td>
</tr>
</table>
<div type="context" class="menu"> // link
<label class="menuitem">Cancel this app</label>
</div>
I want to pass the value to theid , for example when right click im here the link should get the hidden value = 1 and so on, any suggestion to do that ? Thanks

The mouse event object contains the target you were clicking on. So you can access that, pass it to jQuery and do whatever you want with it, eg. accessing the ID of the input.
$(e.target).find('input').attr('id');
And as the other commentators, I'm hoping that your IDs are different ;)
Edit: I re-read your question, you just want the value. So you don't need the ID theid in your markup overall (for this usecase). Getting the value from the clicked element:
$(e.target).find('input').val();
And working, see the alert(): See this jsfiddle

Jquery datepicker and a multiple on select event

I have a form with a jquery date select and radio buttons like below
<table>
<tr>
<td>
<input type="text" id="5506_datepick_1"></input>
</td>
<td>
<input id="5506_protocol_protocol_1" type="radio" value="protocol 1" name="5506[protocol]">pp1</input>
<input id="5506_protocol_protocol_2" type="radio" value="protocol 2" name="5506[protocol]">pp2</input>
</td>
</tr>
<tr>
<td>
<input type="text" id="5507_datepick_2"></input>
</td>
<td>
<input id="5507_protocol_protocol_1" type="radio" value="protocol 1" name="5507[protocol]">pp1</input>
<input id="5507_protocol_protocol_2" type="radio" value="protocol 2" name="5507[protocol]">pp2</input>
</td>
</tr>
</table>
Whenever someone selects both the inputs on each row(example: radio for 5506* and date picker for 5506*) I want to be able to trigger a function regardless of the select order.
I have tried the following (in Js Fiddle) but its useless.
Anyone have any ideas on how I can go about this unobtrusively.
Jsfiddle

Your input selector is using ^=, which matches the exact START of a value, yet your values don't start with that value. I suggest changing that to *= so it searches anywhere within the ID. Reference jQuery Docs
Second, you're forgetting a closing ' quote for that selector.
That fixes the selector issues for activation. Now you just need to trigger a common function to check if both Date and Radio (in the same line) have been filled out.
Fixed JSFiddle
This activates the checkProtocol() function when a date is selected and passes the input text element along to it.
$(this).datepicker({
onSelect: function() { checkProtocol( this ) }
});
This activates the checkProtocol() function when a radio button has been selected for that group and passes that element along as a parameter.
$("input[id*='protocol_protocol']").change( function() { checkProtocol(this) } );