Products

[admin]

Hi Riyaz Quresh,
That blazor demo is available online only for the moment. We will consider adding it to the download package, too.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

It works, many thanks!

[admin]

Hi Peter,
Sorry for the late reply. It works, thanks for your help!
One last question 🙂
We want the tab position to be on the left or right and we need the option of automatic height (https://www.htmlelements.com/demos/tabs/auto-height/).
But when we use the right tab position and the auto height styles the transition doesn’t work properly. The tab to be slides in is not animated and the tab that slides away is visible in the background.
can you help ?
many Thanks!

[admin]

Example with Scrollbar that changes DIV tag using Smart.Blazor 9.4.15
Here is a sample built with Smart.Blazor 9.4.15

@page "/"
<Example Name="ScrollBar">
	<ScrollBar @ref="scrollbar" OnChange="ChangeHandler"></ScrollBar>
    <div style="@scrollStyle">
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
    </div>
</Example>
@code {
    ScrollBar scrollbar;
    string scrollStyle = "overflow: auto; width: 100px; height:100px;";
    private void ChangeHandler(Event args) {
        ScrollBarChangeEventDetail detail = args["Detail"] as ScrollBarChangeEventDetail;
        scrollStyle = "overflow: auto; width: " + detail.Value + "px; height: " + detail.Value + "px;";
    
        Console.WriteLine(detail.OldValue + "/" + detail.Value);
    }
}

Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi ORE,
You are right. Sorry, about that. I missed to add that 2 more files are required.

   <link rel="stylesheet" type="text/css" href="../../../source/styles/components/smart.base.css" />
    <link rel="stylesheet" type="text/css" href="../../../source/styles/components/smart.tabs.css" />
    <link rel="stylesheet" type="text/css" href="../../../source/styles/components/smart.common.css" />

When you use more components on the page and want to load only these styles, add them between smart.base.css and smart.common.css.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi Peter,
Thanks for your answer. I’ve tried it , but it doesn’t work. I think some CSS is missing. For example: The file  \source\styles\components\smart.tabs.css contains some variables, so I also tried adding the \source\styles\default\smart.variables.css. But even then it doesn’t work properly.
Best regards

[admin]

Hi Dark Beccio,
Could you post a sample which demonstrates that?
The following code which is a modification of our Data Export example with Paging enabled data exports the full data set, not only the first page’s

window.Smart('#grid', class {
    get properties() {
        return {
            dataSource: new window.Smart.DataAdapter({
                dataSource: window.generateData(100),
                dataFields: [
                    'id: number',
                    'firstName: string',
                    'lastName: string',
                    'productName: string',
                    'quantity: number',
                    'price: number',
                    'total: number'
                ]
            }),
            pager: {
                visible: true
            },
            paging: {
                enabled: true
            },
            columns: [
                'id',
                {
                    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' }
            ]
        };
    }
});
function init() {
    const grid = document.querySelector('jqx-grid');
    const xlsxBtn = document.querySelector('#xlsxBtn');
    const pdfBtn = document.querySelector('#pdfBtn');
    const csvBtn = document.querySelector('#csvBtn');
    const tsvBtn = document.querySelector('#tsvBtn');
    const xmlBtn = document.querySelector('#xmlBtn');
    const htmlBtn = document.querySelector('#htmlBtn');
    xlsxBtn.addEventListener('click', () => {
        grid.exportData('xlsx');
    });
    pdfBtn.addEventListener('click', () => {
        grid.exportData('pdf');
    });
    csvBtn.addEventListener('click', () => {
        grid.exportData('csv');
    });
    tsvBtn.addEventListener('click', () => {
        grid.exportData('tsv');
    });
    xmlBtn.addEventListener('click', () => {
        grid.exportData('xml');
    });
    htmlBtn.addEventListener('click', () => {
        grid.exportData('html');
    });
}

Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi ORE,
You can use \source\styles\components\smart.tabs.css file instead. It includes all styles for the tabs component and is only 25KB.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi klslead,
Thank you for the Scheduler’s timeline suggestion.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi xyzzy,
The scrollbars are components which work just as sliders. They fire events when the scroll thumb is moved or the scroll arrow is clicked.
To apply a scroll position to HTML Elements, you can refer to: https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi Matt,
You can use this approach:

export class MyApp {
  message = 'Hello Aurelia 2!';
  
  attaching() {
     document.addEventListener('readystatechange', () => {
           if (document.readyState === "complete") {
           this.grid.dataSource =new Smart.DataAdapter(
            {
              dataSource: [
                { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
                { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" },
                { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
                { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
                { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" },
                { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
                { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
                { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
                { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
              ],
              dataFields:
                [
                  'EmployeeID: number',
                  'ReportsTo: number',
                  'FirstName: string',
                  'LastName: string',
                  'Country: string',
                  'City: string',
                  'Address: string',
                  'Title: string',
                  'HireDate: date',
                  'BirthDate: date'
                ]
            })
           }
     });
    
  }
    
}

Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi Maserati,
In the Blazor Gantt, we still do not have such functionality added. We will create a work item about it and this will most probably happen by using a formatString option in the columns.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi AURAGARD,
Smart UI is a commercial library. We have a community version with free components – Table, Tree, Tabs and Menu. All other components will display the blue banner, console.log messages & more. If you have purchased a license, please write to support@jqwidgets.com.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi davout,
You are right about the zero duration. We will update the behavior of such Scheduler events.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi davout,
You can see this example: https://www.htmlelements.com/angular/demos/scheduler/view-basic/. It shows how to use the Scheduler in Month View.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts