How do know Kendo grid.savechanges() method is success or fail - asp.net-mvc

I have a kendo MVC grid in a page.in that page i have button. when i click button i want to open a kendowindow popup.
so here is my issue.
when i am clicking that button am saving grid values and i am opening kendo window popup. so if i have a errors in grid then i dont want to open kendo window popup. how to achieve this. below is my button click code.
$("#btnAddProject").click(function (e) {
var grid = $("#Grid").data("kendoGrid");
grid.saveChanges();
var myWindow = $("#AddProjectWindow");
myWindow.data("kendoWindow").open();
myWindow.data("kendoWindow").center();
});
Here am included below datasource events.
events.Error("error_handler").RequestEnd("gridRequestEnd")
but these datasources functions are calling after click event finish.
but i want wait for grid.saveChanges() to finish and check whether save is success or fail. if fail i dont want to open kendo popup. here datasource functions are calling after finishing button click function

This is because save changes is an asynchronous function. So the rest of the code will execute not matter the result of the save function.
A simple and quick method will be to set a global variable just before you call save changes. Then once the save result is received from server, the grid will fire the onRequestEnd method. You can open the popup window there if the global variable is set.
$("#btnAddProject").click(function (e) {
var grid = $("#Grid").data("kendoGrid");
isSavingChanges = true;
grid.saveChanges();
});
function gridRequestEnd(e) {
if (e.Response){//Response is not null means it is most probably ajax result
if(isSavingChanges == true){
isSavingChanges = false;
var myWindow = $("#AddProjectWindow");
myWindow.data("kendoWindow").open();
myWindow.data("kendoWindow").center();
}
}
}

Related

Update UI rendering in React Natives 'focus' Event Listener

I am navigating from different class objects (screens) within my React Native App. Once I navigate to a given screen, I want to execute different functions including Activity Indicators to show that the function is still running.
Therefore is set up a focus Event Listener which is called every time I navigate back to my screen. My current problem is that my Activity Indicators are not updated within the focus Event but directly after, which is not my wanted behavior as I have to wait for my functions to end without any visual indicator.
class Homescreen extends Component {
constructor(props){
super(props};
this.state = {
showIndicator: false;
}
}
componentDidMount(){
this.props.navigation.addListener('focus', this._onFocus);
}
componentWillUnmount(){
this.props.navigation.removeListener('focus', this._onFocus);
}
_onFocus = async () => {
this.setState({showIndicator: true});
asyncFunc();
};
async asyncFunc(){
//calling a function from swift which calls a C function inside DispatchQeue.main.async
//inside my C function I successfully set my ActivityIndicator to false with an Event which calls
//this.setState({showIndicator: false});
}
render(){
console.log(this.state.showIndicator); // correct value is printed while I wait inside the ```focus``` Event to finish, but the UI is not updated.
return(
{this.state.showIndicator && <ActivityIndicator/>}
)
}
}
I receive the correct current status of showIndicatorbut before the focus Event is not finished, my render does not redraw.
To me it seems like the UI won't update until I am out of my focus Event. How can I reach my goal of displaying the ActivityIndicator before the focus Event or how do I call my function right after the focus Event?
I can achieve my wanted behavior by using the blurevent and setting my ActivityIndicator visible while moving to another screen and after moving back I wait until my function is finished and remove the ActivityIndicator but this seems like a bad workaround and also I can see the ActivityIndicator when moving which might be confusing.
You should replace curly braces around this statement {this.state.showIndicator && } and check.
If it doesn't work accordingly then let me know.

Anonymous callback function to JsObject doesn't update Dart Controller until after a user action

Given the dart code
class LandingController {
bool hideDiv = false;
void doit() {
new JsObject(context['loginControls']).callMethod('fadeLogin', [() {
print(hideDiv);
hideDiv = true;
print(hideDiv);
print("WTF");
}]);
}
}
which calls the JS:
var loginControls = function() {
this.fadeLogin = function(func) {
$('#landingHeader').animate({ opacity: 0 }, 500, func);
}
};
which should affect the view:
<button ng-click="doit();">Click</button>
<div id="landingHeader">Hide me after button click</div>
<div ng-if="ctrl.hideDiv == false"><img src="assets/img/ajax-loader-small.gif">Waiting for div to disappear...</div>
After a button click and a 500 millisecond delay I see in my console a "WTF" print correctly. The div, however, is still visible. Once a user action occurs, in my case a mouse click, the div magically disappears. It seems as though the controller's value is changed, but the browser doesn't receive the change to hide the div, as I've printed the controller's value in the anonymous callback.
There is a work around, but it involves setting Dart timer's to the same fade times that you use in the javascript after the JsObject call and setting your controller's values in those Timer callbacks - gross but it works.
I think you need to call scope.apply(). I think Angular just can't recognize the value change in hideDiv when doit() is called from another zone (like JS).
You usually don't need to call scope.apply() in Angular.dart but I think this is one of the exceptions.
Is the animate function the only reason you use jQuery? It might be easier to do this with Angular.darts animation features.

Can't open Telerik Kendo window twice

I have a Kendo window which is defined as follows:
With Html.Kendo().Window().Name("tranferwindow")
.Title("Select Transfer Destination")
.Content("")
.Resizable()
.Modal(True)
.Events(Function(events) events.Open("WindowToCenter"))
.Events(Function(events) events.Refresh("transferopen"))
.Draggable()
.Width(400)
.Visible(False)
.Render()
End With
The window is opened each time by using the refresh and passing a new URL.This is to allow dynamic data to be displayed dependent on what the user clicked on a grid.
function transferitem(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wwindow.data("kendoWindow").open(); //Display waiting window while refresh happens
var twindow = $("#tranferwindow")
twindow.data("kendoWindow").refresh('/Home/TransferList?agentid=' + agentid + '&tenantid=' + tenantid + '&SessionID=' + dataItem.MediaID);
}
The Window is opened at the end of the refresh event to make sure the user doesn't see the previous content.
function transferopen() {
wwindow.data("kendoWindow").close(); //Close the 'wait' window
var twindow = $("#tranferwindow")
twindow.data("kendoWindow").center().open();
}
This all works well and the window can be closed and reopened as often as I like.
However I needed to access the resize event of the window from within the Partial View to resize the Grid which is inside the window. To achieve this I added the following to the partial view that is returned from the url.
$("#tranferwindow").kendoWindow({
resize: function (e) {
// resizeGrid();
}
});
Adding this event mapping causes the issue where I cannot open the Window more than once.
I assume I need to 'unregister' for the event somehow before closing?
Found a solution: much cleaner and no VB Razor needed :)
I changed the approach to create a new window each time I wanted to display one.
I created a div to hold the Window.
<div id="windowcontainer"></div>
Then when the user selected a command on the grid , I create the whole window appending it to the div. The key here is the this.destroy in the deactivate event.
function transferitem(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
$("#windowcontainer").append("<div id='tranferwindow'></div>");
var mywindow = $("#tranferwindow")
.kendoWindow({
width: "400px",
title: "Select Transfer Destination",
visible: false,
content: '/Home/TransferList?agentid=' + agentid + '&tenantid=' + tenantid + '&SessionID=' + dataItem.MediaID,
deactivate: function () {
this.destroy();
},
open: WindowToCenter,
refresh:transferopen
}).data("kendoWindow");
mywindow.refresh();
}
Then on the refresh function
function transferopen() {
var twindow = $("#tranferwindow")
twindow.data("kendoWindow").center().open();
}
Now I can have the event binding inside the Partial View which works fine and the window can be re opened as many times as I want. :)
Update: Adding the event binding inside the Partial View stops 'Modal' from working. Working on trying to fix this...

Change element class on first click then click again and change back to normal

I have the following code:
for (var i=0; i<len; i++){
var benID = results.rows.item(i).ID;
$('#'+element_id).append(
"<li><a>"+results.rows.item(i).nombres+" "+results.rows.item(i).apellidos+'</a>'+
'Eliminar</li>');
$("."+page+"_dis_ben_"+benID).click(function(){
console.log("Item to disable: "+benID);
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').children('span.ui-icon').removeClass('ui-icon-check');
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').children('span.ui-icon').addClass('ui-icon-delete');
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').addClass('ui-btn-inner-red');
$(this).removeClass(page+"_dis_ben_"+benID).addClass(page+"_enable_ben_"+benID);
});
$("."+page+"_enable_ben_"+benID).click(function(){
//NOT WORKING
console.log("Item to enable: "+benID);
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').children('span.ui-icon').removeClass('ui-icon-delete');
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').children('span.ui-icon').addClass('ui-icon-check');
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').removeClass('ui-btn-inner-red');
$(this).removeClass(page+"_enable_ben_"+benID).addClass(page+"_dis_ben_"+benID);
});
}
I have a list that is split in two, the right part being a button, to accept or reject. What I am attempting to do is that the check button, when clicked changes color and becomes a delete button, also performs an action. That I have been successful at it.
Now th problem is that I want to get it back to a check button, but as it is dynamically created I it doesn't trigger when I click the "delete" icon or the *_enable_ben_*. I assume it is because when I create the event the class/element doesn't exist yet.
Do you have any ideas?
Use .on
http://api.jquery.com/on/
var selector = "."+page+"_enable_ben_"+benID;
$("#yourList").on("click", selector, function(event){
//Insert handler code
});
Found the solution to the last question in the comment right here in stackoverflow:
jQuery Mobile click events on dynamic list items

how to add standard textbox command to jqgrid context menu

If context menu is added to jqGrid using Custom values to Context Menu Items in JQgrid and text filed inline editing is used, textbox standard context menu is not available, it is replace with jqGrid context menu.
How to add standard textbox context menu commands ( Undo, Cut, Copy, Paste, Delete, Select all ) to jqGrid conext menu or how to show standard context menu for textbox inline editing?
Update
On inline edit, if standard menu is opened by right clicking on yellow background or in autocomplete box and after that standard browser context menu is opened, custom menu is not closed, two menus appear.
How to fix this ?
It's not easy to implement in context menu commands like "Copy", "Paste", ... so I decide to modify my demo from the answer on your previous question. In the new demo the context menu appears only if the page contains no selected text.
The first problem is that the original code of the jquery.contextmenu.js contains the following code fragment:
$(this).bind('contextmenu', function(e) {
// Check if onContextMenu() defined
var bShowContext = (!!hash[index].onContextMenu) ? hash[index].onContextMenu(e) : true;
if (bShowContext) display(index, this, e, options);
return false;
});
So the contextmenu handler return always false and prevent creating of the standard context menu. I fix the code to the following (you can download full modified code here):
$(this).bind('contextmenu', function(e) {
// Check if onContextMenu() defined
var bShowContext = (!!hash[index].onContextMenu) ? hash[index].onContextMenu(e) : true;
currentTarget = e.target;
if (bShowContext) {
display(index, this, e, options);
return false;
}
});
The code of createContexMenuFromNavigatorButtons functions described here I modified
onContextMenu: function (e) {
var rowId = $(e.target).closest("tr.jqgrow").attr("id"), p = grid[0].p, i,
lastSelId;
if (rowId && getSelectedText() === '') {
...
return true;
} else {
return false; // no contex menu
}
}
to use getSelectedText() and to create the context menu only if no text is selected. As the result you will be see your custom context menu only if no text is selected and see the standard context menu (which depend on web browser) if the text selection exist:
UPDATED: I modified my bug report about jquery.contextmenu.js with additional information based on the answer. I hope that the changes will be soon in the main code of jquery.contextmenu.js included in the plugins subdirectory.
UPDATED 2: How you can see here all the fixes are already in the main code of jqGrid on the github and in included in the jqGrid 4.3.
UPDATED 3: If you want to have the standard context menu for all enabled <input type="text" ...>, <input type="textarea" ...> and <textarea ...> elements you should just modify a little the code inside of onContextMenu callback. For example
onContextMenu: function (e) {
var p = grid[0].p, i, lastSelId,
$target = $(e.target),
rowId = $target.closest("tr.jqgrow").attr("id"),
isInput = $target.is(':text:enabled') ||
$target.is('input[type=textarea]:enabled') ||
$target.is('textarea:enabled');
if (rowId && !isInput && getSelectedText() === '') {
...
see one more demo where inline editing will be activate by double-click.

Resources