The JQuery-JTable plugin has some issues with IE7. As the author has already stated on this thread, there's not much support for IE7.
Therefore, I have this problem:
When I have, for example, a description field (usually a textarea), in IE7 it will stretch the div, making the JTable look enourmous. Like this:
In every other browser (tested in Chrome, Firefox and IE 8-9), it doesn't happen:
This is the JTable fields binding:
fields: {
code: {
title: 'CND',
key: true,
create: false,
edit: false,
list: false
},
company: {
title: 'company',
list: true,
create: true,
edit: true
},
cert: {
title: 'cert',
edit: true,
create: true
},
emission: {
title: 'emission'
},
descriptions: {
title: 'descriptions',
type: 'textarea',
edit: true,
list: true,
create: true,
maxWidth: '100px',
showHint: true
}
Has anyone ever been through this kind of a problem?
I guess I can just tell the user to use Firefox or Chrome, but I want to give this a shot first.
Related
I'm facing a weird issue while using Tabulator.
I was using Tabulator V5.0.7 and everything was working fine except some callbacks, which wasn't fired at all and no errors was popping up in console.
So, I decided to open a question here, but before doing that I said "Oh well, lets first ensure no updates has been released on the package", and actually there were, so I upgraded the code to V5.0.10.
You have the js Table init here:
var Tabella = new Tabulator("#tabella-lotti-aperti", {
data:[],
layout: "fitColumns",
pagination: "local",
responsiveLayout: "collapse",
movableRows: true,
columns: [
{ title: "Nome lotto", field: "Nome", headerFilter: true },
{ title: "Codice lotto", field: "Codice", headerFilter: true },
{ title: "Data d'apertura", field: "AperturaStr", headerFilter: true },
{ title: "Avanzamento", field: "Avanzamento", formatter: "progress", formatterParams: { color: "darkorange", legend: ValoreProgress } },
{ title: `<i class="fas fa-angle-double-up"></i>`, headerSort: false, field: "Priorita", hozAlign: "center", headerHozAlign: "center", width: 50, editor: "number",
cellEdited: function (cell) {
console.log("EDITED")
}
},
{ title: `<i class="fas fa-search"></i>`, headerSort: false, formatter: IconaDettaglio, width: 25, hozAlign: "center", headerHozAlign: "center",
cellClick: function (e, cell) {
console.log("CLICK")
}
}
],
rowMoved: function (row) {
console.log("MOVED")
}
})
Of course problem is not solved, but instead of getting nothing now Tabulator.js is logging stuff to console on those events that are not being called.
In my sample reported above the cellClick is working fine, instead, the cellEdited is never called and instead I can see the following line in the console:
RowMoved also is not being fired, and this one is not logging anything or rising any exceptions, I mean... it's just doing nothing at all.
I'm following the documentation at http://tabulator.info/docs/5.0 while building up the table, but I can't figure out what I'm doing wrong. I thought that modules could matter, but I'm pretty sure isn't that cause I already tried with esm import doing the following (always version 5.0.10) but nothing changed.
import { TabulatorFull as Tabulator } from '../scripts/produzione/libraries/tabulator_esm.js'
Did you guys have any idea on this?
I can't get the point on the issue.
Thanks Tim.
As reported in the comment callbacks are now handled by an event subscription model.
More details available here Tabulator callbacks documentation
I have a Kendo UI grid where some of the columns can be filtered. For each row in that column, you can open a popup to see some details to the specific entry.
I can open the popup without any problems. But: after closing it and trying to filter any of the columns, I get the following error: JavaScript runtime error: Unable to get property 'toggle' of undefined or null reference
If I filter a column before I open a popup, it works like a charm.
If I filter a column and then open the popup, the already filtered column can be filtered again but the others not.
I don't know why I can't filter columns after opening and closing the popup.
Any ideas or hints would be really helpful. Thanks
HTML:
<div id="windoofTestOuter"><div id="windoofTest"></div></div>
<div id="processGrid"></div>
My grid:
$("#processGrid").kendoGrid({
sortable: true,
pageable: true,
selectable: true,
filterable: {
extra: false
},
dataSource: {
type: "aspnetmvc-ajax",
transport: {
read: {
url: "/Home/GetProcesses",
cache: false,
type: "POST",
dataType: "json"
},
parameterMap: function (data) {
return $.extend({}, data, { sort: data.sort, filter: data.filter });
}
},
serverPaging: true,
serverFiltering: true,
serverSorting: true,
page: "#ViewBag.ProcessPage",
schema: { data: "Data", total: "Total", model: { id: "Id" } },
pageSize: "#(#Model.MaxCountToShow)"
},
columns: [
{ field: "ErrorDateTime", title: "ProcessDateTime", width: "170px"/*, filterable: { ui: dateFilter }*/ },
{ field: "Name", title: "Processtype", attributes: { value: "type" }, width: "240px;", filterable: { ui: processtypeFilter} },
{ field: "Service", title: "Service", width: "181px;", filterable: { ui: serviceFilter } },
{ field: "Operation", title: "Operation", width: "130px", filterable: { ui: operationFilter } }
]
}).data("kendoGrid");
The link/string which shall open the popup:
function createProcessActionString(process) {
var det = '<a class="makeANiceMouse" onclick="processDetailUrl(' + process.Id + ', ' + grid.dataSource.page() + ')">Details</a>';
return det;
}
My popup:
function processDetailUrl(id, page) {
var windoof = $("#windoofTest").kendoWindow({
width: "1150px",
height: "300px",
content: det,
title: "Process Details",
actions: ["Minimize", "Maximize", "Close"],
close: function (e) {
windoof.data("kendoWindow").content(" ");
}
});
windoof.data("kendoWindow").center().open();
}
I deleted the unnecessary columns and so on..
EDIT: I tried to intitialize the filter in the filterMenuInit. After opening and closing the popup, I clicked on the filter icon of one of the columns, and I get the error : JavaScript runtime error: Unable to get property 'toggle' of undefined or null reference . The same one as before.
EDIT: I used the windoof.destroy() but the filters weren't accessable afterwards.
EDIT solution: I have a workaround for working with the filters again. I just fake a click on each of it before I open a popup. It's not beautiful but it serves me so far.
BUT It seems like everything gets kicked/killed by that damn popup. I can't even access the grid's datasource anymore.. It's strange...
I'm dealing with the same issues but got well passed the Data not being there. Check out or use onDataBound and use e.sender to get a handle to the Grid Object opposed to .data("KendoGrid") from the onClose of the popup this is what fixed it for me. I'm still trying to get my filters to work though after the pop up closes.
I'm using EXT JS 2.3 and looking at an issue that occurs with Internet Explorer 8. If you take a look at the company column in an example on this page, It is cutting off the lines that are too long such as E.I. du Pont de Nemours and Co... (just an example, not using a simple array grid; just a normal GridPanel)
That is the correct behavior I would like, which is what happens in Firefox, and later versions of Internet Explorer.
However, in Internet Explorer 8 the row is actually wrapping to take up two rows, with the last bit in the second row.
I looked in documentation for 2.3, but not finding any config options that seem to help. I tried setting autoHeight to false, but no effect. Most other questions I find are the reverse, where they want it to wrap but it doesn't.
How can I keep Internet Explorer 8 from wrapping?
Here is the javascript...
Column Model
var columnModel = new Ext.grid.ColumnModel([
{
dataIndex: 'Name',
id: 'fieldLabel',
width: parseInt(width)/4
},
{
dataIndex: 'Description',
id: 'fieldDataGrey',
width: parseInt(width)/4
}
]);
Grid Panel 1
var Grid1 = new Ext.grid.GridPanel({
id: 'Grid1',
name: 'Grid1',
store: DataStore1,
cm: columnModel,
width: parseInt(width)/2,
autoHeight: false,
collapsible: false,
frame: false,
stripeRows: false,
columnLines: true,
hideHeaders: true,
enableColumnHide: false,
disableSelection: true,
overCls: '',
loadMask: true
});
Grid Panel 2
var Grid2 = new Ext.grid.GridPanel({
id: 'Grid2',
name: 'Grid2',
store: DataStore2,
cm: columnModel,
width: parseInt(width)/2,
autoHeight: false,
collapsible: false,
frame: false,
stripeRows: false,
columnLines: true,
hideHeaders: true,
enableColumnHide: false,
disableSelection: true,
overCls: '',
loadMask: true
});
Field Set
var FieldSet = new Ext.form.FieldSet({
id: 'FieldSet',
name: 'FieldSet',
title: 'Title',
border: true,
width: width,
autoHeight: false,
labelWidth: 125,
bodyStyle: 'padding:2px; margin:0px',
style: 'padding:2px; margin:0px',
layout: 'tableform',
layoutConfig: {
columns: 2,
columnWidths:[.5, .5]
},
items: [
Grid1,
Grid2,
{
labelWidth: 125,
layout: 'form',
bodyStyle:'padding:2px 0px 0',
items: Label,//Didn't include label with posted code
colspan: 2
}
]
});
Try to use 2.2.1 ExtJs version, or 3.x. The problem I think lays in the Ext.js module in the Ext distribution, where browser versions are detected.
Ext.grid.ColumnModel has a config option called "renderer." I have used this function often for styling or DOM manipulation that Ext did not provide in the config options. You might try using the renderer function and returning an HTML string with custom styling that forces no wrapping on the data.
For instance,
renderer: function(value, metadata, record, rowIndex, colIndex, store) {
var style = 'overflow:hidden; white-space: nowrap; width: 100px;',
html = '<span style="' + style + '">' + value + '</span>';
return html;
}
Where "width" (100px in this case) is the width you defined in your column.
After further testing I did not find the solution I hoped for, but I did partially fix it by using a renderer rather than the fieldDataGrey id and using a column layout rather than the tableform layout.
I have a problem with the ExtJS 4 grid. I am using ExtJS 4.2.1, and whenever I load data into my grid using the loadRawData function, it automatically scrolls to the bottom, or near the bottom. Also, I am using grouping in the grid, and whenever I expand or collapse the node, it auto scrolls to the bottom again. This is really frustrating, and I can't seem to find a solution. I tried any solutions in this post from the Sencha forums, but nothing seemed to work.
This is my grid config:
gridPanel = new Ext.grid.Panel({
header: false,
title: 'Resultset',
id: 'resultTable',
width: 400,
split: true,
collapsible: true,
collapseMode: 'mini',
store: {
model: 'resultset',
autoLoad: false,
pageSize: 100,
proxy: {
type: 'ajax',
url: STORE_URL,
reader: {
type: 'json',
root: 'rows'
}
},
groupField:'tid'
},
features: [{ftype:'grouping'}],
deferRowRender: false,
columns: createColumns(),
selModel: {
checkOnly: true,
moveEditorOnEnter: false,
width: 20,
mode: 'MULTI'
},
selType: 'rowmodel',
tbar: [ createMenubar() ],
bbar:[ createPagingBar() ],
/*viewConfig: {
preserveScrollOnRefresh: true
}*/
});
And then when I load the data, I just do something like this:
var store = gridPanel.getStore();
store.loadRawData(data, false);
Any help would be appreciated!
I want to be able to reorder the rows within a single grid. Im relatively new to extjs and have tried searching for this but all the resources i find are for older ext js versions and some of properties defined in those aren't valid anymore. eg- http://www.vinylfox.com/getting-started-with-grid-drag-drop/
xtype: 'grid',
id: 'row-grid',
hideHeaders: true,
store: 'SelectedRowStore',
//enableDragDrop: true,
//ddGroup: 'rowgrid-dd',
columns: [
{
header: 'Rows',
flex: 1,
sortable: false,
dataIndex: 'DisplayName'
},
{
id: 'button-column',
dataIndex: 'ID',
sortable: true,
hideable: false,
width: 35,
renderer: PA.common.RendererHelper.renderButtonForAddRowMainGrid
}
]
I'd really appreciate any help/advice on this issue.
Take a look at the grid to grid drag-n-drop example. It works with two grids, but I'm sure it can be easily modified to allow rearranging rows within one grid.
You can follow the sencha sample as Rene said or follow this:
Add this to your grid:
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
containerScroll: true,
dragGroup: 'someuniquenameforyourgrid',
dropGroup: 'someuniquenameforyourgrid'
},
},
And, only if you need some listener to do some anction, add (inside viewConfig):
listeners: {
drop: 'onDropGrid'
}
and event handler code in your controller:
onDropGrid: function (node, data, dropRec, dropPosition) {
...
}