Dear all,

Is there a way to change the highlight color of the selected grid row and column? I want to be able do it during runtime or at system startup not at design time. If there is a way kindly tell me.

George.

asked 07 Jan '14, 00:52

grajan777's gravatar image

grajan777
1011226
accept rate: 10%

edited 04 Jan '15, 11:50


Hi,

This is a solution I have found for highlighting the selected row and also the currently selected column. This is done through a file called cust.css. I am giving below the full content of my cust.css file. The file is stored in:

webapps\formspider\apps\CM_MENU\css directory.

CM_MENU is the name of my application.

There are four steps to follow if you want to use this.

  1. Make a css file with the content given below.
  2. Store the file in this directory: webapps\formspider\apps\CM_MENU\css. Replace CM_MENU with your application name.
  3. Edit your application and enter the name of your css file in *CSS Filename* column.
  4. Clear your web browser cache.

Run your application. Test with different colors. Whenever you change the css file make sure to clear the cache before running your application.

Following is the content of my cust.css file.

/** Grid */
/* FOR ANY CHANGES TO TAKE EFFECT CLEAR THE BROWSER CACHE AND RUN THE APPLICATION */

/* Default style for selected row in grid */
.bdf-grid .bdf-grid-row-selected .x-grid3-cell-inner {
  background-color: YELLOW !important;
  border-color: RED;
}
/* Default style for selected cell in grid */
.bdf-grid .x-grid3-cell-selected {
  background-color: SPRINGGREEN !important;
  border: 2px solid red !important;
}

/*background and boarder color for the form textfield */
.x-form-focus, .x-trigger-wrap-focus .bdf-textfield-trigger {
  background-color: SPRINGGREEN !important;
  border: 2px solid red !important;
}

Regards.

George.

link

answered 03 Jan '15, 13:45

grajan777's gravatar image

grajan777
1011226
accept rate: 10%

edited 04 Jan '15, 11:48

Hello George,

There's no API to change highlight color of grid. It comes from one of the CSS files of Formspider. Therefore, if you want to change it dynamically, you should load new CSS to document's HEAD and override existing one. And you should call this javascript code via Formspider externalMethods.

e.g.

Below code will change highlight color to Red. If you create an external method and invoke it with parameter like above, you can change the highlight color of grid.

function loadCss(cssText){
    var style = document.createElement('style');
    style.type='text/css';
    style.innerHTML = cssText;
    document.getElementsByTagName('head')[0].appendChild(style);
}

loadCss('.bdf-grid .bdf-grid-row-selected .x-grid3-cell-inner {' + 
    '    background-color: red !important; ' +
    '    border-color: black; ' +
'}');

However, for every call of loadCss function, a new tag will be appened to HEAD element. So this code is for demonstration purpose only. You shouldn't use this in production.

Hope this helps,

link

answered 07 Jan '14, 11:49

Serdar's gravatar image

Serdar ♦♦
100k4
accept rate: 14%

edited 07 Jan '14, 12:14

Thx for the css code. Care to add some check if that appendChild is not necessary because it has already been done?

(25 Nov '14, 07:31) dipr
Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Tags:

×85
×14
×3

Asked: 07 Jan '14, 00:52

Seen: 3,047 times

Last updated: 04 Jan '15, 11:50


© Copyright Gerger 2017