Filter button wrong position

[admin]

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.

[admin]

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/

[admin]

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.

[admin]

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/

[admin]

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.

[admin]

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/

[Author]

Posts