We Keep Coding

How can I make texts highlightable in ExtJs?

I'm still finding my way around Extjs, I'm currently displaying text data to a UI like so:
reference: 'agentLogGrid',
store: {
xclass: 'Ext.data.ChainedStore',
source: 'LogViewSource',
},
itemConfig: {
viewModel: true,
},
columns: [{
text: 'Timestamp',
xtype: 'templatecolumn',
tpl: '{timestamp}',
flex: 1,
}, {
text: 'Data',
xtype: 'templatecolumn',
tpl: '{data}',
flex: 1,
}],...
But the texts are not highlightable, that means I can't highlight them and copy, or select and copy. When I mouse over, the pointer sees it as a link, but I can't highlight or select. How do I make just the {data} highlightable?

In classic toolkit you can use enableTextSelection property. Something like this:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.data.Store', {
storeId: 'employeeStore',
fields: ['firstname', 'lastname', 'seniority', 'department'],
groupField: 'department',
data: [{
firstname: "Michael",
lastname: "Scott",
seniority: 7,
department: "Management"
}, {
firstname: "Dwight",
lastname: "Schrute",
seniority: 2,
department: "Sales"
}, {
firstname: "Jim",
lastname: "Halpert",
seniority: 3,
department: "Sales"
}, {
firstname: "Kevin",
lastname: "Malone",
seniority: 4,
department: "Accounting"
}, {
firstname: "Angela",
lastname: "Martin",
seniority: 5,
department: "Accounting"
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Column Template Demo',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [{
text: 'Full Name',
xtype: 'templatecolumn',
tpl: '{firstname} {lastname}',
flex: 1
}, {
text: 'Department (Yrs)',
xtype: 'templatecolumn',
tpl: '{department} ({seniority})'
}],
// USE viewConfig enableTextSelection property
viewConfig: {
enableTextSelection: true
},
height: 200,
width: 300,
renderTo: Ext.getBody()
});
}
});

Align column content to the right of cell React MUIDataTable

I'm new to MUI and i want to align the content of a column to the right.my code looks like this:
<MUIDataTable
title={""}
data={data || []}
columns={realColumns ? realColumns(data, modeMO) : columns(data, modeMO)}
options={{
filterType: "textField",
responsive: "simple",
selectableRows: selectable, // set checkbox for each row
search: false, // set search option
filter: false, // set data filter option
download: false, // set download option
print: false, // set print option
pagination: true, //set pagination option
viewColumns: false, // set column option
elevation: 0,
rowsPerPageOptions: [10, 20, 40, 80, 100],
//setCellProps: () => ({ align: 'right' }) ,
onRowSelectionChange: (
currentRowsSelected,
allRowsSelected,
rowsSelected
) => {
setSelectedRows(
allRowsSelected.map((el) => {
return data[el.dataIndex];
})
);
},
selectToolbarPlacement: "none"
}}
/>;
and this is what's displayed:
table Picture
so i would like to align all the numbers in "Montant à régler" column to the right.
can somebody help please.

Disclaimer: This is totally un-tested and only a snip of "columns".
Give your columns a custom render and set the cell properties i.e. something like:
export const columns = [
{
name: "category",
label: "Fun Guy Category",
options: {
setCellProps: () => ({ style: { minWidth: "100px", maxWidth: "800px", justifyContent: 'end' }}),
customBodyRender: (data, type, row) => {return <pre>{data}</pre>}
},
},

If you are using basic tables of Material UI then you can align it through passing align prop to the TableCells to align content in each row and column. You can set align equals to right, left, etc.
If you are using DataGrid or data tables of Material UI (Which I think you are) then you can pass align prop to each column. See the edited example code below from Material UI:
import * as React from "react";
import { DataGrid } from "#mui/x-data-grid";
const columns = [
{ field: "id", align: "rights", headerName: "ID", width: 70 },
{ field: "firstName", align: "center", headerName: "First name",
width: 130 },
{ field: "lastName", align: "left", headerName: "Last name",
width: 130 },
{
field: "age",
headerName: "Age",
type: "number",
width: 90
},
{
field: "fullName",
headerName: "Full name",
description: "This column has a value getter and is not
sortable.",
sortable: false,
width: 160,
valueGetter: (params) =>
`${params.getValue(params.id, "firstName") || ""} ${
params.getValue(params.id, "lastName") || ""
}`
}
];
const rows = [
{ id: 1, align: "right", lastName: "Snow", firstName: "Jon", age:
35 },
{ id: 2, lastName: "Lannister", firstName: "Cersei", age: 42 },
{ id: 3, lastName: "Lannister", firstName: "Jaime", age: 45 },
{ id: 4, lastName: "Stark", firstName: "Arya", age: 16 },
{ id: 5, lastName: "Targaryen", firstName: "Daenerys", age: null
},
{ id: 6, lastName: "Melisandre", firstName: null, age: 150 },
{ id: 7, lastName: "Clifford", firstName: "Ferrara", age: 44 },
{ id: 8, lastName: "Frances", firstName: "Rossini", age: 36 },
{ id: 9, lastName: "Roxie", firstName: "Harvey", age: 65 }
];
export default function DataTable() {
return (
<div style={{ height: 400, width: "100%" }}>
<DataGrid
rows={rows}
columns={columns}
pageSize={5}
rowsPerPageOptions={[5]}
checkboxSelection
/>
</div>
);
}
You can learn many more about Material UI Tables here:
Material UI Tables
Hope this helps.

HighChart.js : How to group nodes in organization chart

I want to make a family tree using Highchart.js organization chart. For a married couple, I want to display either:
(1) the nodes connected to each other (as seen in the below image between nodes at the top) or
(2) group them together.
Is there a function in Highchart.js that I can achieve this?
I have tried to use some functions as written in https://api.highcharts.com/highcharts/series.organization but haven't found what I needed.
https://jsfiddle.net/k4ped9fj/
<script>
Highcharts.chart('container', {
chart: {
height: 400,
inverted: true
},
title: {
text: ""
},
series: [{
type: 'organization',
name: 'Family Tree',
keys: ['from', 'to'],
data: [
['1','2'],['3','1'],['3','4'],['3','8'],['3','16'],['3','22'],['16','10'],['16','25']
],
levels: [{
color: '#008fd5',
dataLabels: {
color: 'white'
},
height: 25
}],
linkColor: "#ccc",
linkLineWidth: 1,
linkRadius: 0,
nodes: [
{ name: "Sarah Collin", description: "7/5/1990", tags: ["T1and4"], id: "1", pid: 3, FirstName: "Sarah", LastName: "Collin", Birthdate: "7/5/1990", Alive: "1", SpouseID: "4", image: "photo.png" },
{ name: "Sofia Collin", description: "1/1/2017", id: "2", pid: 1, FirstName: "Sofia", LastName: "Collin", Birthdate: "1/1/2017", Alive: "1", image: "photo.png" },
{ name: "Richard Dolson", description: "7/7/1953-1/1/2016", id: "3", FirstName: "Richard", LastName: "Dolson", Birthdate: "7/7/1953", Alive: "0", DeathDate: "1/1/2016", image: "photo.png" },
{ name: "Adam Collin", description: "2/1/1990", tags: ["T1and4"], id: "4", pid: 3, FirstName: "Adam", LastName: "Collin", Birthdate: "2/1/1990", Alive: "0", Allergy: "Medicine", SpouseID: "1", image: "photo.png" },
{ name: "Jennifer Dolson", description: "1/2/1996", id: "8", pid: 3, FirstName: "Jennifer", LastName: "Dolson", Birthdate: "1/2/1996", Alive: "1", image: "photo.png" },
{ name: "Elias Wittek", description: "", id: "10", pid: 16, FirstName: "Elias", LastName: "Wittek", Alive: "1", image: "photo.png" },
{ name: "David Wittek", description: "2/1/1999", tags: ["T16and26"], id: "16", pid: 3, FirstName: "David", LastName: "Wittek", Birthdate: "2/1/1999", Alive: "1", SpouseID: "26", image: "photo.png" },
{ name: "Jeff Dolson", description: "2/1/2000", id: "22", pid: 3, FirstName: "Jeff", LastName: "Dolson", Birthdate: "2/1/2000", Alive: "0", image: "photo.png",layout:'hanging' , offset: '50%' },
{ name: "Will Wittek", description: "", id: "25", pid: 16, FirstName: "Will", LastName: "Wittek", Alive: "1", image: "photo.png" },
{ name: "Tracy Dolson", description: "2/1/2000", tags: ["T16and26"], id: "26", FirstName: "Tracy", LastName: "Dolson", Birthdate: "2/1/2000", Alive: "1", SpouseID: "16", image: "photo.png" }
],
colorByPoint: false,
color: '#007ad0',
dataLabels: {
color: 'white'
},
shadow: {
color: '#ccc',
width: 15,
offsetX: 0,
offsetY: 0
},
hangingIndent: 10,
borderColor: '#ccc',
nodePadding: 5,
nodeWidth: 80
}],
credits: {
enabled: false
},
tooltip: {
outside: true,
formatter: function () {
return '<b>' + this.point.name.toUpperCase() + '</b><br/>' +
'<span>' + this.point.description.toUpperCase() + '</span><br/>'
}
},
exporting: {
allowHTML: true,
sourceWidth: 800,
sourceHeight: 400
}
});
</script>

Unfortunately, this feature is not supported. However, you can achieve it using Highcharts.SVGRenderer.path and plotting custom link between two nodes. Check the code and demo posted below.
Code:
chart: {
height: 400,
inverted: true,
events: {
render: function() {
var chart = this,
node1,
node2,
graphic;
if (chart.customLink) {
chart.customLink.destroy();
}
chart.series[0].nodes.forEach(function (node) {
if (node.id === "3") {
node1 = node;
} else if (node.id === "31") {
node2 = node;
}
});
graphic = chart.renderer.path([
'M',
node1.shapeArgs.y + node1.shapeArgs.height / 2,
chart.plotHeight - node1.shapeArgs.x - node1.shapeArgs.width / 2 + 10,
'L',
node2.shapeArgs.y + node2.shapeArgs.height / 2,
chart.plotHeight - node2.shapeArgs.x - node1.shapeArgs.width / 2 + 10,
'Z'
]).attr({
'stroke-width': 1,
stroke: '#ccc'
}).add();
chart.customLink = graphic;
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/tjr5gue2/1/
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path

How to search w2ui date between

I have table using w2ui javascript with the data json in the record. I can't search by date using operator between, this code it's not working. But it's working when I using operator is and with one parameter. I don't know what wrong with this code. What I miss?
$(function() {
$('#grid').w2grid({
name: 'grid',
columns: [
{ field: 'recid', caption: 'ID', size: '50px', sortable: true },
{ field: 'fname', caption: 'First Name', size: '30%', sortable: true },
{ field: 'lname', caption: 'Last Name', size: '30%', sortable: true },
{ field: 'email', caption: 'Email', size: '40%' },
{ field: 'sdate', caption: 'Start Date', size: '120px', render:'date', type: 'date' }],
records: [{
recid: 1,
fname: 'John',
lname: 'doe',
email: 'jdoe#gmail.com',
sdate: '4/3/2012'
}, {
recid: 2,
fname: 'Stuart',
lname: 'Motzart',
email: 'jdoe#gmail.com',
sdate: '4/3/2012'
}, {
recid: 3,
fname: 'Jin',
lname: 'Franson',
email: 'jdoe#gmail.com',
sdate: '4/3/2012'
}, {
recid: 4,
fname: 'Susan',
lname: 'Ottie',
email: 'jdoe#gmail.com',
sdate: '4/3/2012'
}, {
recid: 5,
fname: 'Kelly',
lname: 'Silver',
email: 'jdoe#gmail.com',
sdate: '4/3/2012'
}, {
recid: 6,
fname: 'Francis',
lname: 'Gatos',
email: 'jdoe#gmail.com',
sdate: '4/3/2012'
}, {
recid: 7,
fname: 'Mark',
lname: 'Welldo',
email: 'jdoe#gmail.com',
sdate: '4/3/2012'
}, {
recid: 8,
fname: 'Thomas',
lname: 'Bahh',
email: 'jdoe#gmail.com',
sdate: '4/7/2012'
}, {
recid: 9,
fname: 'Sergei',
lname: 'Rachmaninov',
email: 'jdoe#gmail.com',
sdate: '4/6/2012'
}, {
recid: 10,
fname: 'Jill',
lname: 'Doe',
email: 'jdoe#gmail.com',
sdate: '4/5/2012'
}]
});
});
function search1() {
w2ui['grid'].search([{ field: 'sdate', value: ['4/5/2012', '4/7/2012'], type: 'date', operator: 'between'}]);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://w2ui.com/src/w2ui-1.3.min.js"></script>
<link href="http://w2ui.com/src/w2ui-1.3.min.css" rel="stylesheet"/>
<div id="grid" style="width: 100%; height: 350px;"></div>
<br />
Date: <input type="text" name="sDate"> <input type="text" name="eDate">
<input type="submit" value="Submit" onclick="search1()">

Search property has to be defined by type for each columns
eg.
searches: [
{ field: 'recid', caption: 'ID ', type: 'int' },
{ field: 'lname', caption: 'Last Name', type: 'text' },
{ field: 'fname', caption: 'First Name', type: 'text' },
{ field: 'email', caption: 'Email', type: 'list', options: { items:[ 'jim#gmail.com', 'jdoe#gmail.com']} },
{ field: 'sdate', caption: 'Start Date', type: 'date' }
],

Ext js paging with local data does not work

I try to enable paging with ExtJs4 grid. Paging toolbar looks like it is working but paging is not enabled in grid.Can you help me about what I am missing?
Ext.onReady(function () {
var i = 1;
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'firstName', type: 'string' },
{ name: 'lastName', type: 'string' },
{ name: 'age', type: 'int' },
{ name: 'eyeColor', type: 'string' }
]
});
It looks that the problem is with totalCount but, there is something more.
var store= Ext.create('Ext.data.Store', {
model: 'User',
totalCount:50,
pageSize: 10,
autoLoad: { start: 0, limit: 10 },
proxy: {
type: 'memory',
reader: {
root: 'users',
totalProperty: 'totalCount'
}
},
data: [
{ id: i++, firstName: 'Ed', lastName: 'Spencer', age:20, eyeColor: 'blue' },
{ id: i++, firstName: 'Tommy', lastName: 'Maintz', age: 30, eyeColor: 'black' },
{ id: i++, firstName: 'Aaron', lastName: 'Conran', age: 40, eyeColor: 'blue' },
{ id: i++, firstName: 'Jamie', lastName: 'Avins', age: 50, eyeColor: 'black' },
{ id: i++, firstName: 'Ed', lastName: 'Spencer', age: 20, eyeColor: 'blue' }
.
.
.
]
});
Paging toolbar looks like it is working but grid values does not change according to the page numbers.
Ext.create('Ext.grid.Panel', {
title: 'Users',
store: store,
proxy: {
type: 'memory',
enablePaging: true
},
columns: [
{ header: 'ID', dataIndex: 'id', width:50 },
{ header: 'Name', dataIndex: 'firstName' },
{ header: 'Last Name', dataIndex: 'lastName' },
{ header: 'Age', dataIndex: 'age', width: 50 },
{ header: 'Eye Color', dataIndex: 'eyeColor' }
],
height: 600,
width: 800,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
pageSize: 10,
dock: 'bottom',
displayInfo: true
}],
renderTo: Ext.getBody()
});
});

You need proxy: 'pagingmemory' which is Ext.ux.data.PagingMemoryProxy.
From doc:
Paging with Local Data
Paging can also be accomplished with local data using extensions:
Ext.ux.data.PagingStore
Paging Memory Proxy (examples/ux/PagingMemoryProxy.js)
Also note that there is no need to have:
totalCount in the store config (it will be provided by the proxy);
proxy on the grid (it's already within the store);
pageSize in the paging toolbar config (will be taken from the store).