How submit a Kendo Upload file in async mode with a external button using javascript,
it's possible?
someone have a solution for this?
After initially selecting a file, KendoUpload will create a button you can select with $(".k-upload-selected"). Calling click on this button will POST back to your saveUrl setup in the async options. You will need to set autoUpload: false.
On select in kendUpload, you can access the Kendo generated upload button, hide it then trigger the click event in myUploadButton's click.
My original code was inside a Backbone view. Just to simplify I pulled it out. I haven’t tested the code below, however it should be fairly close to what you need.
var myUploadButton = $("#save");
var kendoUploadButton;
$("#files").kendoUpload({
async: {
saveUrl: http://uploadurl",
autoUpload: false,
},
multiple: false,
select: function (e) {
setTimeout(function () {
kendoUploadButton = $(".k-upload-selected");
kendoUploadButton.hide();
}, 1);
}
});
myUploadButton.click(function() {
if(kendoUploadButton)
kendoUploadButton.click();
});
Kendo Forum post on KendoUpload Trigger
Related
I have an issue with my Node-Webkit MenuItem click function which I believe I have narrowed down to changing the URL from within the Javascript on my loading page. I have a 5 second timer which changes the page when complete. If I set the document location to a web page on a web server (could be anything even www.google.com) from within the javascript in my loading.html page, my MenuItem Click functions do not work
$(document).ready(function() {
window.setTimeout(function() {
document.location = "http://localhost:8080/myapp/index.htm";
}, 5000);
});
If I change the document location to a html page which is contained within my app.nw package, my MenuItem click functions work and the page will change to any of my
http://localhost:8080/myapp pages
$(document).ready(function() {
window.setTimeout(function() {
document.location = "test.html";
}, 5000);
});
Here is my Node-Webkit javascript file contained within the app.nw package which places a menu bar on the application window.
var gui = require('nw.gui');
var win = gui.Window.get();
var rootMenu = new gui.Menu({ type: 'menubar'});
var sysMenu = new gui.Menu();
sysMenu.append(new gui.MenuItem({
type: 'normal',
label: 'Google',
click: function (){
Window.window.location.assign("http://localhost:8080/myapp/customers.htm");
}
}));
gui.Window.get().menu = rootMenu;
Has anyone else come across this or am I doing something the wrong way?
Thanks
I currently have a magnific popup and within that popup i have a link that opens another magnific popup. Something along the lines of:
$('.logbook-entry-details').magnificPopup({
type: 'ajax',
closeBtnInside:true,
closeOnBgClick:false,
closeOnContentClick:false,
callbacks: {
beforeOpen: function () {
$.magnificPopup.close();
},
open: function() {
console.log('Popup open has been initiated');
},
beforeClose: function() {
console.log('Popup before close has been initiated');
},
close: function() {
console.log('Popup close has been initiated');
},
afterClose :function() {
console.log('Popup after close has been initiated');
}
}
});
After reading i found that callbacks on the second popup will not be registered until i close the original popup as opening the new one just replaces the content and actually doesn't recreate a new instance.
I am trying to figure out how i could have my link within my popup close the current popup before calling the code to open the new one so it can register my callbacks.
By the way, the reason I am trying to do this is i want to reopen the original popup after closing my new popup. If you happen to have a better solution please let me know.
So just in case someone needs this answered, i had to add the following code to my new popup.
// a button that closes the popup
$('#cancel-logbook-entry-btn').click(function(){
$.magnificPopup.proto.close.call(this);
});
$.magnificPopup.instance.close = function () {
//code to show the original popup
};
And then in the original popup i had to add otherwise it will never close the popup
$.magnificPopup.instance.close = function () {
// "proto" variable holds MagnificPopup class prototype
// The above change that we did to instance is not applied to the prototype,
// which allows us to call parent method:
$.magnificPopup.proto.close.call(this);
};
I've got a nested grid within my grid, and it works perfectly, but the client doesn't like to use the arrow on the left and asked for a button to be added in order to show the child grid.
The example on the Kendo website shows how to automatically open the first row, I just want a way to expand the grid from a custom control in the same way that the left selector does it.
I've got the custom command working, and it executes the sample code, but I just need some help with the javascript required to make it work for the current row.
columns.Command(command =>
{
command.Edit().Text("Edit").UpdateText("Save");
command.Destroy().Text("Del");
command.Custom("Manage Brands").Click("showBrandsForAgency");
And the js with the standard example of opening the first row:
function showBrandsForAgency(e) {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
Please help by giving me the js required to expand the row clicked and not the first row?
* EDIT *
Modified the solution provided by Atanas Korchev in order to get it to work on only the button and not the whole row.
I'd prefer a solution that uses the function showBrandsForAgency instead of a custom funciton but this does the job:
$(document).ready(function () {
$("#grid").on("click", "a", function (e) {
var grid = $("#grid").data("kendoGrid");
var row = $(this).parent().parent();
if (row.find(".k-icon").hasClass("k-minus")) {
grid.collapseRow(row);
} else {
grid.expandRow(row);
}
});
});
You can try something like this:
$("#grid").on("click", "tr", function(e) {
var grid = $("#grid").data("kendoGrid");
if ($(this).find(".k-icon").hasClass("k-minus")) {
grid.collapseRow(this);
} else {
grid.expandRow(this);
}
});
When using jQuery on the function context (available via the this keyword) is the DOM element which fired the event. In this case this is the clicked table row.
Here is a live demo: http://jsbin.com/emufax/1/edit
Same results just Simpler, faster, and more efficient:
$("#grid").on("click", "tr", function () {
$(this).find("td.k-hierarchy-cell .k-icon").click();
});
I have a requirement to disable the escape key when the dialog is open.currently when i click the escape button the dialog closes and the transaction is submitting.I tried the following code snippet but its not working chrome.
dojo.connect(dialog, "onKeyPress", function(e){
var key = e.keyCode || e.charCode;
var k = dojo.keys;
if (key == k.ESCAPE) {
event.preventDefault();
d.stopEvent(event);
}
});
Could you please help on this..i have searched a lot and havent found a suitable solution for my problem.
Thanks inadvance..
Dojo uses the _onKey event for accessibility. You can override it by using:
dialog._onKey = function() { }
I wrote an example JSFiddle, hitting the Escape key should not work anymore.
In the event you want to override the escape key in all dialogs (rather than a particular instance), you can use dojo/aspect:
require(['dojo/aspect', 'dijit/Dialog'], function (Aspect, Dialog) {
Aspect.around(Dialog.prototype, '_onKey', function (original) {
return function () { }; // no-op
});
});
You can create an extension for the Dialog widget like this in a new file:
define(["dojo/_base/declare", "dijit/Dialog"],
function(declare, Dialog){
return declare(Dialog, {
//Prevents the 'ESC' Button of Closing the dialog
_onKey: function() { }
});
});
save the file into dojo Directory (say: dojo/my/my_dialog.js),
and instead of calling: 'dijit/Dialog', just call: 'my/my_dialog'.
this will save you the hard work of editing each Dialog call,
And the same thing to the "dojox/widget/DialogSimple" Widget.
I want to use different navigator buttons in jqGrid depending on login status.
for example: if the user is logged in then add/delete/edit button appeared.
Any ideas?
Thanks in advance.
It is possible to add buttons programmatically using the navButtonAdd method (for the navigation bar) and the toolbarButtonAdd method for the toolbar. For example:
jQuery("#grid").toolbarButtonAdd('#t_meters',{caption:"MyButton",
id: "t_my_button",
title: "Do my button action",
buttonicon: 'ui-icon-edit',
onClickButton:function(){
// Button handle code goes here...
}
});
And:
jQuery("#grid")..navButtonAdd('#pager',{
id: "t_my_button",
title: "Do my button action",
buttonicon: 'ui-icon-edit',
onClickButton:function(){
// Button handle code goes here...
}
});
For more information see the Custom Buttons on the Wiki.
Anyway, once this code is in place, you can detect login status server-side. Then use this knowledge to generate client code that only adds the buttons to your grid if the user is supposed to have access to them.
You can also use for example userdata (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#user_data) to send information about buttons which you need to have in the navigator. userdata should be set by server. Then with respect of:
var navGridParams = jQuery("grid_id").getGridParam('userData');
// var navGridParams = { edit: false, add: false, search: true }
you can get the data set by the server.
Now the typical call like:
jQuery("grid_id").navGrid('#pager', { edit: false, add: false, search: true });
You should place not after creating of jqGrid, but inside of than inside of loadComplete. So the code could looks like following:
var isNavCreated = false;
jQuery('#list').jqGrid({
// ...
loadComplete: function () {
var grid = jQuery("grid_id");
if (isNavCreated === false) {
isNavCreated = true;
var navGridParams = grid.getGridParam('userData');
grid.navGrid('#pager', navGridParams);
}
},
// ...
});
Another option that I see, is to use cookie instead of userdata to send information about navGridParams back to the client.