hiperlink mode flat

Answered
ELG PEDESTAIS asked on November 29, 2022

Ao colocar a tabela no modo flat, nao deixa utilizar link na celula.

11 answers

Public
Solomiia Andrusiv Solomiia Andrusiv Flexmonster November 30, 2022

Hello, Douglas!

Thank you for contacting us.

We have an assumption that you are using the customizeCell() function to add the links to the cells, and they are not clickable when switching to flat form.
If so, you need to increase the z-index for the links to click on them.
We have prepared a JSFiddle example for visualization: https://jsfiddle.net/flexmonster/7zf1o8c9/.

Please let us know if the suggested approach works for your case.

Looking forward to hearing from you.

Regards,
Solomiia

Public
ELG PEDESTAIS November 30, 2022

It's a fine, thanks.

Public
Solomiia Andrusiv Solomiia Andrusiv Flexmonster December 1, 2022

Hello, Douglas!

Thank you for your swift response.

We are glad to hear that the suggested approach of clicking links on cells of the flat gid was helpful.

Feel free to contact us in case of any other questions.

Regards,
Solomiia

Public
ELG PEDESTAIS December 1, 2022

Aproveitando como posso colocar cor na linha toda quando no modo flat e também usando o cruzado, exemplo, https://www.flexmonster.com/api/customizecell/
 

Attachments:
Screenshot_1.png

Public
Solomiia Andrusiv Solomiia Andrusiv Flexmonster December 1, 2022

Hello, Douglas!
 
Thank you for contacting us.
 
Kindly note that it is possible to paint the whole row of the flat grid depending on the value of the cell using the customizeCell() function. 
The idea lies in the following:
 
1. Inside the customizeCell() function, add the conditions to work with the needed grid type and hierarchy members:

if( flexmonster.getOptions().grid.type != "flat" ) return;

if( data.hierarchy && data.hierarchy.uniqueName == "Country"
&& data.member && data.member.caption == "Canada"){...}

2. Inside the if statement, create the new style element and add CSS rules to it:

if( data.hierarchy && data.hierarchy.uniqueName == "Country" && data.member && data.member.caption == "Canada")
{
var styleTag = document.createElement('style');
let style = ".fm-grid-layout.fm-flat-view div.fm-cell[data-r='" + data.rowIndex + "']:not(.fm-empty)";
    style += "{ background-color: #B2DBBF !important; }";
    styleTag.innerHTML += style;
}

3. On the aftergriddraw event handler, add created styles to the document.head and clean the previously added styles to avoid duplication:

aftergriddraw: function(e) {  

let prevStyleTag = document.head.getElementsByTagName("style");

  for (let i = 0; i < prevStyleTag.length; i++) {
    if (prevStyleTag[i].innerHTML.indexOf(".fm-grid-layout.fm-flat-view div.fm-cell") == 0) {
      if (window.ActiveXObject || "ActiveXObject" in window) {
        prevStyleTag[i].removeNode(true);
      } else {
        prevStyleTag[i].remove();
      }
    }
  }

  document.head.appendChild(styleTag);

}

Here is a JSFiddle example for visualization: https://jsfiddle.net/flexmonster/2nv2L752/.
In this example, all rows with the Canada member of the Country field are highlighted.
 
Let us know if the suggested approach satisfies your needs.
 
Also, we would like to kindly ask you to post future questions in English.
Thank you in advance!
 
Looking forward to hearing from you.
 
Regards,
Solomiia

Public
Solomiia Andrusiv Solomiia Andrusiv Flexmonster December 8, 2022

Hello, Douglas!

Hope you are doing well.

Our team is wondering if you had some time to check out the suggested approach of highlighting a row in a flat view.
Could you please let us know if it works for your case?

Looking forward to hearing from you.

Regards,
Solomiia

Public
ELG PEDESTAIS December 8, 2022

Ola, fiz alguns testes, mas ao fazer o ordenamento de linhas pelo header, o sistema de cores nao acompanha as linhas reordenadas, por fim acabamos mudando de tecnologia para essa rotina.

Public
Solomiia Andrusiv Solomiia Andrusiv Flexmonster December 12, 2022

Hello, Douglas!
 
Thank you for your feedback.
 
Our team has improved the example of highlighting the rows in the flat view based on the column value.
The idea is connected to Flexmonster’s virtual scroll feature, which renders not all the rows present in the dataset, but only those visible on the grid, with a small reserve of rows above and below the visible area.
Keeping this in mind, we can highlight the rows dynamically every time they are rendered on the grid.
 
Here is a JSFiddle sample visualizing the suggested approach: https://jsfiddle.net/flexmonster/9a4o8ne6/.
 
Could you please check out the improved approach and let us know if everything works well now?
 
Looking forward to hearing from you.
 
Regards,
Solomiia

Public
Solomiia Andrusiv Solomiia Andrusiv Flexmonster December 20, 2022

Hello, Douglas!

Hope everything is well.

Just checking in to ask if you had a chance to try the improved approach of highlighting a row on the flat grid. Please let us know if it works well now.

Looking forward to your response.

Kind regards,
Solomiia

Public
ELG PEDESTAIS December 20, 2022

ok, thanks

Public
Solomiia Andrusiv Solomiia Andrusiv Flexmonster December 20, 2022

Hello, Douglas!

Thank you for your response.

You are welcome to contact us in case of any other questions.

Regards,
Solomiia

Please login or Register to Submit Answer