I would like to use a toggle button in my toolbar but I can't find out how to retrieve the state.
Could someone explain me how to do that?
<%= Html.Kendo().ToolBar()
.Name("ToolBar")
.Items(buttonsItem =>
{
buttonsItem.Add().Type(CommandType.Button).Text("Unconfirmed").Id("isConfirmed").Togglable(true).Toggle("isConfirmed");
})
%>
function isConfirmed(e) {
if (document.getElementById("isConfirmed").checked == true)
{
alert("yes")
}
else
{
alert("no")
}
Regards
In the toggle event itself you can look at e.checked to determine the toggle state.
In this example I am also changing the text of the button depending on the checked state:
function isConfirmed(e) {
var text = e.checked ? "Confirmed" : "Unconfirmed";
e.target.text(text);
alert(text);
}
If you want to get the state later (e.g. when a submit button is clicked), you can check the selected option of the button object ($("#isConfirmed").data("button").options.selected):
$("#btnIsConf").on("click", function(){
if ($("#isConfirmed").data("button").options.selected){
alert("Yes");
} else {
alert("No")
}
});
DEMO
You do not need to look the dom element back up to determine the state i.e. the checked property.
It is available in your e parameter as follows:
function isConfirmed(e) {
if (e.checked) {
alert("yes")
}
else {
alert("no")
}
}
Screen Grab
Related
Using Kendo in an MVC application. I have a grid that shows a few rows. Some are editable, some are not. Some are deletable, some are not.
So, I defined events for this in the MVC Razor layout:
.Events(o => {
o.Edit("onGridEdit");
o.Remove("onGridRemove");
})
Then I defined JavaScript to handle this. My first issue is that the deletion event fires after delete. I need to fire beforehand and prevent it. I also want to prevent the confirmation popup.
The edit event behaves as expected. But it still does not work. Here's what I did:
function onGridEdit(e) {
var grid = $("#grid").data("kendoGrid");
var canEditLine = #(someObj.SomeProperty ? "true" : "false");
if (!canEditLine) {
grid.cancelRow();
alert("You do not have rights to modify this line.");
}
}
The result is that the cell being edited is locked, and the user never sees it opened. The alert fires as expected. The problem is that the entire original row gets rendered inside this column rather than this single column getting updated. Here's a screenshot:
Can anyone help with this? I don't want to cancel all row changes; just the row the user is trying to mess with.
EDIT:
Based on the answer below, here's the updated JavaScript code. The styles and databound events below I used as indicated.
function onUserAssignGridDataBound(e) {
var grid = this;
var canDelete = #(userRights.CanDeleteLockedLines ? "true" : "false");
var canEdit = #(userRights.CanEditLockedLines ? "true" : "false");
grid.tbody.find(">tr").each(function () {
var dataItem = grid.dataItem(this);
if (dataItem) {
if ((dataItem.IsReceived) && (!canDelete)) {
$(this).find(".k-grid-delete").css("visibility", "hidden");
}
if ((dataItem.IsLocked) && (!canEdit)) {
dataItem.fields["Description"].editable = false;
dataItem.fields["Quantity"].editable = false;
dataItem.fields["Price"].editable = false;
}
}
});
}
Hide the remove button bases on grid data on databound event
**********************Grid*******************************
.Events(e => e.DataBound("onUserAssignGridDataBound"))
*************************script****************************
function onUserAssignGridDataBound(e) {
var grid = this;
grid.tbody.find('>tr').each(function () {
var dataItem = grid.dataItem(this);
if (dataItem != null) {
if (dataItem.Role.RoleId != 2) {
$(this).find('.k-plus').addClass('hideCell');
}
}
});
}
****************************Styles CSS**********************
.hideCell {
visibility:hidden;
}
.showCell {
visibility:visible;
}
I have a form with a dropdownlist. Based on the selected item in the dropdown respective chekbox list appears and other checkboxlist disappears. How can you accomplish this using JQuery?
Here's Javascript that you should be able to easily adapt to your specific elements:
$('#dropdownlist').on('change', function () {
if ($(this).val()) {
if($(this).val() === "some value") {
$('#somecheckboxgroup').show();
$('#someothercheckboxgroup').hide();
}
else if($(this).val() === "some other value") {
$('#somecheckboxgroup').hide();
$('#someothercheckboxgroup').show();
}
}
});
Essentially, you just want to run a function every time the dropdownlist changes, and in it, check the currently selected value and then run your desired code based on the observed value.
Here is a really basic example - http://jsfiddle.net/jayblanchard/G8z3r/
The code can be shortened up just by using different selectors, id's and classes but I wanted to give you a basic idea on how this works.
$('select[name="showbox"]').change(function() {
if('foo' == $(this).val() ) {
$('div').hide(); // make sure all divs are hidden
$('#checkboxA').show(); // show the right one
} else if ('bar' == $(this).val() ) {
$('div').hide(); // make sure all divs are hidden
$('#checkboxB').show(); // show the right one
} else if ('both' == $(this).val() ) {
$('div').show(); // sow all divs
} else {
$('div').hide();
}
});
I am trying to use a dropdown which as 2 values yes/no to change whether a field is displayed or not. I still want element to exist just no visible.
I am using Razor and MVC3 to render the page.
So I have tried the following code:
$(function () {
$("DiscountOn").change(function () {
if ($("DiscountOn").Value == 0) {
$("DiscountPercentage").fadeOut('fast');
}
else {
$("DiscountPercentage").fadeIn('fast');
}
});
});
DiscountOn is the dropdown which has values of either 0 or 1, text no or yes respectively. I want it to make DiscountPercentage dissappear when DiscountOn is turned to 0 and reappear when DiscountOn is turned 1. And for value added, if you can make it appear or or disappear when the page has loaded depending on which option is set in the dropdown that would be excellent.
$("DiscountOn")
does not select the element properly. If the ID of the element that you wish to select then you need to either do:
document.getElementById("DiscountOn") // Pure JS
or
$("#DiscountOn") // jQuery
Your other problem is how you are getting the value. You either need to do this
.value // Pure JS
or
.val() // jQuery
Remember that JS is case-sensitive!
$(function () {
$("#DiscountOn").change(function () {
if ($(this).val() == '0') {
$('#DiscountPercentage').fadeOut('fast');
}
else {
$('#DiscountPercentage').fadeIn('fast');
}
});
});
And for value added, if you can make it appear or or disappear when
the page has loaded depending on which option is set in the dropdown
that would be excellent.
Ideally this should be done on the server side and not using any javascript. You already know the selected value of the dropdown, so you could dynamically add some CSS class around the DiscountPercentage element to show/hide it.
The problem is with the selector
If DiscountOn and DiscountPercentage are IDs or the element. Prefix it with # if they are class then with .
$(function () {
$("#DiscountOn").change(function () {
if ($("#DiscountOn").val() === 0) {
$("#DiscountPercentage").fadeOut('fast');
}
else {
$("#DiscountPercentage").fadeIn('fast');
}
});
});
We are using Sharepoint 2007 In which on master page we have Asp Image button. We want to set this image button as default button for enter key press. We tried some ways but not getting success.
Turned out more complicated than I thought but possible nonetheless. First of all, make sure the ID of your control is static:
<asp:ImageButton runat="server" ID="MyImageButton" ClientIDMode="Static" ImageUrl="pic.gif" OnClick="ImageButtonClicked" />
Now what you need is the following JavaScript code in your .aspx or .master page:
<script type="text/javascript">
var DEFAULT_BUTTON_ID = "MyImageButton";
// Mozilla, Opera and webkit nightlies currently support this event
if (document.addEventListener) {
// A fallback to window.onload, that will always work
window.addEventListener("load", HandleDefaultButton, false);
// If IE event model is used
} else if (document.attachEvent) {
// A fallback to window.onload, that will always work
window.attachEvent("onload", HandleDefaultButton);
}
function HandleDefaultButton() {
var inputs = document.getElementsByTagName("input");
//attach event for all inputs
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
//maybe already got handler so add instead of override
if (document.addEventListener)
input.addEventListener("keypress", InputElement_KeyPressed, false);
else if (document.attachEvent)
input.attachEvent("onkeypress", InputElement_KeyPressed);
}
}
function InputElement_KeyPressed(evt) {
if (DEFAULT_BUTTON_ID && DEFAULT_BUTTON_ID.length > 0) {
//old IE event module
if (typeof evt == "undefined" || !evt)
evt = window.event;
var keyCode = evt.keyCode || evt.which;
if (keyCode === 13) {
var oButton = document.getElementById(DEFAULT_BUTTON_ID);
if (oButton) {
oButton.click();
return false;
} else {
alert("---DEBUG--- default button is defined but does not exist (" + DEFAULT_BUTTON_ID + ")");
}
}
}
return true;
}
</script>
You just need to define the real ID as the value of DEFAULT_BUTTON_ID and the code will automatically attach keypress event to all inputs (text, checkbox and radio) and when Enter is pressed, the button defined as default will get clicked.
As you're using SharePoint is means window.onload is already in use so we must add our own event not override it.
You can set the DefaultButton property to the id of the button you want to be default in the form tag.
I've a simple situation.
When the checkbox is checked then the textbox is shown. Unchecking checkbox will hide the textbox.
I move the value to (asp:Textbox) textboxA.text and set the (asp:Checkbox) "chkboxA" to Checked in Server side (Page load).
then my jquery code document.ready is executed.
C# code behind
protected override void OnLoad()
{ textboxA.Text = "Hello World";
chkboxA.Checked = !string.IsNullOrEmpty(textboxA.Text);
}
JQUERY CODE:
$('input[id$=chkboxA]').click(function () {
var checked_status = this.checked;
if (checked_status == true) {
$('input[id$=textboxA]').show();
}
else {
$('input[id$=textboxA]').hide();
}
});
$('input[id$=chkboxA]').click(); //this statment triggers the checkbox checked
PROBLEM:
When the page is first shown the "textboxA" is shown but the checkboxA is unchecked.
Then when I click on the checkboxA the checkbox is checked and the TextboxA remains on the screen.
Then when I click on the CheckboxA again to uncheck then the texboxA is not shown.
so the issue is on first load (first shown on the screen).
Why is the checkboxA not checked when the page is first shown while the TextboxA is shown?
what is wrong in my code?
I think easiest way is to use toggle()
try something like this
Initially set the visible false in textbox
$(".chk").click(function() {
$(".txt").toggle(this.checked);
});
Something like http://jsfiddle.net/5udtC/1880/
Here is how I would go about it:
Instead of,
chkboxA.Checked = !string.IsNullOrEmpty(textboxA.Text);
you could have a script that is executed once the page is done loading (in you markup)
<script type="text/javascript">
$(document).ready(function() {
if($('#textboxA').attr('value') != '') {
$('#chkboxA').attr("checked", "checked");
} else {
$('#chkboxA').attr("checked", false);
}
});
</script>
Then, when evaluating whether the checkbox is checked, you could use:
$('#chkboxA').click(function () {
if (this.attr('checked')) {
$('#textboxA').show();
}
else {
$('#textboxA').hide();
}
});
Try add this line :
if ($('input[id$=chkboxA]').is(':checked')) {
$('input[id$=textboxA]').show();
}
else {
$('input[id$=textboxA]').hide();
}
after :
$('input[id$=chkboxA]').click();
If you remove : $('input[id$=chkboxA]').click(); you will see that textbox will hidden.