I have a table that uses react-table v7. One of the features I included is making a cell clickable and redirect to a specific link. I want to make the whole row clickable instead of the cell, but should redirect to the same link as it did when clicking on the cell.
How can I achieve that?
Below is my implementation of the click in the columns. Thanks.
.......
const columns = useMemo(
() => [
{
Header: 'Task Name',
accessor: 'name',
Cell:e =><Link to={`${e.value}/runs`}>{e.value}</Link>,**//clickable cell**
disableSortBy: true,
disableFilters : true,
Filter: SelectColumnFilter,
filter: 'equals',
},
{
Header: 'Square',
accessor: d => `${d.module.name} ${d.function}`,
disableSortBy: true,
disableFilters : true,
},
{
Header: 'Schedule',
accessor: 'schedules',
disableSortBy: true,
disableFilters : true,
},
{
Header: 'Runs',
accessor: 'rundata.count',
disableSortBy: true,
disableFilters : true,
Filter: SelectColumnFilter,
filter: 'equals',
},
{
Header: 'Last Run At',
accessor: 'rundata.results[0].end_date',
disableSortBy: true,
disableFilters : true,
Filter: SelectColumnFilter,
filter: 'equals',
},
]
return(
<>
<TableContainer columns={columns} data={runs} />
</>
);
In your TableContainer definition, you will be outputting rows (tr or TableRow just after the prepareRow call)
Add a onclick to that row.
eg.
<tr onClick={((e) => doSomething(e)} />
Related
In my application, a calculated column depends on other column for calculation, but the calculation needs to be done on the server. Trying to figure out a way to do that using valueGetter to call the REST service and update that value for the column on success.
const columnDefs = [
{ headerName: 'Make', field: 'make' },
{ headerName: 'Tax', field: 'tax', editable: true },
{
headerName: 'Price',
field: 'price',
valueGetter: (params) => {
setTimeout(() => {
params.data.price = params.data.tax + 1;
params.api.refreshCells({
rowNodes: [params.node],
columns: [params.column],
});
console.log('cell refreshed');
}, 1000);
params.data.price = '';
return -9999;
},
},
];
But this causes the valueGetter to be called over and over as the cell is updated and the grid needs the updated value. Is there any other way of acheiving this or if I can use some other method to update the column value which will not trigger change detection?
Here's link for what I'm trying to do: https://stackblitz.com/edit/ag-grid-typescript-async-value-getter?file=src/main.ts
Is there a way with bootstrap-table to have one of the columns show passwords as none readable? I.E. #### not 1234
My setup uses the method below, any help would be great.
This is not for security issues, it's just aesthetics.
Many thanks
var optionsuser = {
filterControl: true,
showRefresh: true,
search: true,
pagination: true,
filter: true,
striped: true,
url: "php/api.php",
queryParams: queryParamsuser,
columns: [{
field: "id",
title: "Id"
},
{
field: "username",
title: "Username",
filterControl: 'select',
sortable: true,
filterStrictSearch: false
},
{
field: "password",
title: "Password"
}
],
};
var $table = $('#table').bootstrapTable(optionsuser),
$modal = $('#modal').modal({show: false}),
$alert = $('.alert').hide();
$table.bootstrapTable('hideColumn', 'id');
Try this one.
<th data-field="Password" data-sortable="true" data-formatter="nameFormatter">Password</th>
function nameFormatter(value) {
var str='';
for(i=0;i<value.length;i++)
{
str=str+'*';
}
return str;
}
You may also check http://bootstrap-table.wenzhixin.net.cn/documentation/ out.
jqGrid pass value to form editing
as a follow-up question to this... I have a grid with one cell as a checkbox and form editing. I was able to load value of cell using this solution, however on submit it is passing back everything inside formatter quotes and throwing a server error. How can I pass back just the value 1:0?
Line from grid...
{ name: 'NS', index: 'NS', width: 20, editable: true, hidden: false, edittype: 'checkbox', editrules: { edithidden: true, required: true }, formoptions: { rowpos: 11}, formatter: checkTrue }
Formatter used...
formatter: function (cellvalue, options, rowdata) {
if (cellvalue == 0) {
return "<span class=\"ui-icon ui-icon-close\">0</span>";
} else {
return "<span class=\"ui-icon ui-icon-check\">1</span>";
}
}
You can use an unformatter
{ name: 'NS', index: 'NS', width: 20, editable: true, hidden: false, edittype: 'checkbox', editrules: { edithidden: true, required: true }, formoptions: { rowpos: 11}, formatter: checkTrue, unformat: unFormat }
function unFormat( cellvalue, options, cell){
return $('span', cell).text();
}
An unformatter takes the following parameters:
cellvalue - the value to be unformatted.
options - An object that contains the row id and column model
cellobject - A JQuery cell object.
I'm new to ExtJS and try to add a button at the bottom of the grid. This button will open a modal dialog to select more persons. I don't know how to add this button after the grid. Do I have to use another component than GridPanel?
Can somebody help me?
The code looks like:
var selectedPersons = [
[1, 'Persnr', 'Name', 'Vorname']
];
var store = new Ext.data.ArrayStore({
fields: [
{name: 'PrsOid', type: 'int'},
{name: 'PersonalNr'},
{name: 'Nachname'},
{name: 'Vorname'}
]
});
store.loadData(selectedPersons);
var grid = new Ext.grid.GridPanel({
store: store,
columns:
[
{
id : 'PersonalNr',
header : 'PersonalNr',
width : 100,
sortable : true,
dataIndex: 'PersonalNr'
},
{
header : 'Nachname',
width : 100,
sortable : true,
dataIndex: 'Nachname'
},
{
header : 'Vorname',
width : 100,
sortable : true,
dataIndex: 'Vorname'
}
],
stripeRows: true,
autoExpandColumn: 'PersonalNr',
height: 200,
//width: 460,
title: 'Personenauswahl',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});
grid.render('gridSelectedPersons');
Do you mean something like a bottom bar ?
var grid = new Ext.grid.GridPanel({
store: store,
columns:
[
....
],
stripeRows: true,
autoExpandColumn: 'PersonalNr',
bbar: new Ext.Toolbar({
renderTo: document.body,
height: 30,
items: [
// begin using the right-justified button container
'->',
{
xtype:'button',
text:'The button',
//makes the button 24px high, there is also 'large' for this config
scale: 'medium'
}
]
})
I have a custom button for my jqgrid that when pressed takes me to another view.
But for some reason when i navigate between the tabs there is an extra added custom button every time a re-visit that tab. Is there a way to say only to add this button once?
This is the markup:
$('#tabs').tabs( {
show: function (event, ui) {
if(ui.index == 0) {
Show some content on this tab.. Not important.
}
if(ui.index == 1) {
$("#functionslist").jqGrid({
datatype: 'json',
url: '/Admin/GetFunctionsList',
colNames: ['Namn'],
colModel: [
{ index: 'FunctionName',
name: 'FunctionName',
width: 100,
sortable: false
}
],
rowNum: 20,
prmNames: { sort: 'SortColumn', order: 'SortOrder', page: 'Page', rows: 'Rows', search: null, nd: null },
hidegrid: false,
pager: '#functionspager',
autowidth: true,
shrinkToFit: true,
height: '100%',
caption: 'Functions',
viewrecords: true,
onSelectRow: function (id) {
window.location.href = '/Function/Edit/' + id;
}
}).jqGrid('navGrid', '#functionspager', { edit: false, add: false, del: false, search: false, refresh: false })
.navButtonAdd('#functionspager', {
caption: '',
title: 'Create new function',
buttonicon: 'ui-icon-plus',
onClickButton: function () {
window.location = '/Function/Add/';
}
}); .... and so forth....
Everything runs fine and i have the behavior i desire but for some reason when i navigate between the two tabs more and more custom button are added. Any ideas why, have tried to resolve this but with no luck.
/Daniel
Why not check to see if the button already exists before adding it?
if ($('#functionspager :has(".ui-icon-plus")').length == 0) {
$("#functionslist").jqGrid('navGrid', '#functionspager', { edit: false, add: false, del: false, search: false, refresh: false })
.navButtonAdd('#functionspager', {
...
});
}
The call $("#functionslist").jqGrid({/*parameters*/); convert the empty <table> to a grid having columns, capture, pager and so on. You should make the call once and not repeat it on every tab activation.
Exactly in the same way the methods navGrid and navButtonAdd should be called only once.
So you should decide what should be done if the user select the tab having jqGrid. You can for example call
$("#functionslist").trigger('reloadGrid', [{current:true}]);
(see here for details)