Prevent Kendo grid popup edit from closing on Error - kendo-ui

I am trying to handle the server error when creating/updating/deleting item from kendo grid. But when a error is thrown, the kendo grid closes no matter what.
function kendo_error_handler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
showErrorMessages(key, message);
});
//this does not work
var grid = this;
gird.one("dataBinding", function (e) {
e.preventDefault();
});
}
}
Does anybody have any other solution? e.preventDefault() doesn't work either.

This worked for me. Just in case anybody needs this.
function kendo_error_handler(gridName) {
return function (e) {
if (e.errors) {
var grid = $('#'+gridName).data("kendoGrid");
grid.one("dataBinding", function (ev) {
ev.preventDefault();
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
showErrorMessages(key, message);
});
});
}
else {
$("#errorContainer").text("");
}
}
}

is it cause it says " gird.one(" instead of "grid.one("

Related

Slickgrid example5 collapsing is not working

This is my first experience with Slickgrid and I have configured slickgrid treeview example5 in my org. Unfortunately could not make collapsing work. After debugging one thing I noticed is onRowCountChanged event is not called.
Can anyone please help me her. Thanks in advance...
I wired the event on page as --
$(function () {
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.QuoteHandler_c.getQuoteItems}','{!quote.id}',
function(result, event) {
quoteItems = result;
prepateData();
// initialize the model
dataView = new Slick.Data.DataView({ inlineFilters: true });
dataView.beginUpdate();
dataView.setItems(data);
dataView.setFilter(myFilter);
dataView.endUpdate();
// initialize the grid
grid = new Slick.Grid("#myGrid", dataView, columns, options);
grid.onClick.subscribe(function (e, args) {
if ($(e.target).hasClass("toggle")) {
var item = dataView.getItem(args.row);
if (item) {
if (!item._collapsed) {
item._collapsed = true;
} else {
item._collapsed = false;
}
dataView.updateItem(item.id, item);
}
e.stopImmediatePropagation();
}
});
// wire up model events to drive the grid
dataView.onRowCountChanged.subscribe(function (e, args) {
grid.updateRowCount();
grid.render();
});
dataView.onRowsChanged.subscribe(function (e, args) {
grid.invalidateRows(args.rows);
grid.render();
});
var h_runfilters = null;
// wire up the slider to apply the filter to the model
$("#pcSlider").slider({
"range": "min",
"slide": function (event, ui) {
Slick.GlobalEditorLock.cancelCurrentEdit();
if (percentCompleteThreshold != ui.value) {
window.clearTimeout(h_runfilters);
h_runfilters = window.setTimeout(dataView.refresh, 10);
percentCompleteThreshold = ui.value;
}
}
});
// wire up the search textbox to apply the filter to the model
$("#txtSearch").keyup(function (e) {
Slick.GlobalEditorLock.cancelCurrentEdit();
// clear on Esc
if (e.which == 27) {
this.value = "";
}
searchString = this.value;
dataView.refresh();
})
}
);
})
Thanks for your help...
I figured it out. The error was with myFilter function. Because of which the number of rows always returned same hence onRowsCountChanged not called.

How do I include an Ajax validator before sending

I managed to make this code to submit a form, it works fine, but I can not implement a validator does not need it, but it shows no message just does not send the form is empty.
I searched but could not quite do it. Can anyone help me?
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#newsletter').submit(function(){
var dados = jQuery( this ).serialize();
jQuery.ajax({
type: "POST",
url: "newsletter_cadastrar.asp?f=1",
data: dados,
success: function( data )
{
$('#resultado-form-newsletter').html(data);
}
});
return false;
});
});
</script>
<input id="nomenewslbase" name="nomenewslbase" type="text">
<input id="emailnewslbase" name="emailnewslbase" type="email">
Thank you for your attention.
If you are looking for applying jquery validation rules then you can do it like:
<script type="text/javascript">
function ValidationRules() {
}
ValidationRules.prototype.initializeSaveValidators = function() {
jQuery.validator.addMethod("csProjectName",
function(value, element) {
if ($.trim($('#txtProjectName').val()) == "") {
if ($.trim($(element).val()) != '')
return true;
else
return false;
} else
return true;
}, "Project Name is required");
jQuery.validator.addMethod("csDescription",
function (value, element) {
if ($.trim($('#txtDescription').val()) == "") {
if ($.trim($(element).val()) != '')
return true;
else
return false;
}
else
return true;
}, "Description is required");
};
ValidationRules.prototype.enableSaveValidators = function () {
jQuery.validator.classRuleSettings.csProjectName = { csProjectName: true };
jQuery.validator.classRuleSettings.csDescription = { csDescription: true };
};
ValidationRules.prototype.disableSaveValidators = function () {
jQuery.validator.classRuleSettings.csProjectName = { csProjectName: false };
jQuery.validator.classRuleSettings.csDescription = { csDescription: false };
};
jQuery(document).ready(function () {
var validationRules = new ValidationRules();
validationRules.initializeSaveValidators();
validationRules.enableSaveValidators();
$("#btnsubmit").click(function () {
applyjQueryValidation();
return false;
});
});
function applyjQueryValidation() {
var isValid = $('#newsletter').valid();
//here you can manually check for some extra validations
if (isValid==true) {
alert("valid");
//here is you ajax call
}else{
alert("invalid");
}
}
</script>
Also, you need to include jquery.validate.js
Here is the JSfiddle working example.

Return a JSON result after deleting an item

I'm developing a web application with MVC 3 and want to return a message to the user after he has deleted an item successfully.
MyWallController method looks like this:
[HttpPost]
public ActionResult DeleteAlbum(Guid albumId)
{
try
{
this.albumService.DeleteAlbum(albumId);
return Json(new { success = true, msg = "Album successfully deleted" }, JsonRequestBehavior.AllowGet);
}
catch (FPSException e)
{
return Json(new { success = false, msg = e.Message });
}
catch (Exception)
{
throw new HttpException(500, "Error while deleting album");
}
}
The link:
<a class="open-DeleteAlbumDialog" href="http://localhost:2941/MyWall/DeleteAlbum?albumId=0f49b1ad-8ec1-4fca-b8e2-28bdbf47824e">Delete</a>
The JavaScript:
$(function () {
$(document).on('click', '.open-DeleteAlbumDialog', function () {
var answer = confirm('Are you sure you want to delete this album?')
if (answer) {
$.post(this.href, function (data) {
if (data.success) {
// do something
} else {
// do something else
}
});
}
else return false;
});
However the function defined inside post is never called and what I get is a "the resource cannot be found". But the item has been deleted successfully.
All kinds of help is appreciated.
Your link is still working. You need to preventDefault:
$(function () {
$(document).on('click', '.open-DeleteAlbumDialog', function (e) {
e.preventDefault();
var answer = confirm('Are you sure you want to delete this album?')
if (answer) {
$.post(this.href, function (data) {
if (data.success) {
// do something
} else {
// do something else
}
});
}
});

Save Grid Layout Data

I have this in grid settings:
var gridLayoutRepository = new GridLayoutRepository();
settings.ClientLayout = (s, e) =>
{
Debug.Write(e.LayoutData);
if (e.LayoutMode == ClientLayoutMode.Loading)
{
e.LayoutData = gridLayoutRepository.Load();
}
else
{
gridLayoutRepository.Save(e.LayoutData);
}
};
I want to have one button for saving gridstate in database and one button for resetting it. Can you help me?
This is possible this way. In grid settings must save grid state:
settings.ClientLayout = (s, e) =>
{
if (e.LayoutMode == ClientLayoutMode.Loading)
{
if (Session["myGridState"] != null)
e.LayoutData = (string)Session["myGridState"];
}
else
Session["myGridState"] = e.LayoutData;
};
Then on button click you should save grid state like this:
<script type="text/javascript">
function SaveLayoutData() {
$.getJSON("#Url.Action("SaveLayoutData", "MyController" })", null,
function (result) {
if(result == 'success') {
alert("Layout save success");
}
});
}
</script>
In Controller:
public JsonResult SaveLayoutData()
{
_gridStateRepository.Save(Session["myGridState"]);
return Json("success", JsonRequestBehavior.AllowGet);
}
When you are loading grid you should load grid state from database and write it in Session["myGridState"]

.bind() statement not working in jQuery Easy Confirmation plugin

Did anyone who used jQuery Easy Confirmation plugin run into this issue - the button upon which the confirm box is bound loses its original click event after the first click? I had to change the plugin code to this to make it work. The difference here is between .bind and .click. Can anyone explain why? Pls. let me know if my question is not clear. Thx!
Original plugin code:
// Re-bind old events
var rebindHandlers = function () {
if (target._handlers != undefined) {
jQuery.each(target._handlers, function () {
//this is the difference
$target.bind(type, this);
});
}
}
Changed (working) code:
// Re-bind old events
var rebindHandlers = function () {
if (target._handlers != undefined) {
jQuery.each(target._handlers, function () {
//this is the difference
if(type == 'click')
$target.click(this);
else {
$target.bind(type, this);
}
});
}
}
Try using some alerts to see what's happening...
// Re-bind old events
var rebindHandlers = function () {
if (target._handlers != undefined) {
jQuery.each(target._handlers, function () {
if(type == 'click')
alert('$target.click(' + this + ');');
//$target.click(this);
else {
alert('$target.bind(' + type + ', ' + this + ');');
//$target.bind(type, this);
}
});
}
}

Resources