I am using telerik MVC control and I am having a popup window and I want to close the pop up window by firing click event from my cancel button on the popup window .
Can someone tell me how should I do it ?
This is what I did
<input type="button" value="Cancel" onclick="onClose()" />
and my java script is like this
<script type="text/javascript">
function onClose() {
window.close();
}
</script>
but when I do that I get a confirmation box asking me whether I want to close the window and If I select yes my browser window is closed.
I just did a similar thing with the asp.net-ajax window from telerik.
They have demos out that helped me.
Try http://demos.telerik.com/aspnet-mvc/window/clientsideapi for the mvc controls
You need to get a handle of the object
function GetRadWindow() {
var oWindow = null;
if (window.radWindow) oWindow = window.radWindow;
else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
return oWindow;
}
Then you can call close on the rad window object
function windowClose(reload) {
var oWindow = GetRadWindow();
oWindow.close();
}
Related
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();
}
}
}
I'm working with angular-google-map.when marker is clicked info-window will open and hides previos window when other marker is clicked.now I want to close the info window when mouse clicked on map .
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [styles]="styles" [disableDefaultUI]="false" [zoomControl]="true"
[scrollwheel]="false" [streetViewControl]="false" [fitBounds]="false" (zoomChange)="onagmZoomChange($event)">
<agm-marker *ngFor="let c of markers; let i = index" (markerClick)="clickedMarker(infowindow, i)" [latitude]="c.location_details_lat"
[longitude]="c.location_details_lon" [iconUrl]="m.icon">
<agm-info-window #infowindow [maxWidth]="320" >
<div class="info-header">
<h2>add: {{ c.add }}</h2>
</div>
</agm-info-window>
</agm-marker>
</agm-map>
Add a handler for the mapClick event on the AgmMap that checks if you have an open info-window, and if you do, close it. Since you have already implemented a handler to have only a single info-window open, you probably have a variable holding the window that is open, something like:
private singleInfoWindow: AgmInfoWindow = null;
Your handler for the AgmMap mapClick event can close that infoWindow:
if (this.singleInfoWindow) {
this.singleInfoWindow.close();
this.singleInfoWindow = null;
}
Best solution is to use the closeOnMapClick property option on your instance of snazzy-info-window:
[closeOnMapClick]= "true"
This is taken from documentation of closeOnMapClick, where you can read further: https://github.com/atmist/snazzy-info-window#closeonmapclick
How can I make edit button work in a data table in angular 7. I would also like to know how to load a component on button click,
Ok here is my idea to acheive it
First for a button to work we use (click)
<button (click)="toggledata()">Show</button>
<demo-component *ngIf="value"></demo-component>
.ts
value = false;
toggledata() {
this.value = !this.value;
}
I am using Kendo UI editor for my project (MVC 4 application).
In the button click event I need to display the editor text in another div once user enters the text and clicks on the preview button.
How do I do this?
Try this:
function getClick(e) {
try { //the name of your editor
var editor = $("#editor").data("kendoEditor");
var editorContent = editor.value();
alert(editorContent);
//Do Your stuff here
}
catch (e) { }
}
then call with a button
<button class="k-button" id="btnPreviewContent" onclick="getClick()">PreviewEditor Content</button>
I have the following scenario:
I have a button\link with a image inside like this:
<button type="submit" id="myButton" class="button"><img src="../../Content/images/check.png" id="defaultImage" />
SaveData!!!</button>
We are OK here! Now what I need to do is:
I want on the click that the image change for a loading element that is previously loaded in the page like this:
<img id="loadingImage" src="../../Content/images/loader.gif" style="display: none;" alt="loading"/>
And then when the load complete turn back the old button image, I ended with this code:
function loader() {
var $button = $('#myButton');
if (btnState == '1') {
$button.find('img').hide();
$button.prepend($('#loadingImage'));
$('#loadingImage').css({ 'display': 'inherit' });
btnState = '0';
}
else {
$button.find('img').hide();
$button.prepend($('#defaultImage'));
$('#defaultImage').show();
btnState = '1';
}
}
This does the trick for ONE SINGLE button(since I pass its ID in the function) but, when I have for example a grid with a button on each line, I found inviable when managing a screen with many buttons do this for each of then. The main question is: How can I make this method general for all buttons/links on one specific class in the page?
The goal is: Click a button, get the image and change it and stop(can be manual). I just don't wanna have to Hook ALL buttons.
You should do something like this, it will prevent the user from double submitting:
$('.button').click(function(evt) {
evt.preventDefault();
var button = this;
hideButton(button);
$('ID or CLASS').load('AJAX FILE URL', function() {
//On success, show button remove image
showButton(button);
});
});
function hideButton(button) {
$(button).hide().after('<img src="../../Content/images/loader.gif" alt="loading"/>');
}
function showButton(button) {
$(button).next('img').hide();
$(button).show();
}
All of the code above should be in the $(document).load
Your HTML should look like:
<button type="submit" class="button"><img src="../../Content/images/check.png" />SaveData!!!</button>
There is no need for Id's now on anything.