Embedded Slickgrid Table in Iframe not rendering completely(Iframe-Html) #1092

starzar · 2024-12-22T09:22:17Z

Describe the bug

Video -> here

Slickgrid output

Bokeh output

'Standalone' Slickgrid Table with Frozen columns renders fine but when embedded into a html Iframe (NO SERVER),the table does not render completely.

Missing - TableHeader, Unfrozen rows do not render throughout the width of the table.

Also , tried creating the same table in BOKEH-PYTHON(which uses slickgrid with a SHADOWROOT implementation) and then embedding it in a html- iframe which went fine.However bokeh-slickgrid lacks features.

IS THERE ANY EXAMPLE TO EMBED SLICKGRID TABLE AS A SHADOWROOT ELEMENT(below implementation is NOT WORKING - Header and Rows are rendered in a single column) ?

SLICKGRID TABLE AS A SHADOWROOT ELEMENT:

Image - https://drive.google.com/file/d/1Tru9ACiM2k_HvZM2U5MvyeXA2TqRtSk-/view?usp=sharing

Reproduction

EMBEDDED HTML(IFRAME) :

<button class="tablink" onclick="openPage('slicktable)', this,'violet')">Slicktable</button>   
    
<div id="slicktable" class="tabcontent">
             <iframe width="100%" height="100%"id = "Iframe_1" src=slicktable_path.html"></iframe></div>

**Slickgrid with Shadowroot(NOT WORKING - Header and Rows are rendered in a single column **) :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SlickGrid Draggable Lines</title>
<!--  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slickgrid/2.4.1/slick.grid.min.css">-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slickgrid@5.14.0/dist/styles/css/slick-alpine-theme.min.css">
  <script src="https://cdn.jsdelivr.net/npm/slickgrid@5.14.0/dist/browser/slick.core.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/slickgrid@5.14.0/dist/browser/slick.interactions.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/slickgrid@5.14.0/dist/browser/slick.grid.min.js"></script>
  <style>
   /* Optional styling for iframe content */
    body {
        margin: 0;
        padding: 0;
    };
    #shadow-host {
    width: 100%;
    max-width: 1800px; /* Or any preferred width */
  }

  </style>
</head>
<body>
<div id = "htmltitle"></div>
  <script>
    const htmltitle = {{ html_title | tojson | safe }};
    document.querySelector("#htmltitle").innerHTML = htmltitle;
  </script>

<!--<div id="myGrid" style="width: 1800px; height: 800px;"></div>-->
<div id="shadow-host"></div>
  <script>
    //ShadowRoot for embedding Slicktable in Iframe
    const data_df = {{ data | safe }};
    //const data_df = {{ data | tojson | safe}};
    console.log(data_df);

    // Shadow DOM setup
    const host = document.querySelector("#shadow-host");
    const shadowRoot = host.attachShadow({ mode: "open" });

    // SlickGrid setup
    const gridContainer = document.createElement("div");
    gridContainer.id = "myGrid";
    gridContainer.style.width = "100%";
    gridContainer.style.height = "100%";

    shadowRoot.appendChild(gridContainer);

    

<!--    # Table column list-->
    let dftotal_columns_frozen_1 = ['Strike','Spot'];
    let dftotal_columns_frozen_2 = [ 'Expiry', 'Date', ];
    let dftotal_columns_frozen_3 = [  'nDay','cLtp', 'pLtp',];
    let dftotal_columns_Lptpct = ['cLtp%', 'pLtp%', ];
    let dftotal_columns_oiVol = ['cVol', 'pVol',];
    let dftotal_columns_oiSplit = [ 'cSellOi','cBuyOi','pSellOi','pBuyOi','cNet','pNet', 'OiSell_n','OiBuy_n', 'OiSB_n',];
    let dftotal_columns_oiSplitdiff =['cSellOi_d','pSellOi_d', 'cBuyOi_d','pBuyOi_d','cNet_d','pNet_d','OiSell_n_d', 'OiBuy_n_d', 'OiSB_n_d'];
    let dftotal_columns_oiCombined = ['cOi', 'pOi','OiChOv_n', 'cOichg', 'pOichg', 'OiChIn_n', ];
    let dftotal_columns_oiCombineddiff =['cOi_d', 'pOi_d', 'OiChOv_n_d', 'OiChIn_n_d', ];
    let dftotal_columns_oiIv = ['P/C', 'P/Cchg', 'Call_lsr', 'Put_lsr', 'cIv', 'pIv',];
    let dftotal_columns_oiIvdiff = ['P/C_d', 'P/Cchg_d', 'Call_lsr_d', 'Put_lsr_d', 'cIv_d', 'pIv_d'];


    let table_dftotal_columns_frozen_1 = dftotal_columns_frozen_1.map((col_cur)=>({id :`${col_cur}`,field :`${col_cur}`, name :`${col_cur}`,width : 50, }));
    let table_dftotal_columns_frozen_2 = dftotal_columns_frozen_2.map((col_cur)=>({id :`${col_cur}`,field :`${col_cur}`, name :`${col_cur}`,width : 80,}));
    let table_dftotal_columns_frozen_3 = dftotal_columns_frozen_3.map((col_cur)=>({id :`${col_cur}`,field :`${col_cur}`, name :`${col_cur}`,width : 50, }));
    let table_dftotal_columns_Lptpct  = dftotal_columns_Lptpct.map((col_cur)=>({id :`${col_cur}`,field :`${col_cur}`, name :`${col_cur}`, width :70,}));
    let table_dftotal_columns_oiSplit = dftotal_columns_oiSplit.map((col_cur)=>({id :`${col_cur}`,field :`${col_cur}`, name :`${col_cur}`, width :70, }));
    let table_dftotal_columns_oiSplitdiff  = dftotal_columns_oiSplitdiff.map((col_cur)=>({id :`${col_cur}`,field :`${col_cur}`, name :`${col_cur}`, width :70, }));
    let table_dftotal_columns_oiCombined = dftotal_columns_oiCombined.map((col_cur)=>({id :`${col_cur}`,field :`${col_cur}`, name :`${col_cur}`, width :70}));
    let table_dftotal_columns_oiCombineddiff = dftotal_columns_oiCombineddiff.map((col_cur)=>({id :`${col_cur}`,field :`${col_cur}`, name :`${col_cur}`, width :70, }));
    let table_dftotal_columns_oiIv = dftotal_columns_oiIv.map((col_cur)=>({id :`${col_cur}`,field :`${col_cur}`, name :`${col_cur}`, width :70,}));
    let table_dftotal_columns_oiIvdiff = dftotal_columns_oiIvdiff.map((col_cur)=>({id :`${col_cur}`,field :`${col_cur}`, name :`${col_cur}`, width :70, }));




<!--    # Display all columns--> 
    let columns = [ ...table_dftotal_columns_frozen_1
        ,...table_dftotal_columns_frozen_2
        ,...table_dftotal_columns_frozen_3
        ,...table_dftotal_columns_Lptpct
        ,...table_dftotal_columns_oiSplit
        ,...table_dftotal_columns_oiSplitdiff
        ,...table_dftotal_columns_oiCombined
        ,...table_dftotal_columns_oiCombineddiff
        ,...table_dftotal_columns_oiIv
        ,...table_dftotal_columns_oiIvdiff];

    console.log(columns);
    const options = {
      enableCellNavigation: true,
      enableColumnReorder: false,
      frozenColumn: 9,
    };

    //STYLE SLICKTABLE
    const style = document.createElement("style");
        style.textContent = `
        .highlight-line {
              position: absolute;
              width: 100%;
              height: 2px;
          z-index: 10;
          cursor: grab;
        }
        .highlight-line.dragging {
          opacity: 0.5;
        }
        .highlight-line.red {
          background-color: red;
        }
        .highlight-line.orange {
          background-color: orange;
        }
        .slick-row {
          position: relative; /* Needed for absolute positioning of lines */
        }

        .positive {
            color: green;
        }
        .negative {
            color: red;
        }
        #htmltitle {
          width: 100%;
          text-align: left;
          font-size : 20px;

        }
        #myGrid {
          width: 100%;

        }`;

      shadowRoot.appendChild(style);


    const grid = new Slick.Grid(gridContainer,data_df, columns , options);

        </script>
    </body>
</html>

Which Framework are you using?

Vanilla / Plain JS

Environment Info

| Executable          | Version |
| ------------------- | ------- |
| (framework used)    | VanillaJs |
| SlickGrid | VERSION |5.14.0|

| Browser(s)          | Chrome|Edge|Firefox|
| System OS           | Windows10|

Validations

Follow our Code of Conduct
Read the Wikis.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Check that this is a concrete bug. For Q&A open a GitHub Discussion.
The provided reproduction is a minimal reproducible example of the bug.

The text was updated successfully, but these errors were encountered:

ghiscoding · 2024-12-30T06:30:23Z

There is a ShadowDOM Example which is working fine. There was the PR #889 that fixed issues related to ShadowDOM. I don't personally use any ShadowDOM but since the example is working fine, I'm pretty sure the problem is on your side and perhaps you should ask this type of question on Stack Overflow.

We can't help by just looking at videos and also the Bokeh is a Python project using a very old version of SlickGrid that they forked. So that's not a really good comparison to do because we will certainly not compare our codebase with them. The best way to provide a repro is to use the Stackblitz link provided on the main readme, modify it to demo your issue and then save it and provide the link.

Side note, quickly comparing your code with the ShadowDOM example, it looks like you forgot to add the CSS stylesheet into the Shadow root, as per these lines taken from the example

SlickGrid/examples/example1a-shadow-dom.html

Lines 83 to 87 in d2f4355

    
           var linkElement = document.createElement("link"); 
        
           linkElement.type = "text/css"; 
        
           linkElement.rel = "stylesheet"; 
        
           linkElement.href = "../dist/styles/css/slick-alpine-theme.css"; 
        
           shadow.appendChild(linkElement);

lhere-artepe · 2024-12-30T07:26:43Z

Just as an additional comment, I'm not using shadow DOM or any of the other variants you mention, but I have used SlickGrid in iFrames with no issues.

ghiscoding · 2025-01-11T22:18:25Z

closing since this seems like an issue on the user's side, make sure to properly load your CSS files when using iFrame and/or ShadowDOM

ghiscoding closed this as completed Jan 11, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Embedded Slickgrid Table in Iframe not rendering completely(Iframe-Html) #1092

Embedded Slickgrid Table in Iframe not rendering completely(Iframe-Html) #1092

starzar commented Dec 22, 2024 •

edited

Loading

ghiscoding commented Dec 30, 2024 •

edited

Loading

lhere-artepe commented Dec 30, 2024

ghiscoding commented Jan 11, 2025

Embedded Slickgrid Table in Iframe not rendering completely(Iframe-Html) #1092

Embedded Slickgrid Table in Iframe not rendering completely(Iframe-Html) #1092

Comments

starzar commented Dec 22, 2024 • edited Loading

Describe the bug

IS THERE ANY EXAMPLE TO EMBED SLICKGRID TABLE AS A SHADOWROOT ELEMENT(below implementation is NOT WORKING - Header and Rows are rendered in a single column) ?

Reproduction

Which Framework are you using?

Environment Info

Validations

ghiscoding commented Dec 30, 2024 • edited Loading

lhere-artepe commented Dec 30, 2024

ghiscoding commented Jan 11, 2025

starzar commented Dec 22, 2024 •

edited

Loading

ghiscoding commented Dec 30, 2024 •

edited

Loading