I am trying to use "Fixed columns" feature in datatables with remote data pulled using ajax. Everything works perfectly without any errors. However, the "Fixed columns" feature doesn't work. Below is my code
$('#dataTable').DataTable({
"order": [[ groupColumn, "asc" ]],
"rowReorder": true,
"dom": 'l<"toolbar">frtip',
"scrollX": true,
"bscrollCollapse": true,
"displayLength": 25,
"fixedColumns": true,
"columnDefs": [
{ "visible": false, "targets": groupColumn },
{ "orderable": true, "targets": groupColumn },
{ "orderable": false, "targets": "_all" }
],
"processing": false,
"pageLength": 60,
"ajax": {
url: "http://example.com/output",
type: 'post',
data: {id:id}
},
"columns": {
//column definitions provided here
}
});
I'm writing a custom HTML app using the 2.1 rally SDK. My tasks are:
Write a custom html app to design a hierarchical grid where the data should
be obtain from a fetch call from Jira Open API.
Filter the grid with any word provided
This is my code:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function () {
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['FormattedId', 'Name', 'email'],
associations: [
{type: 'hasMany', model: 'UserChild', name: 'UserChild'},
{type: 'hasMany', model: 'Defects', name: 'Defects'},
],
proxy: {
type: 'ajax',
url : './Users.json',
reader: {
type: 'json',
root:'users'
}
},
});
Ext.define("UserChild", {
extend: 'Ext.data.Model',
fields: ['FormattedId', 'Name', 'email'],
belongsTo: 'User'
});
Ext.define("Defects", {
extend: 'Ext.data.Model',
fields: ['FormattedId', 'Name', 'email'],
belongsTo: 'User'
});
var grid=Ext.create('Rally.ui.grid.Grid', {
store: Ext.create('Rally.data.Store', {
model: 'User',
autoLoad:true,
enableHierarchy: true
}),
columnCfgs: [
{
text:'FormattedId' , dataIndex : 'FormattedId'
},
{
text: 'Name', dataIndex: 'Name'
},
{
text:'email' , dataIndex : 'email'
}
]
});
this.add(grid);
}
});
Users.json file is as below:
{
"users": [
{
"FormattedId": 1,
"Name": "Ed Spencer",
"email": "ed#sencha.com",
"UserChild":{
"FormattedId": 3,
"Name": "Ed Spencer",
"email": "ed#sencha.com"
},
"Defects" :{
"FormattedId": 4,
"Name": "Ed Spencer",
"email": "ed#sencha.com"
}
},
{
"FormattedId": 2,
"Name": "Abe Elias",
"email": "abe#sencha.com",
"UserChild":{
"FormattedId": 5,
"Name": "Ed Spencer",
"email": "ed#sencha.com"
},
"Defects" :{
"FormattedId": 6,
"Name": "Ed Spencer",
"email": "ed#sencha.com"
}
}
]
}
I want a hierarchical grid with user data and not rally data store.
I think you are going to come to a problem when you try to fetch Jira data from within a Rally app. You will most likely be prevented from doing that because of CORS.
The second big problem you will have is that all the Rally SDK objects are based on their being a 'record' object with all the right variables and procedures. The hierarchy is based on children collections of various types, not associations. The hierarchical grids make that even harder because they use a hand-crafted bit of black magic to get it all to work together and is very resistant to modifications.
Good luck.
I'm using datatables and I have built my code in this way:
table = $('#examples').DataTable({
"ajax": {
type: "POST",
url: "./../../" + "/back-end/switch-ajax-listening/switch-ajax-listening.php",
dataType: "json",
data:
{
actionId: "page1GetAll"
}
},
responsive: true,
"columns": [
{ "data": "idSelectPacketName"},
{ "data": "idSelectCompany" },
{ "data": "idSelectDesigner1" },
{ "data": "idSelectDesigner2" },
{ "data": "idSelectDesigner3" },
{ "data": "idSelectDesigner4" },
{ "data": "idSelectDesigner5" },
{ "data": "idSelectManufacturer" },
{ "data": "idSelectorProductSector" },
{ "data": "idSelectorProductionYear" },
{ "data": "idSelectorNation" },
{ "data": "idSelectorTypology" },
{ "data": "idHeightInput"},
{ "data": "idLengthInput" },
{ "data": "idVolumeInput" },
{ "data": "idWeightInput" },
{ "data": "nameOutMouseOrImage1" },
{ "data": "nameOverMouseOrImage2" },
{"data":null,"defaultContent":"<button>View</button>"}
],
});
var buttons = new $.fn.dataTable.Buttons(table, {
"buttons": [
{
extend: 'colvis',
postfixButtons: [ 'colvisRestore' ],
container : '#colvis',
columns: '0,1,2,3,4,5'
},
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
],
}).container().appendTo($('#buttons'));
$('div.dataTables_filter').appendTo('#buttons');
$("div.toolbar").html('<b>Custom tool bar! Text/images etc.</b>');
It works very well but I need to move some element using the id. Indeed at the end of my code I have moved some elements in new div using their id, but I'm not able to find all the id. More in details I don't find this id:
I have indicated with orange and blue color.
Have you some ideas what is their id name?
I guess you are looking for Datatable dom positioning
You can position each component in any order something like this
$('#example').DataTable( {
"dom": '<"top"i>rt<"bottom"flp><"clear">'
});
where variables are
l - Length changing
f - Filtering input
t - The Table!
i - Information
p - Pagination
r - pRocessing
you can change order of irtflp in order you want
More detail here
I have a requirement to create a tree grid which has unknown number of columns and data which gets rendered on click on a button. I have following code for the same.
//Model
Ext.define('SM.model.DynamicTreeModel', {
extend: 'Ext.data.Model'
});
//Store
Ext.define('SM.store.DynamicTreeStore',{
extend:'Ext.data.TreeStore',
model:'SM.DynamicTreeModel',
root: {
expanded: true
},
proxy: {
type: 'ajax',
url: 'TGData1.json',
reader: {
type: 'json',
root: 'children'
}
},
autoLoad: true
});
Ext.define('SM.view.compareScenario.DynamicTree', {
extend: 'Ext.tree.Panel',
alias: 'widget.DynamicTree',
frame: true,
columnLines: true,
autoLoad: false,
initComponent: function(){
var config = {
columns: [],
rowNumberer: false
};
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);
this.callParent(arguments);
},
storeLoad: function(){
var columns = [];
Ext.each(this.store.proxy.reader.jsonData.columns, function(column){
columns.push(column);
});
this.reconfigure(this.store, columns);
this.store.getRootNode(this.store.getRootNode);
},
onRender: function(ct, position){
SM.view.compareScenario.DynamicTree.superclass.onRender.call(this, ct, position);
this.store.load({
scope: this,
callback: function(records, operation, success) {
this.storeLoad();
}
});
}
});
var influencesTree = {
xtype: 'DynamicTree',
id: 'influencesTree',
pading: '5',
region: 'south',
height: '70%',
collapsible: true,
rootVisible: false,
store: 'DynamicTreeStore'
};
The json file is as follows:
{
"metaData": {
"fields": [
{"name":"0", "type":"string"},
{"name":"1", "type":"string"},
{"name":"2", "type":"string"}
]
},
"columns" : [
{
"xtype":"treecolumn", //this is so we know which column will show the tree
"text":"Override Type",
"flex":"2",
"sortable":"true",
"dataIndex":"0"
},
{
"text":"Scenario 1",
"dataIndex":"1"
},
{
"text":"Copied Scenario",
"dataIndex":"2"
}
]
,
"text": ".",
"children": [{
"0":"CFO",
"1":"15",
"2":"16",
"children":[{
"0":"AW",
"1": "5",
"2": "5",
"leaf": "true",
},
{
"0":"AV",
"1":"10",
"2":"11",
"leaf": "true",
}
]
}
]
}
The tree renders, but the child nodes cannot be expanded as the + icon is not shown. Instead of + icon, a checkbox is rendered.
Any help/suggestions for the same will be highly appreciated.
Thanks,
Shalini
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.dd.*']);
Ext.onReady(function () {
var myData = [{
name: "Rec 0",
type: "0"
}, {
name: "Rec 1",
type: "1"
}, {
name: "Rec 2",
type: "2"
}, {
name: "Rec 3",
type: "3"
}, {
name: "Rec 4",
type: "4"
}, {
name: "Rec 5",
type: "5"
}, {
name: "Rec 6",
type: "6"
}, {
name: "Rec 7",
type: "7"
}, {
name: "Rec 8",
type: "8"
}, {
name: "Rec 9",
type: "9"
}];
// create the data store
var firstGridStore = Ext.create('Ext.data.Store', {
model: 'Apps.demo.model.Resource',
autoLoad: true,
proxy: {
type: 'ajax',
url: '/echo/json/',
actionMethods: {
read: 'POST'
},
extraParams: {
json: Ext.JSON.encode(myData)
},
delay: 0
}
});
// Column Model shortcut array
var columns = [{
text: "Name",
flex: 1,
sortable: true,
dataIndex: 'name'
}, {
text: "Type",
width: 70,
sortable: true,
dataIndex: 'type'
}];
// declare the source Grid
var firstGrid = Ext.create('Ext.grid.Panel', {
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
ddGroup: 'selDD'
},
listeners: {
drop: function (node, data, dropRec, dropPosition) {
}
}
},
store: firstGridStore,
columns: columns,
stripeRows: true,
title: 'First Grid',
margins: '0 2 0 0'
});
// create the destination Grid
var secondTree = Ext.create('Apps.demo.view.TreeGrid', {
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
ddGroup: 'selDD'
},
listeners: {
beforedrop: function (node, data) {
data.records[0].set('leaf', false);
data.records[0].set('checked', null);
},
drop: function (node, data, dropRec, dropPosition) {
firstGrid.store.remove(data.records[0]);
}
}
}
});
var displayPanel = Ext.create('Ext.Panel', {
width: 650,
height: 300,
layout: {
type: 'hbox',
align: 'stretch',
padding: 5
},
renderTo: 'panel',
defaults: {
flex: 1
}, //auto stretch
items: [
firstGrid,
secondTree],
dockedItems: {
xtype: 'toolbar',
dock: 'bottom',
items: ['->', // Fill
{
text: 'Reset both components',
handler: function () {
firstGridStore.loadData(myData);
secondTreeStore.removeAll();
}
}]
}
});
});
var response = Ext.JSON.encode({
"children": [{
"itemId": 171,
"type": "comedy",
"name": "All the way",
"children": [{
"leaf": true,
"itemId": 171,
"type": "actor",
"name": "Rowan Atkinson"
}],
}, {
"itemId": 11,
"type": "fantasy",
"name": "I love You",
"children": [{
"itemId": 11,
"leaf": true,
"type": "actor",
"name": "Rajan",
}]
}, {
"itemId": 173,
"type": "Action",
"name": "Fast and Furious",
"children": [{
"itemId": 174,
"type": "actor",
"name": "Dwayne Johnson",
"children": [{
"leaf": true,
"itemId": 175,
"type": "wrestler",
"name": "The Rock"
}]
}]
}]
});
Ext.define('Apps.demo.model.Resource', {
extend: 'Ext.data.Model',
fields: [{
name: "name",
type: "string"
}, {
name: "type",
type: "string"
}]
});
Ext.define('Apps.demo.view.TreeGrid', {
extend: 'Ext.tree.Panel',
title: 'Demo',
height: 300,
rootVisible: true,
singleExpand: true,
initComponent: function () {
Ext.apply(this, {
store: new Ext.data.TreeStore({
model: 'Apps.demo.model.Resource',
"root": {
"name": "",
"type": "",
"expanded": "true"
},
proxy: {
type: 'ajax',
url: '/echo/json/',
actionMethods: {
read: 'POST'
},
extraParams: {
json: response
},
delay: 0
}
}),
listeners: {
'beforeiteminsert' : function(obj, node) {
console.log(node);
}
},
columns: [{
xtype: 'treecolumn',
text: 'Name',
dataIndex: 'name',
width: 200
}, {
text: 'Type',
dataIndex: 'type'
}]
});
this.callParent();
}
});
var grid = Ext.create('Apps.demo.view.TreeGrid');
Please check this code .It might not give u the proper answer but will surely give u the hint how to achieve the output.
I have an employee-favorites relationship that I have mapped using the hasMany/belongsTo semantics in my models. In my store, I simply set the root and point to the root array, but I'm not seeing the favorites portion of the model getting populated. Any ideas?
My model for Person:
Ext.define('People.model.Employee', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'cn'}
],
hasMany: { model: 'Favorite', name: 'favorites' }
}});
Model for Favorite:
Ext.define('People.model.Favorite', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'uid'},
{ name: 'fullName'}
],
belongsTo: 'Employee'
}});
Store:
Ext.define('People.store.Favorites', {
extend: 'Ext.data.Store',
requires: [
'People.model.Employee',
'People.model.Favorite'
],
config: {
autoLoad: false,
model: 'People.model.Employee',
storeId: 'Favorites',
proxy: {
type: 'jsonp',
url: People.app.favSearchUrl,
reader: {
type: 'json',
idProperty: 'cn',
rootProperty: 'records'
}
}
}});
The JSON I'm trying to consume is as follows:
{
"records": [
{
"_id": "5106f97bdcb713b818d7f1f1",
"cn": "lsacco",
"favorites": [
{
"fullName": "Friend One",
"uid": "friend1"
},
{
"fullName": "Friend Two",
"uid": "friend2"
}
]
}
]
}