This topic contains 5 replies, has 2 voices, and was last updated by Avatar B. Markov 10 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #101085
    Avatar
    developer09
    Participant

    Hi,

    I am giving a try to this grid. I am having a problem with my first code. Maybe I am missing something, but I am unable to figure out.

    I have this at the top (css) and at the bottom (js) -it is an ASP MVC project, so I am summarizing-:

    <link rel="stylesheet" type="text/css" href="~/Scripts/smartui/styles/smart.default.css" />
    
    <script type="module" src="~/Scripts/smartui/modules/smart.grid.js"></script>
    <script src="~/Scripts/data.js"></script>
    <script src="~/Scripts/site.js"></script>

    Then I have this in the body:

    <smart-grid id="grid"></smart-grid>

    And my “site.js” contains the code to configure the grid as follows (it is basically taken from the documentation):

    Smart('#grid', class {
        get properties() {
            return {
                appearance: {
                    allowSortAnimation: true
                },
                sorting: {
                    enabled: true
                },
                filtering: {
                    enabled: true,
                    filter:
                        [
                            ['firstName', 'contains Andrew or contains Nancy'],
                            ['quantity', '>= 3 and <= 8']
                        ]
                },
                selection: {
                    enabled: true,
                    mode: 'one'
                },
                dataSource: new Smart.DataAdapter(
                    {
                        dataSource: generateData(10000),
                        dataFields:
                            [
                                'id: number',
                                'firstName: string',
                                'lastName: string',
                                'productName: string',
                                'quantity: number',
                                'price: number',
                                'total: number'
                            ]
                    }),
                columns: [
                    {
                        label: 'First Name', dataField: 'firstName'
                    },
                    { label: 'Last Name', dataField: 'lastName' },
                    { label: 'Product', dataField: 'productName' },
                    { label: 'Quantity', dataField: 'quantity', align: 'right', cellsAlign: 'right', },
                    { label: 'Unit Price', dataField: 'price', align: 'right', cellsAlign: 'right', cellsFormat: 'c2' },
                    { label: 'Total', dataField: 'total', align: 'right', cellsAlign: 'right', cellsFormat: 'c2' }
                ]
            }
        }
    });

    This produces the following graphical issue -notice how the filter button is out of its natural position-:

    https://ibb.co/qRcq5c5

    I also get the following error when selecting any row (only one time), maybe it is related:

    smart.grid.js:8 Uncaught TypeError: Cannot read property ‘disabled’ of undefined
    at HTMLElement.get [as disabled] (smart.grid.js:8)
    at HTMLDocument.handlers (jquery-3.4.1.js:5281)
    at HTMLDocument.dispatch (jquery-3.4.1.js:5217)
    at HTMLDocument.elemData.handle (jquery-3.4.1.js:5044)

    How can I fix these two issues?

    Thanks in advance.

    #101086
    Avatar
    B. Markov
    Participant

    Hi,

    The javascript code looks OK, except how the Scripts are imported. I suppose that the site.js script is actually loaded in your app, before the smart.grid module. You can try changing the type=”module” to the site.js as well.

    However, in order to test and debug, we will need a complete sample which demonstrates an issue. You can share it online if you wish by using https://dotnetfiddle.net/

    Best regards,
    Boyko Marokv

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

    #101087
    Avatar
    developer09
    Participant

    No changes when I add the type=”module” stuff.

    Regarding dotnetfiddle.net, I have never used it. But I infer I have to import the NuGet package. The problem is that I am not able to import specifically your Smart libraries:

    https://ibb.co/Ws0FYbZ

    Sorry I have tried multiple search strings, but they are never found. How is it supposed to be done?

    I have also tried by hotlinking your demos’ JS files, but logically I incur in a “CORS” error.

    This is the link to my fiddle demo, in theory it is only needed to fix the JS import thing:

    https://dotnetfiddle.net/rdKGqY

    Thanks.

    #101088
    Avatar
    B. Markov
    Participant

    Hi developer09,

    The issue is a conflict with other scripts and css on the page. When we remove them, it works: https://dotnetfiddle.net/GaLrBG
    We will work on this for the next version to clear these conflicts with other libraries.

    Best regards,
    Boyko Marokv

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

    #101089
    Avatar
    developer09
    Participant

    Ok. If I copy&paste your code in my local project it works now. If I return back to my initial project and remove Bootstrap styles, then it works too. So that is.

    I will wait for the next release. Is there any due date (or approximate) for the fix?

     

    Thanks.

    #101090
    Avatar
    B. Markov
    Participant

    Hi developer09,

    We created work items for both reported issues:

    https://github.com/HTMLElements/smart-webcomponents/issues/3
    https://github.com/HTMLElements/smart-webcomponents/issues/4

    Thank you for the valuable feedback!

    Best regards,
    Boyko Marokv

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

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

You must be logged in to reply to this topic.