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;
}
Related
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
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'm trying to populate a SELECT using jQuery and after it's populated set the value i want.
I'm working with ASP.NET MVC 5.
The problem is the value doesn't get set
Here's my code:
$(document).ready(function () {
//DropDownLists Initialization
ListCategories(); //Populates the dropdownlist
PreviousCategory(); //Sets DropDownList value to previous state (posted value)
});
function PreviousCategory() {
var previousCategory = $("#PreviousCategory").val();
if (previousCategory != null && previousCategory != '') {
$("#IdCategory").val(previousCategory);
}
}
$("#PreviousCategory") is a hidden input wich gets it's value server-side after a postback with the next code:
#if (ViewBag.Category!=null)
{
#Html.Hidden("PreviousCategory",(object)ViewBag.Category);
}
Both functions work separately, the DropDownList gets populated flawlessly, but the value doesn't get set.
If i trigger PreviousCategory() from another event (for example a button click), the value gets set perfectly.
I didn't think it was necessary to post ListCategories() code since it works well and you can just assume it fills the dropdownlist, though if anyone find it necessary let me know and i'll edit the post.
EDIT:
Here is ListCategories() code:
function ListCategories(){
_idOrganigrama = $("#IdOrganigrama").val()
_idTipoPedido = $("#IdTipoPedido").val()
data = { idOrganigrama: _idOrganigrama, idTipoPedido: _idTipoPedido }
$.post("ListCategories/", data, function (categoryList) {
$("#IdCategoria").empty();
$(categoryList).each(function () {
$("<option />", {
val: this.Id,
text: this.Descripcion
}).appendTo($("#IdCategory"));
});
});
}
By the way...$("#IdCategory") is the select.
The problem seems to be in the ListCategories where you might be using a async function like ajax to fetch data from server and populate the select.
So use a callback based solution like this
$(document).ready(function () {
//DropDownLists Initialization
ListCategories(PreviousCategory); //Populates the dropdownlist
//Sets DropDownList value to previous state (posted value) after the values are loaded
});
function PreviousCategory() {
var previousCategory = $("#PreviousCategory").val();
if (previousCategory != null && previousCategory != '') {
$("#IdCategoria").val(previousCategory);
}
}
function ListCategories(callback) {
//your ajax request to populate the select
$.ajax({}).done(function () {
//populate the select
//then at the last call the callback method which will set the value
callback()
})
};
i have following direct event Handler in Code-Behind:
public void changeBlock(string blockname)
{
IntraNetEntities ent = new IntraNetEntities();
var query = from x in ent.Mailings_blocked where x.blocked == blockname select x;
if (query.Count() == 0)
{
Mailings_blocked add = new Mailings_blocked();
add.blocked = blockname;
ent.AddToMailings_blocked(add);
}
else
{
Mailings_blocked del = ent.Mailings_blocked.Single(c => c.blocked == blockname);
ent.DeleteObject(del);
}
ent.SaveChanges();
updateStore();
Grid_Business.RefreshView();
Grid_Mailing.RefreshView();
}
But when the Event is Triggered, the database gets updated, just like the store, but the RefreshView() is not correctly executed. when clicking any other Button for the same utility (this is a rowCommand) the view gets updated to desired state of one click earlier.
well i did not find out why, but i found out how to fix:
<DirectEvents>
<Command OnEvent="GridCommand" Success="GridID.reload(); GridID.render();">
</DirectEvents>
Calling the reload and render to after will not necessarily help, if the response time is high, because then after gets fired before success
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.