I want to change the font color of a row after a cell in that row has been edited and set to a certain value.
myStore is the dojo.data.ItemFileWriteStore associated to the dojox.grid.DataGrid dataGrid.
I have written this:
myStore.onSet = function(item, attribute, oldValue, newValue) {
if (item.myField == myValue) {
var index = dataGrid.selection.selectedIndex;
dojo.style(dataGrid.getRowNode(index), "color" , "red");
}
}
but unfortunately this doesn't make any effect...
UPDATE: I added the following style property: "backgroundColor" : "red". Well, the background color of the row changes to red, but when the mouse moves away from the row, the color changes back to the default! It might be that some default event handlers restore the default styles...
The dojo.style line works if you call it by itself. Either your function isn't being called at all, the if's condition false or there is no row selected and you are getting an invalid number for the index. (You can put some console.logs there to check)
Related
I'm creating my own autocomplete feature based on vue.js and materializecss.
https://jsfiddle.net/guanzo/kykubquh/5/
Right now it's working okay, except for a few things.
The normal behavior for an autocomplete is that once you select an item by pressing enter, or clicking, the value of the input becomes your selected item. So if you input "alab", and select the item "Alabama", the value of the input should become "Alabama", and the dropdown list disappears.
The problem is that the input is bound with v-model="query", meaning the value of the input is the value of "query", which is the value of the input.
Trying to change the input value with this.$el.querySelector('input').value = "Alabama" does nothing. My current workaround is to set the value of query to be the value of the selected state.
onSelect(state){
this.selected = state;
this.query = state.name//replace input val
}
A nasty side effect of this is that changing the value of query triggers another search, which causes the dropdown to reappear with the item "Alabama".
How do i change the value of an input that has been bound with v-model?
My attempted workaround is to call this.onBlurInput(); after the user selects an item, which hides the dropdown. However, the dropdown will no longer appear until you explicity refocus the input by clicking outside and back again.
Remove your focus and blur events and add the following line to your queryMatches. You really only want to show options when there is not an exact match.
queryMatches(){
if(this.query.length <= 1){
return [];
}
// check to see if the current value is already in the list
if (this.query === this.selected.name) return [];
console.log(this.query)
var reg = new RegExp(this.query,'gi')
var matches = this.states.filter(state=>{
return reg.test(state.name)
})
console.log(matches)
return matches
}
Here is an updated fiddle.
I'm just wondering how can I change background colour of mandatory fields while adding new row.
So for example name and surname would be red (mandatory) and phone would be default white.
Thank you
Patryk
The best way to do this is through the grid's designer -- in most cases you don't need to write any code to accomplish this.
If you go to the Grid View designer, select the menu item "Appearance" and "Format Rules:"
From here, you can add a format condition by clicking the plus icon:
Under "Column," pick the column you want the format condition to apply to.
Under "Rule," pick an appropriate rule -- based on what you described, you probably want "Format Based on a Value," FormatConditionRuleValue.
On the "Rule" tab of this same dialog, you can set your "Value1" and "Condition" properties accordingly, for example Value1 = 15, Condition = "equals."
The "Appearance" property will let you determine how to format the cell based on these conditions.
The beauty of this approach is it's all designer-based code, and it's very easy to customize. The logic behind the formatting is also very transparent. The format conditions have been expanded to let you evaluate expressions as well, meaning you can create your own formulas using other column values and functions.
If all else fails, you can use the RowCellStyle event, but my first attempt would always to be to use the designer tools.
You can use an event gvView_CustomDrawCell and set background color only if the line is in state that you need (Added, Detached ...)
private void gvView_CustomDrawCell(object sender, DevExpress.XtraGrid.Views.Base.RowCellCustomDrawEventArgs e)
{
if (e.Column != null && (e.Column.Name == bgcName.Name || e.Column.Name == bgcSureName.Name))
{
DataRow focusedRow = gvView.GetDataRow(e.RowHandle);
if (focusedRow != null)
{
if (focusedRow.RowState == DataRowState.Added)
{
e.Appearance.BackColor = Color.FromArgb(80, 10, 30, 200);
}
}
}
}
asd
Ext.create('Ext.form.field.Picker', {
renderTo: Ext.getBody(),
id: 'colorpicker',
createPicker: function() {
return Ext.create('Ext.picker.Color', {
resizable: true,
floating: true,
select: function(selColor) {
Ext.getCmp('colorpicker').setValue("#" + selColor);
var x = Ext.getCmp('colorpicker').getValue();
alert(x);
Ext.getCmp('colorpicker').setFieldStyle('background-color:x ;background-image: none;');
}
});
}
});
In above sample of code I created a color picker by implementing create picker method of EXt.form.field.Picker as per ExtJS 4.0.7 sencha docs.
First Question
I am able to get the output only when I specify floating config to true (as mentioned in above sample). If I remove the config or made it false I am not able to see the color picker in the output so what is the reason behind that can anyone explain why floating config should be true?
Second Question
By using above sample code, I am getting the output but the color picker rendering has some problem one time it will display correctly while clicking on picker field drop down but sometimes color picker will appear above the field or somewhere on the page when drop down is clicked. So how to avoid this? I want to show it below when picker drop down is clicked.
Third Question
I want to apply background of the picker filed with the selected color value so I added the following line of code:
Ext.getCmp('colorpicker')
.setFieldStyle('background-color:x ;background-image: none;');`
Where x is the selected color value (say #000000 is color value when we select black color from color picker) but it is not applying color to text filed
When I replace x value with #000000 in that line of code say:
Ext.getCmp('colorpicker')
.setFieldStyle('background-color:#000000 ;background-image: none;');
Then it is showing black color for filed background but i want the color to be changed to selected color so I can't give the static color value.
Regarding the second question:
Instead of passing the string 'x' to the function ...
Ext.getCmp('colorpicker').setFieldStyle('background-color:x ;background-image: none;');
you should try something like:
Ext.getCmp('colorpicker').setFieldStyle('background-color:' + x + ' ;background-image: none;');
I have a TreeGrid in SmartClient. Now I want to color some set of lines like line numbers 3-5, 7-11 etc. I am using an external button which passes the values to the SmartClient. Can anybody tell me how to do that? A button is passing the value and it's working fine. But the problem is, where to get the value in SmartClient and how can I color that set of lines.
Since TreeGrid is a ListGrid, I would imagine you could override the getCellStyle function and set the colors as you see necessary.
http://www.smartclient.com/docs/8.1/a/b/c/go.html#search=getcellstyle
So basically in pseudo code:
if (row >= 3 and row <=5)
return "style1"
if (row >= 7 and row <=11)
return "style2"
else
return this.baseStyle
where style1 and 2 are defined in css
And how to custom and keep states with using specific style name (myStyle) like :
myStyle
myStyleDark
myStyleOver
myStyleOverDark
myStyleSelected
myStyleSelectedDark
myStyleSelectedOver
myStyleSelectedOverDark
myStyleDisabled
myStyleDisabledDark
I try to use #Override of getCellStyle
for returning "myStyleA" or "myStyleB"
which i want conserve dynamics suffixs : "Dark", "Over", "Selected", ...
An idea ?...
http://www.smartclient.com/smartgwt/javadoc/com/smartgwt/client/widgets/grid/ListGrid.html
The state of the record is indicated by adding a suffix to the base style.
There are four independent boolean states, which are combined in the order given:
"Disabled" : whether the cell is disabled; enable by setting the "enabled" flag on record returned by getCellRecord
"Selected" : whether cell is selected; enable by passing a Selection object as "selection"
"Over" : mouse is over this cell; enable with showRollovers
"Dark" : alternating color bands; enable with alternateRowStyles
Is it possible to turn off the row selection feature on Flexigrid?
It's somewhat annoying when you haven't implemented anything that makes use of the selection.
Unfortunately Mr Flibble's accepted answer does not stop all selection capability, it merely restricts it to one row.
To disable it completely, add a new property to the $.extend block (around line 20)
// apply default properties
p = $.extend({
<SNIP>
onSubmit: false, // using a custom populate function
disableSelect: true
Then in the .click section of the row (around line 754) add a check for the property
$(this)
.click(
function (e)
{
var obj = (e.target || e.srcElement); if (obj.href || obj.type) return true;
if (p.disableSelect) return true;
$(this).toggleClass('trSelected');
if (p.singleSelect) $(this).siblings().removeClass('trSelected');
}
)
Turns out you need to change the singleSelect property to true.
singleSelect: true
I know this thread is a bit old but I came upon it looking for the same thing. The singleSelect didn't work for me as I didn't want to be able to select any row. I found that I could remove any row selection with a single line of code:
$('.grid tr').unbind('click');
This a course removes all bindings on the table row so if you needed the binding you won't have it unless you rebind later but I needed to remove any and all row selection on my table. I didn't need to touch the flexigrid code to do so which I liked a bit more than previous answers.