I have a nested grid, and I am able to change the nested grid row background color based on the value of one of its columns. But I would like to also be able to change the color of the parent row.
For example: Parent:Study, Child:Site, Condition:column Status=pending.
If a site has a status of pending, I would like to change the row color for the pending site, and also change the row color for the study the contains that pending site.
var cellclassname = function (row, column, value, rowdata) {
if (rowdata.Status =="Pending") {
return "red";
}
}
The code above works for the nested grid:
columns: [
{ text: '<b>Site ID</b>', datafield: 'ID', width: '15%', cellclassname: cellclassname},
{ text: '<b>Organization Name</b>', datafield: 'SiteName', width: '70%', cellclassname: cellclassname},
{ text: '<b>DSA</b>', datafield: 'Status', width: '15%', cellclassname: cellclassname} ]
but not for the parent grid:
columns: [
{ text: '<b>Study Filter</b>',
datafield: 'StudyName', width: '100%', cellclassname: cellclassname }
]
How can I modify my cellclassname function so it will change the row color for the parent row as well?
Thanks in advance!
I created a work around solution.
From the database side, I was able to generate the parent data with an extra column, which says if any of the child information has a pending, then the parent study will also have a pending status. So when generating the grid, I was able to color the parent row based on that information, and I made the status column hidden.
I am still curious to know how I could have done it using the jqwidgets functions instead of modifying the source data.
Related
I am building a custom component where I am using the table component provided by Ant Design. For most of the parts, everything works as expected, however, there is a "tiny" issue.
I am using the "tree-data" (i.e. nested JSON) data to populate the Table component. Due to the fixed column size (which is a requirement) it has been noted during QA that the row`s label is not properly indented if it overflows (i.e. starts on a new row).
So my question is, how can indent the label such that when the label starts on a new line it starts from the initial indentation like this:
The GOAL would be to have the label "squeezed" within the green-dashed container.
On THIS LINK you can find a demo (the same as the one in ant design documentation with minor changes) which replicates the issue I am working on.
open the link
expand the first row (i.e. John Brown sr.) as it is expanded in the picture above.
You can apply display 'flex' to the column
// index.css
.name-column {
display: flex;
}
// demo.js
// column
...
...
...
{
title: "Name",
dataIndex: "name",
key: "name",
className: 'name-column'
},
...
...
...
I am introduced to react/redux/sagas/redux-form web application development. I used react-bootstrap-table-next in order to display data in a table format.
It has two columns as Title, Description however data for Title column is a long string data.
foo1,foo2,foo3,foo4,foo5,foo6,foo7 bar
And the problem I am having is it overflows or occupies cell/row under Description so that data under Description column is masked.
I tried something like this but it didn't make a difference.
const rowStyle = (row, rowIndex) => {
return { whiteSpace: 'pre-line'; };
};
<BootstrapTable data={ data } columns={ columns } rowStyle={ rowStyle } />
What would be the way to wrap this long string so that it can be contained within fixed width of cell under Title column?
[update]
Found an answer with following css instead.
return { overflowWrap: 'break-word' };
You can do it by providing certain styling in your tag.
<BootstrapTable data={data} bodyStyle={ {width: 500, maxWidth: 500, wordBreak: 'break-all' } }>
I was able to center the text within the header, using this:
[colid="startstop"].gridxCell{
text-align: center;
}
I thought this would center all row cells belonging to the startstop column, but it doesn't. My startstop column contains a single button in each row. I have two other columns just like this. How do I center the buttons in the three columns of my choosing?
Here is a peice of my structure:
{ id: 'startstop', field: 'startstop', name: 'Start/Stop', width: '61px',
widgetsInCell: true,
navigable: true,
allowEventBubble: true,
decorator: function(){
//Generate cell widget template string
return [
'<button data-dojo-type="dijit.form.Button" ',
'data-dojo-attach-point="btn" ',
'class="startStopButton" ',
'data-dojo-props= ',
'"onClick: function(){',
'alert(\'Start/Stop\');',
'}"><img src="images/1413390026_control.png" /></button>'
].join('');
},
setCellValue: function(data){
//"this" is the cell widget
this.btn.set('label', data);
}
},
Here is my css class - it only does the size of the button for now as I am having other troubles getting it to work by itself - but that's another question.
.startStopButton .dijitButtonNode {
width: 16px;
height: 16px;
text-align: center;
}
If you want to include widgets in a cell, it is recommended to use the widgetsInCell flag, along with the onCellWidgetCreated and setCellValue methods (as documented here).
Here is how I use a cell with a horizontal slider:
{
id: 'scoreColId',
field: 'score',
name: 'Score',
width: '15%',
// flag there are widgets in cell so that they are destroyed when grid is destroyed
widgetsInCell: true,
// method to create the widget (no cell-specific data yet)
onCellWidgetCreated: function(cellWidget, column) {
// outer div to center align the widget inside placed in the cell
var outerDiv = domConstruct.create('div', {
style: {
'text-align': 'center'
}
}, cellWidget.domNode);
// create the widget and place it in the div (already inside the cell)
cellWidget.slider = new HorizontalSlider({
minumum: 0,
maximum: 10,
});
cellWidget.slider.placeAt(outerDiv);
},
// set each cell with it's specific data
setCellValue: function(gridData, storeData, cellWidget) {
var score = gridData.docScore;
cellWidget.slider.set('value', score);
}
},
I'm having a few issues when attempting to make the switch from extjs 4.0.7 to 4.1.1.
The first issue is as follow:
I have two treepanels which are within a column layout. One right next to the other. My app loads a bunch of nodes into the left panel, and then you can optionally move some of them to the other panel. However, the panel with all the nodes is not showing a scrollbar, and thus I can't see about 1/3 of the nodes all of a sudden. I had a semi-similar issue in 4.0.7 where I couldnt see the last node moved if the panel was full until I moved another node. I fixed that with the following lines:
treePanel1.invalidateScroller();
treePanel2.invalidateScroller();
These lines are deprecated in 4.1.1, and the problem seems to have become worse. Has anyone had a similar issue, and how do I get my scroll bar back.
A second major issue related to my UI:
I have two grids right next to each other elsewhere, layed out similarly to the treepanels. I've set up drag and drop between the two grids. Again all the nodes start in the left grid, with the option to drag some into the right grid. However, the right grid is now not showing at full size, it is defaulting to a sliver. So, the DD functionality is still there, if you know to drag the node to that little sliver. Afterwards, the sliver expands enough to hold the single node and so on. So, how do I get it back to defaulting full size. Why had extjs 4.1.1 caused these issues? I'd have to fat finger in any code, but can if absolutely neccessary. However, if anyone is familiar with this type of issue based on my description, that would be great.
Edit: Also, I have a combobox in the right-most column of the grids. When I click to change one of the comboboxes, a mini scrollbar thing pops up that sort of blocks the dropdown button. What have they done to this version?
Here is the layout definition where I have the first problem where the scrollbar doesn't show up on the panel when it needs to:
{
xtype: 'panel',
title: 'Select fields',
defaults: {
border: false,
height: '100%'
},
layout: 'column',
items: [
{
xtype: 'treepanel',
itemID: 'choicesTreePanel',
title: 'Choose from below fields',
height: '100%',
multiSelect: true,
store: choicesTree,
rootVisible: false,
columnWidth: .44},
{
xtype: 'panel',
columnWidth: .06,
layout: {
type: 'vbox',
align: 'center'
},
defaults: {
margins: "15 0 0 0"
},
items: [
{
xtype: 'button',
text: '==>'},
{
xtype: 'button',
text: '<=='},
{
xtype: 'button',
text: 'RST'}
]},
{
xtype: 'treepanel',
itemId: 'chosenTreePanel',
title: 'Fields',
border: true,
store: chosenFields,
rootVisible: false,
columnWidth: .44,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop,
dragText:'
dragginggggg '
},
ddGroup: '
fieldsDD '
}
},
{xtype:'
panel ',
columnWidth:.06,
layout:{
type:'
vbox ',
align:'
center '
},
items: [
{
xtype: '
button ',
text: '
UP '},
{
xtype: '
button ',
text: '
DOWN '}
]
}
]
}
Edit: on the left panel, if I make height a set value, and autoscroll true, I have a scrollbar. If I set height '100%' and autoscroll true, there is no scroll bar. So a solution might be to find out how to have the panel fit the height of the parent, while maintaining the scrollbar
Although you are looking for a percentage based height solution, you can also use a constant value height. In many cases this will avoid your problem. For example, set the panels to 600 height, that should fix the scroller issue.
This does not solve your issue in percentage based layouts. Hopefully someone else can provide help with that.
(maybe it is best to split your question into multiple separate questions)
Concerning your first question about the panel height and scrollbar:
In your example I would ask myself the question "I want the treepanel to have a 100% height related to what?".
A column layout is typically used when you don't care about the height of the child elements related to their parent: the sum of the height of the child elements define the height of the column as you can see here: http://docs.sencha.com/ext-js/4-1/extjs-build/examples/layout/column.html.
You did not define any height on the columns, so it uses the height of the child elements (which have no height in your example). I don't know what Ext does in this case, but based on this, it cannot do anything smart.
If you want the treepanel to use the whole height of the containing panel, you would use a hbox layout with the align property set to stretch.
That might fix the scrollbar too since height calculation can be done properly.
Don't forget to remove the "height: 100%" and "autoscroll" properties since they mix things up.
Finally, changing the layout of the treepanel to 'fit' might give you the result you are looking for.
Your code might become something like:
{
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'treepanel',
layout: 'fit',
flex: 44,
...
}, {
flex: 6,
...
},{
flex: 44,
...
}]
}
I did not test this answer on your code. Please provide a full working code sample (with a dummy store) and I'll test it.
Hello
I'm new to Ext JS and I have created grid whidth folowing fields
columns: [
{
header : 'Firs name',
width : 200,
sortable : true,
dataIndex: 'firstName'
},
{
header : 'Last name',
width : 200,
sortable : true,
dataIndex: 'lastName'
},
{
header : 'Favourite color',
width : 195,
sortable : true,
dataIndex: 'favouriteColor'
}
],
Values will be generated in php.
I have to make that when user doubleCllick on any row, that row's background color turns into user's favourite color (Red, Blue, Yellow).
So far I've done that
grid.on('rowdblclick', function(grid,index,e) {
alert(index);
});
... I got the index of the clicked row, but I don't know how to change its background color. Will appreciate any help.
You need to make use of the GridView object to get the DOM of the selected row. And apply CSS with your favorite color onto that row. First you need to create few CSS classes:
.redrow {
background-color: red !important;
}
Similarly for blue and yellow. Next you need to get the row and add the CSS class to the row.
grid.on('rowdblclick', function(grid,index,e) {
var color = grid.getStore().getAt(index).get('favouriteColor');
if(color == 'red')
Ext.fly(grid.getView().getRow(index)).addClass('redrow');
else if( color == 'blue')
Ext.fly(grid.getView().getRow(index)).addClass('bluerow');
.
.
.
});
If you are trying to change the gird row background color according to the the favouriteColor column, you need to use another technique. You can make use of the ViewConfig and implement the getRowClass method as shown below:
viewConfig: {
forceFit: true,
getRowClass: function(record, index,prarms,store) {
var color = record.get('favouriteColor');
if(color == 'red')
return 'redrow';
else if(color == 'blue')
return 'bluerow';
else if (color == 'yellow')
return 'yellowrow';
else
return;
}
}
The ViewConfig is used along with the grid declaration. You don't make use of the return value of the getRowClass. The framework makes use of the return value. You only need to write logic for selecting the right CSS class for the row. getRowClass method can be used if you are need to display the background colors when the grid is rendered. It cannot be used during user events or after the grid is rendered.
In your case, you don't need this method because you are changing the color of the row when the user double click the row right? So, you can refer to the first part for the answer where you change the row's background according to the favouriteColor value for that row.