Products

[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/

[admin]

Hi davout,
You can see this example: https://www.htmlelements.com/angular/demos/scheduler/view-basic/. We suggest you to use the component as demonstrated in the examples & docs.
How to use the Scheduler component and populate it with Events is demonstrated in the demos section: https://www.htmlelements.com/angular/demos/scheduler/overview/. We suggest you to refer to it. The help tutorials for Scheduler are here: https://www.htmlelements.com/docs/scheduler/.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi xyzzy,
We are unable to reproduce this in our demos. Example: https://www.htmlelements.com/angular/demos/window/resizing/
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi davout,
You may look at https://www.htmlelements.com/angular/demos/kanban/methods/ in order to learn how to use the “addTask” method.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi davout,
Your question was about a Typescript error and the answer is that such error is raised, because there is no such Typescript API. The DateTimePicker accepts Javascript Date object. You can set the ‘value’ prop to a Javascript date.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi davout,
In future versions of the library, we will add a new Angular example of our DateTimePicker and expose additional API options. Again, Typescript definitions are not available for what you try to use. They do not exist.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi davout,
show/hide are used when there is required API for showing/hiding something. In Kanban, there is no feature which requires such API. When we add more features to it in the future which require such API, we will most probably add it.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts