Products

[admin]

Hi,

Thank you for your 1st post in our Forum. Unfortunately, it is a SPAM.
If you have any questions regarding our products, feel free to post here.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[admin]

Hi,

This is an issue in the Grid. It will be resolved as soon as possible.

Thank you for the feedback! We appreciate it!

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[admin]

Hi MikeB,

swipe on touch is still not implemented for the blazor carousel component. We have it as a feature in our TO DO list for the upcoming releases.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[admin]

Hi,

The Default theme is a Material design-based theme. If you need to switch to a different color scheme of that theme, you need to add a link to source/styles/smart.purple.css after smart.default.css in your app. The same is valid for the rest of the available color schemes.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[admin]

Hi,

We have a callback function – onRowDetailUpdated{(index: number, row: Smart.Grid.Row, details: HTMLElement): void}. It is called each time the row detail is expanded/collapsed and requests an update.

Best regards,
Peter Stoev

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

[admin]

Hi Martin,

These options work for cells not in view as well. For example:

Smart('#grid', class {
    get properties() {
        return {
            dataSource: new Smart.DataAdapter(
			{
			    dataSource: generateData(1000),
			    dataFields:
				[
					'id: number',
					'firstName: string',
					'lastName: string',
					'productName: string',
                    'available: bool',
					'quantity: number',
					'date: date',
					'price: number',
					'total: number'
				]
			}),
          selection: {
                            enabled: true,
                            allowCellSelection: true,
                            //allowRowHeaderSelection: true,
                            //allowColumnHeaderSelection: true,
                            mode: 'extended'
                        },
                        editing: {
                            enabled: true,
                            mode: 'cell'
                        },
                        sorting: {
                            enabled: true
                        },
                        filtering: {
                            enabled: true
                        },
                        behavior: { columnResizeMode: 'growAndShrink' },
                        appearance: {
                            alternationCount: 2,
                            allowHover: true
                        },
            columns: [
			{
			    label: 'First Name', dataField: 'firstName'
			},
			{
			    label: 'Last Name', dataField: 'lastName'
			},
			{ label: 'Product', dataField: 'productName', editor: 'autoComplete' },
			{ label: 'Order Date', width: 250, cellsFormat: 'dd-MM-yyyy', dataField: 'date', editor: {
				template: 'dateTimePicker',
				formatString: 'dd-MM-yyyy',
				onInit(index, dataField, editor){
				}
			}
			},
			{ label: 'Quantity', dataField: 'quantity', editor: 'numberInput' },
			{ label: 'Unit Price', dataField: 'price', editor: 'numberInput', cellsFormat: 'c2' }
            ]
        }
    }
});
window.onload = ()=> {
  window.grid.rows[100].cells[0].color = 'red';
}

The above code sets a ‘red’ color to the first cell in the row with index = 100 which is not in the view. When you scroll vertically to that row, you will see that the cell is in red.

For more details about styling the grid cells, you can look at: https://www.htmlelements.com/docs/grid-styling-cells/

Best regards,
Peter Stoev

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

[admin]

Hi,

This is an issue in the component which will be resolved in the next release. The ‘change’ event shouldn’t be raised when you type in the filter.

Best regards,
Peter Stoev

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

[admin]

Hi Tullio,

onfocus happens before onchange. When an element is already on focus, it will raise only onchange when the value is changed. We did not find any issue on our side.
In your post, you’re writing about sequence. The tab order for the focus depends on the tabindex property of the HTML Elements – any html elements, not just smart html elements. If you add the smart-check-box tag to your DOM, it will be in the DOM and after the DOM is loaded(use onload event to ensure it), then you will be able to use querySelector, getElementById, etc.

Best Regards,
Peter Stoev

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

[admin]

Hi,

Yes, and that is exactly how it should work. Focus is raised when you click, after that Change is raised as it changes the state from true->false or false->true. Then when it is on focus, only Change event is raised as only the state is changed, the focus is not. When you click outside and focus a different element and after that click again on the checkbox, the focus and changed will be raised.

Best Regards,
Peter Stoev

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

[admin]

Hi Ashley,

Thanks for the update! That might help the others in the forum.

Best regards,
Peter Stoev

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

[admin]

Hi Rafa,

Formatting of numbers is based on the ‘locale’ setting and the numberFormat property. Smart.NumberInput uses https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat and this makes it unnecessary to have properties like decimalSeparator as it is applied automatically.

Best regards,
Peter Stoev

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

[admin]

Hi Rafa,

The formatting depends on the ‘locale’. It you set a locale which uses ‘,’ instead of ‘.’ the numbers will be formatted with it.

Best regards,
Peter Stoev

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

[admin]

Hi Anshika,

What do you mean by nested dropdown?

Best regards,
Peter Stoev

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

[admin]

Hi,

You can use the AddEvent method to add a new Event to the Scheduler.

` private void SchedulerReady(Scheduler scheduler)
{
DateTime today = DateTime.Today;
scheduler.AddEvent(new SchedulerDataSource()
{
Label = “1Google AdWords Strategy”,
DateStart = new DateTime(today.Year, today.Month, today.Day, 9, 0, 0),
DateEnd = new DateTime(today.Year, today.Month, today.Day, 10, 30, 0).AddDays(1),
AllDay = true,
BackgroundColor = “#3F51B5”
});
}`

another way is to set the DataSource property of the Scheduler to a new List.

Best regards,
Peter Stoev

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

[admin]

Hi,

It can be achieved with a combination of Razor and Javascript. On the left side of the page, we will have a list with items which we will be able to drag and drop into the Scheduler. The drag and drop is implemented with Javascript.

Example:

@page "/"
@inject IJSRuntime JSRuntime

@using Smart.Blazor.Demos.Data

<style>
    /* This is the CSS used in the demo */
    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        --smart-scheduler-timeline-cell-min-width: 40px;
        --smart-scheduler-event-border-radius: 4px;
        --smart-scheduler-timeline-nonworking-color: var(--smart-background);
    }

    .layout {
        display: flex;
    }

    .events {
        width: 200px;
        margin-right: 50px;
    }

    .smart-scheduler {
        width: calc(100% - 250px);
        height: 100%;
    }
</style>

<Example Name="Scheduler">
    <div class="layout">
        <div class="events">
            <ul>
                @foreach (var item in Items)
                {
                    <li value="@item" draggable="true">@item</li>
                }
            </ul>
        </div>
        <Scheduler OnReady="Ready" @ref="scheduler" Views="@views" View="SchedulerViewType.Week" DateCurrent="@dateCurrent"></Scheduler>
    </div>
</Example>

@code {
    Scheduler scheduler;
    string[] Items = new string[] { "Item 1", "Item 2", "Item 3", "Item 4", "Item 5" };

    private object dateCurrent = DateTime.Today;

    private IEnumerable<SchedulerViewType> views = new List<SchedulerViewType>()
{
        SchedulerViewType.Day,
        SchedulerViewType.Week,
        SchedulerViewType.Month,
        SchedulerViewType.Agenda
    };

    public async void Ready(Scheduler scheduler)
    {
        await JSRuntime.InvokeVoidAsync("dragDrop");
    }
    protected override void OnInitialized()
    {
        base.OnInitialized();
    }
}

and the index file.

<!DOCTYPE html>
<html>
<head lang="en-us">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Smart Blazor Components Library</title>
    <base href="/" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
    <link href="_content/Smart.Blazor/css/smart.default.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script type="text/javascript" src="js/smart.blazor.js"></script>
    <script type="text/javascript" src="js/rrule.min.js"></script>
    <script type="text/javascript" src="_content/Smart.Blazor/js/smart.elements.js"></script>
    <script type="text/javascript">
        function dragover_handler(ev) {
            ev.preventDefault();
            ev.dataTransfer.dropEffect = 'move';
        }
        function drop_handler(ev) {
            ev.preventDefault();
            const scheduler = document.querySelector('smart-scheduler');
            // Get the target element's data from the data transfer object
            const data = ev.dataTransfer.getData('text/plain').split(',');
            // gets the date from the drop coordinates.
            const date = scheduler.getDateFromCoordinates(ev.clientX, ev.clientY);
            // gets if we dropped over an all day cell.
            const isAllDay = scheduler.getIsAllDayCellFromCoordinates(ev.clientX, ev.clientY);

            if (!date) {
                return;
            }

            const dateStart = date;
            const dateEnd = new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours() + 1, date.getMinutes(), 0)

            // adds a new scheduler event.
            scheduler.createEvent(
                data[0],
                data[1],
                dateStart,
                dateEnd,
                isAllDay
            )

            // finds the dragged item.
            const item = [...document.querySelectorAll('[draggable]')].find((item) => {
                if (item.getAttribute('value') === data[1]) {
                    return true;
                }

                return false;
            });

            // removes the dragged item.
            if (item) {
                item.remove();
            }
        }

        function dragstart_handler(ev) {
            // Add the target element's data to the data transfer object
            ev.dataTransfer.setData('text/plain', ev.target.innerHTML + ',' + ev.target.getAttribute('value'));
            ev.dataTransfer.effectAllowed = 'move';
        }

        // called by the scheduler after it is created. Setups drag & drop.
        function dragDrop() {
            const scheduler = document.querySelector('smart-scheduler');

            scheduler.addEventListener('drop', (event) => {
                drop_handler(event);
            });

            scheduler.addEventListener('dragover', (event) => {
                dragover_handler(event);
            });

            document.querySelectorAll('[draggable]').forEach((item) => {
                item.ondragstart = dragstart_handler;
            });
        }

        window.onload = () => {
            //

        
        }
    
        document.oncontextmenu = () => {
            return false;
        }
        // Single Page Apps for GitHub Pages
        // https://github.com/rafrex/spa-github-pages
        // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
        // ----------------------------------------------------------------------
        // This script checks to see if a redirect is present in the query string
        // and converts it back into the correct url and adds it to the
        // browser's history using window.history.replaceState(...),
        // which won't cause the browser to attempt to load the new url.
        // When the single page app is loaded further down in this file,
        // the correct url will be waiting in the browser's history for
        // the single page app to route accordingly.
        (function (l) {
            if (l.search) {
                var q = {};
                l.search.slice(1).split('&').forEach(function (v) {
                    var a = v.split('=');
                    q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&');
                });
                if (q.p !== undefined) {
                    window.history.replaceState(null, null,
                        l.pathname.slice(0, -1) + (q.p || '') +
                        (q.q ? ('?' + q.q) : '') +
                        l.hash
                    );
                }
            }
        }(window.location))
    </script>
</head>

<body>
    <div id="app">
        <div style="position:absolute; top:30vh; width:100%; text-align:center">
            <p><i class="fas fa-spin fa-spinner"></i>Loading...</p>
        </div>
    </div>

    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>

Best regards,
Peter Stoev

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

[Author]

Posts