How can I drag jqgrid edit form properly? - javascript

When I drag a edit form, the position of the form is not valid.
Always it starts from position (0,0) to the window.
Its position is not relative to mouse cursor position.
How can I fix this?
These are my code.
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
$("#jqGrid").jqGrid({
url: url,
mtype: "GET",
postData: data,
datatype: "jsonp",
colModel: [
{ label: 'd_id', name: 'd_id', width: 15, key: true, hidden: true},
{ label: 'driver', name: 'd_name', width: 30, align:"center", editable: true, editoptions: {size: 40} },
{ label: 'phone', name: 'd_phone', width: 30, align:"center", editable: true, editoptions: {size: 40} },
{ label: '', name: '' }
],
viewrecords: true,
autowidth: true,
height: '100%',
rownumbers: true,
rownumWidth: 25,
rowNum: 20,
editurl: g_base_url + 'driver/edit',
pager: "#jqGridPager",
loadError : function(xhr,st,err) {
},
loadComplete: function () {
},
onCellSelect: function(rowid, iCol, cellcontent, e) {
}
});
and my jqgrid version is 4.8, jquery version is jquery-1.11.2 and jquery-ui version is 1.11.4.
please visit jqgrid demo and click edit button ("+" symbol in the page bar) and drag edit form serveral times. You can find its position always starts at pos (0,0).
demo link is http://www.guriddo.net/demo/guriddojs/edit_add_delete/edit_template/index.html

The problem which you describes seems be a bug in Guriddo jqGrid JS 4.8.x. I tried other demos and many from there have the same problem. So I would recommend you to post bug report to Guriddo forum at least if you purchased the licence for Guriddo jqGrid JS.
I develop free fork of jqGrid under the name free jqGrid (see the readme and the wiki). You can try it directly from CDN. If you uses grid inside of jQuery UI modal dialog then you should use the latest code posted after publishing free jqGrid 4.8. The problem was reported in the answer and I included new option onTop option in free jqGrid.
$.jgrid.jqModal = $.jgrid.jqModal || {};
$.extend(true, $.jgrid.jqModal, {toTop: true});
So you can use for example the URLs http://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css, and http://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js (the locales like http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/i18n/grid.locale-en.js or http://rawgit.com/free-jqgrid/jqGrid/master/js/i18n/grid.locale-en.js are optional in free jqGrid).
I will try later to modify the code of dialogs used by jqGrid so that the situation where onTop: true will be detected and the option will be set automatically if required. I don't want to make it default because of some reasons. I analyzed the code of jqGrid 4.7 and make many changes. One problem way that all dialogs like Edit form stay in memory in jqGrid. If one close the dialog it will be just hidden. The event handler used in the dialogs, like onClick handler references DOM element of grid and other objects. There are some other disadvantages. So I make so that on closing of dialog in free jqGrid the form will be completely distorted. The default settings toTop: false makes all elements of the grid inclusive all dialogs be created as children of gbox div constructed over the grid. So one can remove from the page all elements created by jqGrid just by removing gbox. The problem is only that the overlay should be probably moved on top of the page (be children of <body>) like the dialog itself if one have the grid inside of another modal dialog. I hope I will find the perfect solution later. Till the time you can just set toTop: true option either for edit form or globally like in the code above.

Related

Unlayer editor use Range slider built-in widget

Does anyone know what is the widget name of this range selector/slider which is used in the built in button tool [check out their example]? I couldn't find any reference to this widget in their docs.
Found the answer by inspecting the property from the button tools and guessing. Following is the configuration for while registering custom tool -
autoWidth: {
label: 'Auto Width',
defaultValue: {
autoWidth: true,
width: '100%'
},
widget: 'auto_width',
}

OnDemandGrid Dojo dgrid-select event listener not called after Form is submitted

I have an dgrid/OnDemandGrid. I also have a Drop Down menu which is used to download file (XLSX, XLS, and PDF file types).
On Click of Drop Down menu item, file is downloaded.
After the download, listener which is registered on OnDemandGrid for 'dgrid-select' event does not gets called at all.
dgrid-select event listener is called if Form is Not submitted but i dont have a way to download a file without submitting the form.
This is how grid is created.
this.gridBoundaries = new (declare([Grid, Selection, Pagination, ColumnHider, Keyboard, ColumnResizer, editor]))({
// use Infinity so that all data is available in the grid
//className: "dgrid-autoheight",
showHeader: true,
collection: self.memStore,
bufferRows: Infinity,
columns: columns,
selectionMode: "single",
pagingLinks: true,
pagingTextBox: true,
firstLastArrows: true,
rowsPerPage: 100,
pageSizeOptions: [100, 150, 200],
adjustLastColumn : true,
loadingMessage: 'Loading data...',
noDataMessage: 'No data.'
},this.domNode);
this.gridBoundaries.startup();
Form Submit to download is trigger in the below code snippet
var formElement = dom.byId('exportForm');
if(formElement){
domAttr.set(formElement, "action", generateReportUrl);
domAttr.set(dom.byId("reportType"), "value", reportType)
domAttr.set(dom.byId("selectedSite"), "value", this.selectedSite.FAC_IDU)
domAttr.set(dom.byId("columnMetaData"), "value", columnMetaDatas)
domAttr.set(dom.byId("selectedMarketArea"), "value", this.selectedMarketArea.MRKT_AREA)
domAttr.set(dom.byId("tabSelected"), "value", isCustomer)
//domAttr.set(dom.byId("polygonJSON"), "value", this.polygonJSON)
domAttr.set(dom.byId("currentTimeZone"), "value", this.currentTimeZone)
domAttr.set(dom.byId("zoneId"), "value", this.zoneId)
formElement.submit();
}
I think you may be running into a peculiar and pretty terrible IE glitch where event listener bindings get shuffled after a "non-navigation" happens - by which I mean a navigation that doesn't actually send the browser window to a new location, e.g. <a href="javascript:..."> links... and file downloads.
https://connect.microsoft.com/IE/feedback/details/802397/ie9-ie10-events-can-be-sent-to-the-wrong-listeners describes the issue more specifically. (I'm pretty sure I've seen it in IE11 as well.)
To at least confirm if this is what you're running into, I'd suggest adding target="_blank" to the form element, so that it technically isn't navigating the current window.

selectize.js reload dropdown

I have a dropdown with id "selectCountry" filled by ajax and on success I just bind the Selectize.
$('#selectCountry').selectize({
create: true,
sortField: 'text'
});
When I rebind my original dropdown by ajax and try to reload/rebind or refreshed the old selectize auto complete box on success, there would be no change on old list.
Is there any way to reload or refresh selectize dropdown? I had try "clearOptions()" and "refreshOptions()".
P.S, I don't want to directly bind the selectize from ajax.
OK, now I am adding working example for this issue on jsfiddle
Please help me :( any suggestion would be great for me.
Thanks alot
Some how, I found the answer and its working here
just add this line of code and its working.
$('#select-tools').selectize()[0].selectize.destroy();
Looks like you also opened an issue on the project, which isn't, IMHO, a good usage of the issues of the project.
I answered there, I will repeat the answer here in case it can be useful to other people.
You should not re-create the Selectize component out of the original tag. You should use it to update its options, using clearOptions() as you guessed, then addOption() (despite the singular, it accepts an array).
I updated your fiddle (+1 for making one) to show this: https://jsfiddle.net/m06c56y0/20/
The relevant part is:
var selector;
$('#button-1').on('click', function () {
selector = $('#select-tools').selectize({
maxItems: null,
valueField: 'id',
labelField: 'title',
searchField: 'title',
options: [{
id: 1,
title: 'Spectrometer',
url: 'http://en.wikipedia.org/wiki/Spectrometers'
}, {
id: 2,
title: 'Star Chart',
url: 'http://en.wikipedia.org/wiki/Star_chart'
}],
create: false
}).data('selectize');
});
$('#button-2').on('click', function () {
console.log(selector);
selector.clearOptions();
selector.addOption([{
id: 1,
title: 'Spectrometer',
url: 'http://en.wikipedia.org/wiki/Spectrometers'
}, {
id: 3,
title: 'Electrical Tape',
url: 'http://en.wikipedia.org/wiki/Electrical_tape'
}]);
});
You can also do this:
$('#whateverYouCalledIt').selectize()[0].selectize.clear();
for just clearing what has been selected. It will not clear your select list.

Auto-File upload after selecting file in Sencha Touch 2.3

I have a Sencha Touch 2.3 application that I am helping develop. One of the features I want to implement is uploading a file that I then do various things with using PHP in the back-end. However, I cannot find a way that works to actually complete the upload (or even show a dialog box to select a file to upload!)
I have a navigation bar that looks like the following:
...
navigationBar: {
docked: 'top',
id: 'mainAdminToolbar',
items: [
{ ...
},
{
align: 'right',
hidden: true,
text: 'Import',
itemId: 'ImportBtn',
}
]
...
In my main controller file, I have the following:
ImportBtn: "adminMain #ImportBtn",
"adminMain #ImportBtn": {
tap: "onImportTap"
},
...
I looked at the a lot of examples (such as this one and this one), but I can get none of them to work. I believe the latter might be for a more updated version of the framework, too, but I cannot update as of right now and have to work with version 2.3
What I want to do is the following:
Have a user click the button
Have a dialog window pop up in which a user can select a file
Have the file auto-upload after being selected
Do various server-side things with the file
How can I achieve this using Sencha Touch 2.3?
Try to use
xtype: 'filefield' and it's 'updatedata' event
To select file you can write something like this
{
xtype: 'filefield',
itemId: 'ImportBtn',
listeners: {
change: function (button, newValue, oldValue, eOpts) {
alert(newValue);
}
}
}
And after selecting the file you can get it with this (It works fine in 2.4)
var file = [your-filefield].getComponent().input.dom.files[0];
Here is more about filefield
http://docs.sencha.com/touch/2.3.0/#!/api/Ext.field.File

First tab panel does not show data in grid (IE 9)

I have a tab panel and every tab has grid in it, but after loading, data in first tab is missing but it displays fine in 2nd tab , this is working in all the browsers in Extjs 4.2 but it is not working in Extjs 5.0 with IE. ( working fine in chrome ) thee is no errors on console. I am getting crazy with this issue. may be it is a bug in Extjs 5. Thanks in advance.
//main panel class
Ext.define('MyApp.view.MyView', {
extend: 'Ext.tab.Panel',
alias : 'widget.myView',
id : 'myView',
autoScroll : true,
activeTab: 0,
height: 600,
layout: {
type: 'column'
},
requires : [
'MyView.view.FirstTab',
'MyView.view.SecondTab'
],
initComponent : function() {
this.items = [
{
xtype: 'panel',
id: 'fTab',
autoScroll: true,
items: [ { xtype: 'firstTab' }]
},
{
xtype: 'panel',
id: 'sTab',
autoScroll: true,
items: [ { xtype: 'secondTab' } ]
}
];
this.callParent(arguments);
}
});
//controller
var isActivieTabSet = false;
// if store1 has data show the first tab
if(store1Count > 0) {
var tab0 = myView.down('#fTab');
tab0.tab.show();
if (!isActivieTabSet) {
searchSummaryView.setActiveTab(tab0);
isActivieTabSet = true;
}
} else {
myView.down('#fTab').tab.hide();
}
//check if store2 has data
if(store2Count > 0) {
var tab1 = myView.down('#sTab');
tab1.tab.show();
if (!isActivieTabSet) {
myView.setActiveTab(tab1);
isActivieTabSet = true;
}
} else {
myView.down('#sTab').tab.hide();
}
I see these issues with your code:
you should not set a layout on tab panel. Tab panel uses card layout internally, most likely it ignores any passed layout but if you set it it may be confusing for developers
you set ids on components - they are unique in the code you posted but it may not be true for the whole application. The general rule is not to manually set ids - you don't need them.
you overnest - you don't need to wrap 'firstTab' in 'fTab'. We always try to use the most shallow containment chain possible.
hiding tabs is very unusual. I'm not saying that it wouldn't work but if you need to hide a tab then you can use card layout with some simple switching logic. Tab panel is de-facto a card layout with tab "buttons" to switch the active card.
Otherwise the code does not give a clue why it should misbehave. I would suggest a) fix the above and, if it does not help b) prepare a showcase at https://fiddle.sencha.com so that I can run it and find the real culprit.
Thank you!!
1) Right , No need to specify the Layout on tab panel. I took this out
2) Right, it is a good practice to not add the Ids but we are nesting these components and show/hide by using these ids.
3) Right, that was the first thing that came to my mind, take out the wrapper panel from the grid and it works fine and show up the data but with this we have two issues.
a) In the Grid we are using 'pagingtoolbar' and shows at the botton (same in the whole application)
this.dockedItems = [ { xtype: 'pagingtoolbar', store: this.store, displayInfo: true,
dock: 'bottom' } ];
We are using the CARD layout and when we take out the panel this always shows at the botton even though the grid has only 5 records and It looks very weird and we don't want to put this on top (dock: 'top' )
b) Other issue iis sometime Column Header and data are not aligned
{header: 'Number', dataIndex: 'number', flex: 1 }
if i take out the flex:1 then all the columns get too narrow and half of the vertical space on the right is empty.
4) We have this use case that if grid does not have any data then don't show the tab. so we have to manually show/hide the tab.
Let me combine these classes & upload them (but it may time because I have to take out only the necessary objects :( ).
Thanks you again for your help!!
My Grid is inside the panel and this panel is inside the main tabpanel. if i removed the panel over the Gris then it works fine.
//this does not works (does not show data in first tab)
{
xtype: 'panel',
id: 'fTab',
autoScroll: true,
items: [ { xtype: 'firstTab' }]
},
//this works
{
xtype: 'firstTab'
}
I guess this is a bug in Extjs 5.0, same code works in Extjs 4.2 and also in Chrome.
OK, i found the solution, I have to add this on the grid.
bufferedRenderer: false,
In Extjs 5 it is true by default and it is not behaving right in IE when the Grid is inside a Panel with pagination. after this everything works great :) Thanks

Categories

Resources