I'm trying to set the background color of column headers in an Interactive Grid form. There are a couple of things that I've tried:
Assigned a static id to a column and made an inline css selector that targets that id - the outcome is that data cells only inherit those attributes while editing; header remains unaffected
Assigned a class to a column and made an inline css selector that targets that class - the outcome is that all data rows inherit those attributes; header still remains unaffected
I tried using the JavaScript Code option under Advanced that can use the configuration object and modify column behavior and appearance without much success. I managed to change column header text but nothing else. I suspect there is some member of that configuration object that affects header background color but I can't seem to find it.
So the question is:
How to customize Interactive Grid column header (namely, set its background color) using configuration object?
I suppose this might be considered a separate question, but if that turns out to be impossible, what would be the best alternative?
Re an alternative, if the change is static you can do it using page-level CSS. Each heading has a data-idx attribute whose value is a number unique within the grid. So if your IG region has the static ID "myRegion" then you can add CSS like the following to target a specific header:
#myRegion_ig th[data-idx="2"] {
background-color: #dff;
}
Or to make all IG headers on the page the same:
.a-GV-header {
background-color: #dff;
}
The first approach is problematic. It makes the change based on the position, not the particular column. If, for example, the first two columns in your grid are "First Name" & "Last Name", in that order. "First Name" would be data-idx = 1; "Last Name" would be data-idx = 2. If you assign the color blue to data-idx = 1 and green to data-idx = 2, then "First Name" will blue and "Last Name" will be green. However, if you swap then position of the two columns so that the order in your IG is "Last Name", "First Name", then "Last Name" will now be blue and "First Name" will be green.
The second approach works if you want to change the color of all the headers to only one color.
Related
I wish to have a list of text items in a PySimpleGUI that I can update later. That is, I want to have a key for the list. This might be vertical or horizontal, and I do not know how many items there will be.
I end up with different use cases, but the current one is to make a single line of text items with different colors. Other times, I need to write and update a customized table, just different enough that the table widget does not work.
Conceptually, I want to do something like this:
layout = [ [sg.T('Titles and Things')], sg.ListThing(key='-data-', [[]]) ]
so that I can:
window['-data-'].update(values=[ [sg.T(v, color=c)] for (v,c) in my_data ])
Another, invalid syntax, way of saying what I want is to use [key="-data-", sg.T('Item1'), sg.T('Item2')].
Is this possible?
You can update individual layout elements but you cannot dynamically change the layout itself.
It is possible to create 2 or more elements, whereby only one of them is visible, and switch them later as needed. Or you can close and re-create the window with another layout. Or combine both approaches.
An example of switching layouts:
def change_layout():
left_col_1 = sg.Column([[sg.Text(f'Text {i}') for i in range(4)]], visible=True, key='col_1')
left_col_2 = sg.Column([[sg.Text(f'Text {i}')] for i in range(6)], visible=False, key='col_2')
visible_1 = True
layout = [[sg.Column([[left_col_1, left_col_2]]), sg.Button('Change layout', key='change')]]
window = sg.Window('window', layout=layout, finalize=True)
while True:
event, values = window.read()
print(event)
print(values)
print(visible_1)
if event in ('Exit', sg.WIN_CLOSED):
break
if event == 'change':
window['col_1'].update(visible=not visible_1)
window['col_2'].update(visible=visible_1)
visible_1 = not visible_1
Please notice that the alternative layouts for the left part (left_col_1, left_col_2) need to be enclosed in a container (column, frame) to keep their position in the window in the moment they are invisible.
I want to add a custom tooltip on jqgrid column headers.i hover over the column name and i get the tooltip(describes content related to that col)
I don't think there is any built-in way to add custom headers. If you use the headertitles option, it will just use the text as the title attribute.
You'll probably have to set them manually doing something like this:
$("th[role='columnheader']").attr("title", "some description");
You can add that code to one of the callbacks such as gridComplete.
Thanks David for your answer.
we can do one more thing as shown in the code below :
var thd = jQuery("thead:first", grid[0].grid.hDiv)[0];
jQuery("tr.ui-jqgrid-labels th:eq(" + columnnumber + ")", thd).attr("title","This column tells you about people who attended the training but missed the test");
if you want to show custome tooltip for all column you can probably add a loop from first column to last column and have the "text" in an array
var arr=["hello","bla bla","a ","b","c"];
and use this array in the loop
We're using the Html.DropDownList and other controls in various MVC3 user data entry forms.
When a user is editing a records data values and they haven't specified values for a DropDownList then the optionLabel text of 'Select One' is displayed in the input field.
We'd like to make it more obvious to the end-user when they're viewing a screen of data that 'Select One' isn't a data value by showing it in a different font colour (blue ?) and in italics.
Has anyone any ideas how to simply achieve this ?
If the DropDownList is required... just mark that field as requiered using the somehow standard red "(*)". If the user submit the form, the client side validation will display the message telling the user that this field is required.
The level of customization of the <select> HTML element is pretty limited. IIRC you could change the color but I am not sure that you can show it in italics:
#Html.DropDownListFor(
x => x.Foo,
Model.Foos,
"-- select a foo --",
new { #class = "foo" }
)
and then in your CSS file define the .foo rule:
.foo option:first-child {
color: red;
}
If you want more customizations of the look and feel of the standard <select> element you might take a look at some of the available jQuery plugins.
can I do this:
set font color in expression,
=IIF(nameOfTableRow.Visibility.Hidden=true, "Black", "Silver")
How can I get value of hidden properties ??
TABLE
|______________________________|
|______________________________|
|_____________________________| <---- One Detail Row (visibility-hidden: true/false)
You could make use of Report Parameters to get this done. Here are the steps.
Declare a ReportParameter named "RowVisibility" with datatype set as Boolean
Then from the report designer, select the entire "Detail" row and set it's RowVisibility to that parameter "[#RowVisibility]" as shown below.
Then for each individual Textbox present inside the Detail row. Set it's Color property to your expression string.
=IIF(Parameters!RowVisibility.Value=true, "Black", "Silver")
This would work as you expected. So based on the report parameter the Tablix RowVisibility will be set and based on the same parameter the Font color also be changed.
Hope this helps.
in my site , i have a jqgrid table.
by default, the names of the columns (header) is longer than the width for column, because that i set the name with an ellipsis.
however, when resizing the column, the short name with ellipsis stays.
how can i get it work automatic ,
like the ellipsis should disappear and change to the full name when there is enough space, when the user is expanding the column.
thanks
You can add an event handler after the resizing finishes to reset the names. How are you storing / changing the names? If they're in an array, you can add a function like:
var columnNames = ['first', 'second', 'third'];
$("#mygrid").jqGrid({
...
resizeStop: function(newwidth, index){
jQuery("#mygrid").jqGrid('setLabel',index,columnNames[index]);
},
...
});