Related
I am attempting to clone a row in ejgrid widget within essential JS 1.X Syncfusion.
I have tried various methods from old school low level JS, jQuery, and have referred to the official JS API documentation to no avail. Hoping someone out there has used this technology before...
//grid population
$('#lstSelected').ejGrid({
dataSource: [],
enableRowHover: true,
allowTextWrap: true,
allowSorting: true,
allowFiltering: false,
allowSelection: false,
allowResizing: true,
allowScrolling: true,
scrollSettings: { height: $(window).height() - 250, width: "100%" },
columns: [
{ headerText: "", template: true, templateID: "#savechktmp", width: 50, textAlign: "center", type: "string" },
{ field: "BP_ID", visible: false, isPrimaryKey: true, defaultValue: 0 },
{ field: "Package_Type", headerText: "Type", type: "string", width: 100, foreignKeyField: "value", foreignKeyValue: "text", dataSource: pkgtypes },
{ field: "Package_Description", headerText: "Description", type: "string", width: 200 },
{ field: "Customer_ID", headerText: "Customer", type: "string", width: 220, foreignKeyField: "value", foreignKeyValue: "text", dataSource: customerList },
{ field: "Subdivision_ID", headerText: "Subdivision", type: "string", width: 220, foreignKeyField: "value", foreignKeyValue: "text", dataSource: subdivisionList },
{ field: "HoursWithChildren", headerText: "Hours (*)", type: "numeric", format: "{0:N0}", width: 100 },
{ field: "Floor", headerText: "Location", width: 150, template: true, templateID: "#floortmp" },
{ field: "Location", headerText: "Room", width: 150, template: true, templateID: "#locationtmp" },
{ field: "Qty", headerText: "Qty", width: 100, template: true, templateID: "#qtytmp" },
{
headerText: "", textAlign: "center",
commands: [
{ type: "Add", buttonOptions: { width: "80%", text: "+", click: "cloneRow" } }
],
width: 130
}
],
//this is my function attempts
function cloneRow() {
//JS attempt
var tableDiv = document.getElementById('lstSelected');
var tableClass = tableDiv.getElementsByClassName('e-table')[1];
console.log(tableClass);
tableDiv.appendChild(tableClass);
resizeGrids();
}
//jQuery attempt
function cloneRow() {
var $tableBody = $('#Grid').find("tbody"),
$trLast = $tableBody.find("tr:last"),
$trNew = $trLast.clone();
$trLast.after($trNew);
var $lastRow = $("[id$=blah] tr:not('.ui-widget-header'):last");
//grab row before the last row
var $newRow = $lastRow.clone();
//clone it
$newRow.find(":text").val("");
//clear out textbox values
$lastRow.after($newRow);
//add in the new row at the end
}
}
I would like the row cloned, with full functionality of the row, not a stripped out version. I also have a demo/attempt here: http://jsplayground.syncfusion.com/dexgxk03
Query: I would like the row cloned, with full functionality of the row, not a stripped out version.
From the shared demo, we would see that you added the cloned row under the current row. Since cloned row is not updated in the dataSource, we are unable to perform the grid functions like sorting, editing, filtering etc., for the cloned row.
And also we need some additional detail regarding your requirement. So, please get back to us with the following details.
Please confirm whether you want to perform grid actions for the cloned row (i.e. sorting, filtering etc.,)
If not please explain your requirement in detail.
And also we would like to know the reason for cloning the grid row.
The requested details will help us to achieve your requirement as early as possible.
Using ExtJS 4.2.3, I have GRID PANEL with list of attachments. Grid panel has cellclick listener which start to download file after selection cell. Need to remake code for image click in column renderer (column name 'Save')
Example of current code with cell click:
FileGrid = new Ext.grid.Panel({
renderTo: "EXT-CONTENT",
width: 500,
height: 600,
listeners: {
cellclick: function (table, td, cellIndex, record, tr, rowIndex, e) {
var url = 'http://.../Attachment/Get?document_GUID=' + record.get("document_GUID");
console.log(url);
window.location = url;
}
},
Code with column 'Save' where I need to reproduce cellclick function by column renderer:
},
columns: {
defaults: { filter: true },
items: [
{
text: 'Attachname', dataIndex: 'attachment_fileName', width: 395, cellWrap: true,
},
{
text: 'Save', width: 100, align: 'center', sortable: false, menuDisabled: true, cellWrap: true,
renderer: function (val) {
return '<a href="http://.../Attachment/Get?document" onclick="????">' + "<img src='/APPLICATION/Images/Save24.gif'/>" +
'</a>';
}
},
]
},
store: Ext.data.StoreManager.lookup('FileStore')
});
You need to use actioncolumn for this.
In this FIDDLE, I have create a demo using your code and put modification. I hope this will help or guide you to achieve your requirement.
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone', 'document_GUID'],
data: {
'items': [{
'name': 'Lisa',
"email": "lisa#simpsons.com",
"phone": "555-111-1224",
"document_GUID": 123
}, {
'name': 'Bart',
"email": "bart#simpsons.com",
"phone": "555-222-1234",
"document_GUID": 124
}, {
'name': 'Homer',
"email": "homer#simpsons.com",
"phone": "555-222-1244",
"document_GUID": 125
}, {
'name': 'Marge',
"email": "marge#simpsons.com",
"phone": "555-222-1254",
"document_GUID": 126
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}, {
xtype: 'actioncolumn',
width: 50,
text: 'Save',
items: [{
icon: 'https://image.flaticon.com/icons/svg/69/69656.svg', // Use a URL in the icon config
itemId: 'save',
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
var url = 'http://Attachment/Get?document_GUID=' + rec.get("document_GUID") + '_' + rec.get("name");
alert(url);
console.log(url);
}
}]
}],
height: 200,
renderTo: Ext.getBody()
});
Have you tried to use a action column instead?
{
xtype:'actioncolumn',
width:50,
items: [{
icon: 'urlToMyImage/image.png',
tooltip: 'Do Stuff',
handler: function(grid, rowIndex, colIndex) {
//The hole record to play with
var rec = grid.getStore().getAt(rowIndex);
//the ID
alert("My ID" + rec.get('MyIDColumn'));
}
}]
}
I have a chart retrieving data from my store, the four bits of information are the following
Model Code
Ext.define('QvidiApp.model.ClipsViews', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field'
],
config: {
fields: [
{
name: 'meta_id'
},
{
name: 'title'
},
{
name: 'viewed'
},
{
name: 'glances'
}
]
}
});
Now I have the viewed field and the glances field as the numeric fields in the chart, and the title field as the category title in the chart.
I want to render the title name of the field when I hover over it, reason id this. The titles are too long to fit in the x-axis of the chart so in place of the titles I am putting 'meta_id'. So when I hover over the x-axis meta_id field I want the title name to be shown
so for example
meta_id 100 will equal title value ###
Here's is my chart code so far
{
xtype: 'chart',
centered: true,
height: '150%',
colors: [
'#24ad9a',
'#7c7474',
'#a66111'
],
store: 'ClipsViewed',
axes: [
{
type: 'category',
fields: [
'meta_id'
],
grid: true,
label: {
rotate: {
degrees: 0
},
font: '7px'
},
title: 'Clips'
},
{
type: 'numeric',
fields: [
'viewed'
],
grid: true,
position: 'left',
title: 'Amount'
}
],
series: [
{
type: 'bar',
renderer: function(sprite, config, rendererData, index) {
},
style: {
minGapWidth: 1,
minBarWidth: 60,
maxBarWidth: 70,
opacity: 0.80
},
xField: 'meta_id',
yField: [
'viewed',
'glances'
]
}
],
interactions: [
{
type: 'panzoom'
}
],
legend: {
xtype: 'legend'
}
}
As you can see in the above code I have a render function but I dont know what to put into it
Use tips for series
series: [
{
type: 'bar',
tips: {
trackMouse: true,
width: 74,
height: 38,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('meta_id') + '<br />' + storeItem.get('title'));
}
},
style: {
minGapWidth: 1,
minBarWidth: 60,
maxBarWidth: 70,
opacity: 0.80
},
xField: 'meta_id',
yField: [
'viewed',
'glances'
]
}
]
I have a gridpanel with a subtable inside every row. Im trying to include a double click functionality (if you click 2 times in a row, obtain the id_amenaza and redirent with an url). The code works but if i make double click collapses the row. How can i add this functionality? (or insert an image that acts as a link?)
//GRIDPANEL
Ext.create('Ext.grid.Panel', {
renderTo: 'example-grid',
store: amenazaStore,
width: 748,
height: 598,
title: '<bean:write name="informesAGRForm" property="nombreActivo"/>',
plugins: [{
ptype: "subtable",
headerWidth: 24,
listeners: {
'rowdblclick': function(grid, rowIndex, columnIndex, e){
// Get the Record, this is the point at which rowIndex references a
// record's index in the grid's store.
var record = grid.getStore().getAt(rowIndex);
// Get field name
var fieldName = grid.getColumnModel().getDataIndex(columnIndex);
var data = record.get(fieldName);
alert(data);
}
},
columns: [{
text: 'id_amenaza',
dataIndex: 'id_amenaza',
hidden: true,
width: 100
}, {
width: 100,
text: 'id_salvaguarda',
dataIndex: 'id_salvaguarda'
},
{
text: 'denominacion',
dataIndex: 'denominacion',
width: 100
},{
text: 'descripcion',
dataIndex: 'descripcion',
width: 100
},{
text: 'eficacia',
dataIndex: 'eficacia',
width: 100
},
],
getAssociatedRecords: function (record) {
var result = Ext.Array.filter(
salvaguardaStore.data.items,
function (r) {
return r.get('id_amenaza') == record.get('id');
});
return result;
}
}],
collapsible: false,
animCollapse: false,
columns: [
{
text: 'ID',
hidden: true,
hideable: false,
dataIndex: 'id'
},
{
text: 'Codigo',
width: 50,
sortable: true,
hideable: false,
dataIndex: 'codigo'
},
{
text: 'Denominación',
width: 150,
dataIndex: 'denominacion',
},
{
text: ' Autenticidad',
flex: 1,
dataIndex: 'a_riesgo'
},
{
text: 'Confidencialidad',
flex: 1,
dataIndex: 'c_riesgo'
},
{
text: 'Integridad',
flex: 1,
dataIndex: 'i_riesgo'
},
{
text: 'Disponibilidad',
flex: 1,
dataIndex: 'd_riesgo'
},
{
text: 'Trazabilidad',
flex: 1,
dataIndex: 't_riesgo'
},
{
text: 'Total',
flex: 1,
dataIndex: 'total_riesgo'
}]
});
}
Thank you in advance.
First of all you must attach rowdblclick to main grid. To detect which subtable row was clicked you must use event object.
Example:
'rowdblclick': function (view, record, tr, columnIndex, e) {
var cell = e.getTarget('.x-grid-subtable-cell');
if (!cell) {
return;
}
var row = Ext.get(cell).up('tr');
var tbody = row.up('tbody');
var rowIdx = tbody.query('tr', true).indexOf(row.dom);
var records = view.up('grid').getPlugin('subtable').getAssociatedRecords(record);
var subRecord = records[rowIdx];
console.log(subRecord);
}
To turn off expanding/collapsing set expandOnDblClick: false on plugin.
Working sample: http://jsfiddle.net/7czs02yz/18/
I have application using ExtJs 3.4.
I have this construction:
westPanel-TabPanel:
var westPanel = new Ext.TabPanel({
id: "west",
//xtype: "tabpanel",
//layout:'fit',
activeTab: 0,
region: "west",
border: false,
width: 278,
split: true,
collapseMode: "mini",
items: [mapList,structure,cadastr,search]
});
Search - FormPanel:
var search = new Ext.FormPanel({
labelAlign: 'top',
frame:true,
title: 'Поиск',
bodyStyle:'padding:5px 5px 0',
//width: 600,
//layout:'fit',
items: [{
xtype:'textfield',
fieldLabel: 'Диспечерское наименование',
name: 'name_dispather',
anchor:'100%',
enableKeyEvents: true,
listeners: {
'keyup': function(e) {
if(e.getValue().length==4){
searchStore.load({params:{'name':e.getValue()}});
}
}
}
},searchTab]
});
SearchTab - GridPanel:
var searchTab = new Ext.ux.grid.livegrid.GridPanel({
store: searchStore,
region: 'center',
cm: searchCm,
layout: 'fit',
selModel: new Ext.ux.grid.livegrid.RowSelectionModel(),
stripeRows : true,
view: myView,
height: 390,
loadMask: true,
id: 'searchTab',
title:'Найденные объекты',
autoScroll: true,
});
And i have a problem:
Have to make last column's width to whole panel's width?
UPDATE
I try autoExpandColumn. its works but its not idial:
How to fix it?
You can achieve this with the flex config.
You can do it on one column only:
columns: [{text: "Column A", dataIndex: "field_A", flex: 1}]
Or you can do it as default on all the columns:
columns: {
items: [
{
text: "Column A"
dataIndex: "field_A"
},{
text: "Column B",
dataIndex: "field_B"
},
...
],
defaults: {
flex: 1
}
}
Try with:
autoExpandColumn : String
The id of a column in this grid that should expand to fill unused space.
This config option you have to provide for your searchTab (I mean the grid panel).
EDITED:
viewConfig:{
scrollOffset: 0,
forceFit: true
},
This will remove that gap left for scrollbar. This you need to mention for your searchTab (I mean the grid panel).