Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #109630
    Joko Pitoyo
    Participant

    <div>
    <div><script></div>
    <div>    import “smart-webcomponents/source/modules/smart.button.js”;</div>
    <div>    import “smart-webcomponents/source/modules/smart.grid.js”;</div>
    <div>    import “smart-webcomponents/source/modules/smart.tabs.js”;</div>
    <div>    import “smart-webcomponents/source/modules/smart.splitter.js”;</div>
    <div></div>
    <div>    import { onMount } from “svelte”;</div>
    <div>    import { generateData } from “../../data/data.js”;</div>
    <div>    let showForm = true;</div>
    <div>    const initGrid = () => {</div>
    <div>        Smart(</div>
    <div>            “#grid”,</div>
    <div>            class {</div>
    <div>                get properties() {</div>
    <div>                    return {</div>
    <div>                        behavior: { columnResizeMode: “growAndShrink” },</div>
    <div>                        appearance: {</div>
    <div>                            alternationCount: 2,</div>
    <div>                            showRowHeader: true,</div>
    <div>                            showRowHeaderSelectIcon: true,</div>
    <div>                            showRowHeaderFocusIcon: true,</div>
    <div>                            allowHover: true,</div>
    <div>                        },</div>
    <div>                        paging: {</div>
    <div>                            enabled: false,</div>
    <div>                        },</div>
    <div>                        pager: {</div>
    <div>                            visible: false,</div>
    <div>                        },</div>
    <div>                        sorting: {</div>
    <div>                            enabled: true,</div>
    <div>                            mode: “many”,</div>
    <div>                            commandKey: “altKey”,</div>
    <div>                        },</div>
    <div>                        filtering: {</div>
    <div>                            enabled: true,</div>
    <div>                        },</div>
    <div>                        editing: {</div>
    <div>                            enabled: true,</div>
    <div>                        },</div>
    <div>                        selection: {</div>
    <div>                            enabled: true,</div>
    <div>                            allowCellSelection: true,</div>
    <div>                            allowRowHeaderSelection: true,</div>
    <div>                            allowColumnHeaderSelection: true,</div>
    <div>                            mode: “extended”,</div>
    <div>                        },</div>
    <div>                        summaryRow: {</div>
    <div>                            visible: true,</div>
    <div>                            editing: true,</div>
    <div>                        },</div>
    <div>                        behavior: { columnResizeMode: “growAndShrink” },</div>
    <div>                        dataSource: new Smart.DataAdapter({</div>
    <div>                            dataSource: generateData(10000),</div>
    <div>                            dataFields: [</div>
    <div>                                “id: number”,</div>
    <div>                                “firstName: string”,</div>
    <div>                                “lastName: string”,</div>
    <div>                                “productName: string”,</div>
    <div>                                “quantity: number”,</div>
    <div>                                “date: date”,</div>
    <div>                                “price: number”,</div>
    <div>                                “total: number”,</div>
    <div>                            ],</div>
    <div>                        }),</div>
    <div>                        columns: [</div>
    <div>                            {</div>
    <div>                                label: “First Name”,</div>
    <div>                                dataField: “firstName”,</div>
    <div>                                columnGroup: “name”,</div>
    <div>                            },</div>
    <div>                            {</div>
    <div>                                label: “Last Name”,</div>
    <div>                                dataField: “lastName”,</div>
    <div>                                columnGroup: “name”,</div>
    <div>                            },</div>
    <div>                            {</div>
    <div>                                label: “Product”,</div>
    <div>                                dataField: “productName”,</div>
    <div>                                columnGroup: “order”,</div>
    <div>                            },</div>
    <div>                            {</div>
    <div>                                label: “Order Date”,</div>
    <div>                                cellsFormat: “MM/dd/yyyy”,</div>
    <div>                                dataField: “date”,</div>
    <div>                                columnGroup: “order”,</div>
    <div>                            },</div>
    <div>                            {</div>
    <div>                                label: “Quantity”,</div>
    <div>                                dataField: “quantity”,</div>
    <div>                                columnGroup: “order”,</div>
    <div>                            },</div>
    <div>                            {</div>
    <div>                                label: “Unit Price”,</div>
    <div>                                dataField: “price”,</div>
    <div>                                cellsFormat: “c2”,</div>
    <div>                                columnGroup: “order”,</div>
    <div>                                formatFunction(settings) {</div>
    <div>                                    const rowId = settings.row;</div>
    <div>                                    const columnDataField = settings.column;</div>
    <div>                                    const template = settings.template;</div>
    <div>                                    if (settings.value >= 4) {</div>
    <div>                                        settings.cell.background = “#00A45A”;</div>
    <div>                                        settings.cell.color = “#fff”;</div>
    <div>                                    } else if (settings.value < 2) {</div>
    <div>                                        settings.cell.background = “#DF3800”;</div>
    <div>                                        settings.cell.color = “#fff”;</div>
    <div>                                    } else {</div>
    <div>                                        settings.cell.background = “#FFFDE1”;</div>
    <div>                                        settings.cell.color = “#333”;</div>
    <div>                                    }</div>
    <div>                                    settings.value =</div>
    <div>                                        “$” +</div>
    <div>                                        new Number(settings.value).toFixed(2);</div>
    <div>                                },</div>
    <div>                            },</div>
    <div>                            {</div>
    <div>                                label: “Total”,</div>
    <div>                                dataField: “total”,</div>
    <div>                                cellsFormat: “c2”,</div>
    <div>                                columnGroup: “order”,</div>
    <div>                                formatFunction(settings) {</div>
    <div>                                    const rowId = settings.row;</div>
    <div>                                    const columnDataField = settings.column;</div>
    <div>                                    const template = settings.template;</div>
    <div>                                    if (settings.value >= 20) {</div>
    <div>                                        settings.cell.background = “#00A45A”;</div>
    <div>                                        settings.cell.color = “#fff”;</div>
    <div>                                    }</div>
    <div>                                    if (settings.value <= 5) {</div>
    <div>                                        settings.cell.background = “#DF3800”;</div>
    <div>                                        settings.cell.color = “#fff”;</div>
    <div>                                    } else {</div>
    <div>                                        settings.cell.background = “#FFFDE1”;</div>
    <div>                                        settings.cell.color = “#333”;</div>
    <div>                                    }</div>
    <div>                                    settings.value =</div>
    <div>                                        “$” +</div>
    <div>                                        new Number(settings.value).toFixed(2);</div>
    <div>                                },</div>
    <div>                            },</div>
    <div>                        ],</div>
    <div>                        columnGroups: [</div>
    <div>                            {</div>
    <div>                                label: “Customer Name”,</div>
    <div>                                align: “center”,</div>
    <div>                                name: “name”,</div>
    <div>                            },</div>
    <div>                            {</div>
    <div>                                label: “Order Detals”,</div>
    <div>                                align: “center”,</div>
    <div>                                name: “order”,</div>
    <div>                            },</div>
    <div>                        ],</div>
    <div>                    };</div>
    <div>                }</div>
    <div>            },</div>
    <div>        );</div>
    <div>    };</div>
    <div>    const toggleView = () => {</div>
    <div>        showForm = !showForm; // Toggle between form and data grid</div>
    <div>    };</div>
    <div>    onMount(() => {</div>
    <div>        initGrid();</div>
    <div>    });</div>
    <div></script></div>
    <div><h1>Welcome to SvelteKit</h1></div>
    <div><button on:click={toggleView}>Button</button></div>
    <div><div style=”display: {showForm ? ‘block’ : ‘none’};”></div>
    <div>    <!– Your form goes here –></div>
    <div>    <form></div>
    <div>        <!– Form fields –></div>
    <div>    </form></div>
    <div></div></div>
    <div><div style=”display: {showForm ? ‘none’ : ‘block’};”></div>
    <div>    <!– Your data grid goes here –></div>
    <div>    <smart-splitter id=”splitter” live-resize></div>
    <div>        <smart-splitter-item id=”item0″></div>
    <div>            <p></div>
    <div>                The tiger (Panthera tigris) is the largest cat species, most</div>
    <div>                recognizable for its pattern of dark vertical stripes on</div>
    <div>                reddish-orange fur with a lighter underside.</div>
    <div>            </p></div>
    <div>        </smart-splitter-item></div>
    <div>        <smart-splitter-item id=”item1″></div>
    <div>            <smart-grid id=”grid”></smart-grid></div>
    <div>        </smart-splitter-item></div>
    <div>    </smart-splitter></div>
    <div></div></div>
    Smart-Script want’show and result error something like this:

    smart-splitter: “insertBefore” method accepts an object or an array of objects as it’s second parameter.</div>
    <div></div>
    <div>how to solve this problem?</div>

    #109631
    Markov
    Keymaster

    Hi,

    Please, take a look at https://www.htmlelements.com/docs/svelte/ for svelte integration.

    Regards,
    Markov

    Smart UI Team
    https://www.htmlelements.com/

    #109639
    Joko Pitoyo
    Participant

    hi,

    i already follow guide before, and i have no problem for simple demo like you have metion, but for another component like smart-splitter we got same error, for example:

    +page.svelte

    <script>
        import 'smart-webcomponents/source/modules/smart.splitter.js';
    </script>
    <smart-splitter id="splitter" live-resize>
        <smart-splitter-item id="item0">
            <p>The tiger (Panthera tigris) is the largest cat species, most recognizable for its pattern of dark vertical stripes on reddish-orange fur with a lighter underside.</p>
        </smart-splitter-item>
        <smart-splitter-item id="item1">
            <h2>BENGAL TIGER</h2>
            <img alt="Test" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Tiger_in_Ranthambhore.jpg/220px-Tiger_in_Ranthambhore.jpg" />
            <p>The Bengal tiger's coat is yellow to light orange, with stripes ranging from dark brown to black; the belly and the interior parts of the limbs are white, and the tail is orange with black rings.</p>
            <p>Males have an average total length of 270 to 310 cm (110 to 120 in) including the tail, while females measure 240 to 265 cm (94 to 104 in) on average. The tail is typically 85 to 110 cm</p>
        </smart-splitter-item>
    </smart-splitter>

    above sample will not appear in web browser, and got same error in console log:

    smart-splitter: "insertBefore" method accepts an object or an array of objects as it's second parameter.
    
    [HMR][Svelte] Unrecoverable HMR error in <Root>: next update will trigger a full reload
    Uncaught (in promise) smart-splitter: "insertBefore" method accepts an object or an array of objects as it's second parameter.
    #109645
    Markov
    Keymaster

    Hi Joko,

    You can use this:

    
    

    <script>
    import “smart-webcomponents/source/modules/smart.splitter.js”;
    import {onMount} from ‘svelte’;
    onMount(() => {
    const splitter = document.querySelector(“#splitter”);
    splitter.innerHTML = `
    <smart-splitter id=”splitter” live-resize>
    <smart-splitter-item id=”item0″>
    <p>The tiger (Panthera tigris) is the largest cat species, most recognizable for its pattern of dark vertical stripes on reddish-orange fur with a lighter underside.</p>
    </smart-splitter-item>
    <smart-splitter-item id=”item1″>
    <h2>BENGAL TIGER</h2>
    <img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Tiger_in_Ranthambhore.jpg/220px-Tiger_in_Ranthambhore.jpg&#8221; />
    <p>The Bengal tiger’s coat is yellow to light orange, with stripes ranging from dark brown to black; the belly and the interior parts of the limbs are white, and the tail is orange with black rings.</p>
    <p>Males have an average total length of 270 to 310 cm (110 to 120 in) including the tail, while females measure 240 to 265 cm (94 to 104 in) on average. The tail is typically 85 to 110 cm</p>
    </smart-splitter-item>
    </smart-splitter>`;
    })

    </script>

    <h1>Welcome to SvelteKit</h1>
    <div id=”splitter”>
    </div>

    Regards,
    Markov

    Smart UI Team
    https://www.htmlelements.com/

    #109649
    Joko Pitoyo
    Participant

    Actually i have another solution, like this, but i prefer using web component style,

    <script>
        import 'smart-webcomponents/source/modules/smart.splitter.js';
    </script>
    { @html <smart-splitter id="splitter" live-resize>
        <smart-splitter-item id="item0">
            <p>The tiger (Panthera tigris) is the largest cat species, most recognizable for its pattern of dark vertical stripes on reddish-orange fur with a lighter underside.</p>
        </smart-splitter-item>
        <smart-splitter-item id="item1">
            <h2>BENGAL TIGER</h2>
            <img alt="Test" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Tiger_in_Ranthambhore.jpg/220px-Tiger_in_Ranthambhore.jpg" />
            <p>The Bengal tiger's coat is yellow to light orange, with stripes ranging from dark brown to black; the belly and the interior parts of the limbs are white, and the tail is orange with black rings.</p>
            <p>Males have an average total length of 270 to 310 cm (110 to 120 in) including the tail, while females measure 240 to 265 cm (94 to 104 in) on average. The tail is typically 85 to 110 cm</p>
        </smart-splitter-item>
    </smart-splitter>
    
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.