JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums General Discussions Can i use smart UI without using single file components?

This topic contains 2 replies, has 2 voices, and was last updated by Avatar admin 8 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #101334
    Avatar
    dusrkdldlr
    Participant

    hello! I don’t want use single file components.

    so I use app.component. this is my code

    <div id=”smart-grid-test”>
    smartGrid
    <test-grid-component>
    </test-grid-component>
    </div>
    <script type=”module”>
    import ‘/resources/js/smart/source/modules/smart.grid.js’

    let smartGrid = Vue.createApp({});

    smartGrid.component(‘test-grid-component’, {
    tempalte:<smart-grid id="grid" v-pre></smart-grid>,
    mounted: function() {
    window.Smart(
    “#grid”, class {
    get properties() {
    return {
    columns: [
    { label: ‘First Name’, dataField: ‘firstName’ },
    { label: ‘Last Name’, dataField: ‘lastName’ },
    { label: ‘Product’, dataField: ‘productName’ }
    ],
    dataSource: new window.Smart.DataAdapter(
    {
    dataSource: [
    { “firstName”: “Beate”, “lastName”: “Wilson”, “productName”: “Caramel Latte”},
    { “firstName”: “Ian”, “lastName”: “Nodier”, “productName”: “Caramel Latte”},
    { “firstName”: “Petra”, “lastName”: “Vileid”, “productName”: “Green Tea”},
    { “firstName”: “Mayumi”, “lastName”: “Ohno”, “productName”: “Caramel Latte”},
    { “firstName”: “Mayumi”, “lastName”: “Saylor”, “productName”: “Espresso con Panna”},
    { “firstName”: “Regina”, “lastName”: “Fuller”, “productName”: “Caffe Americano” },
    { “firstName”: “Regina”, “lastName”: “Burke”, “productName”: “Caramel Latte”},
    { “firstName”: “Andrew”, “lastName”: “Petersen”, “productName”: “Caffe Americano”},
    { “firstName”: “Martin”, “lastName”: “Ohno”, “productName”: “Espresso con Panna”},
    { “firstName”: “Beate”, “lastName”: “Devling”, “productName”: “Green Tea”},
    { “firstName”: “Sven”, “lastName”: “Devling”, “productName”: “Espresso Truffle”},
    { “firstName”: “Petra”, “lastName”: “Burke”, “productName”: “Peppermint Mocha Twist”},
    { “firstName”: “Marco”, “lastName”: “Johnes”, “productName”: “Caffe Mocha”}
    ],
    dataFields:
    [
    ‘firstName: string’,
    ‘lastName: string’,
    ‘productName: string’
    ]
    })
    }
    }
    }
    );
    }
    })//component

    smartGrid.config.isCustomElement = tag => tag.startsWith(‘smart-‘);
    smartGrid.mount(‘#smart-grid-test’);
    </script>
    <style>
    smart-grid {
    width: 100%;
    height: auto;
    }
    </style>

    The result is nothing on the page.

    this is console warn “[Vue warn]: Component is missing template or render function”

    please help me. what can I do?

    #101335
    Avatar
    dusrkdldlr
    Participant

    oh, sorry ..

    there was a typo.. haha

    it work!!

    #101339
    Avatar
    admin
    Keymaster

    Hi,

    In order to use Smart.Grid with Vue, please refer to https://www.htmlelements.com/docs/grid/#vue

    Best regards,
    Peter Stoev

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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.