@yavordashew

@yavordashew

Forum Replies Created

Viewing 15 posts - 136 through 150 (of 178 total)
  • Author
    Posts
  • in reply to: Over any row always show error in console #101380
    yavordashew
    Member

    Hi chips,
    It will be the best to share a complete example of your case in order to give you the best solution.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

    in reply to: columns with button #101378
    yavordashew
    Member

    Hi dusrkdldlr,
    If you want to add a button to a column you can do so by using the ‘template’ property of the columns array.
    For example in your Vue file:

    setup() {
        onMounted(() => {
          window.Smart(
            "#grid",
            class {
              get properties() {
                return {
                  dataSource: new window.Smart.DataAdapter({
                    dataSource: [YOUR DATA SOURCE] ,
                  sorting: {
                    enabled: true
                  },
                  behavior: {
                    columnResizeMode: "split"
                  },
                  layout: {
                    rowHeight: 50
                  },
                  selection: {
                    enabled: true,
                    mode: "extended",
                    allowCellSelection: true
                  },
                  editing: {
                    enabled: true,
                    mode: 'row',
                  },
                 columns: [
                    {
                      label: "Name",
                      dataField: "name",
                      freeze: true,
                      allowResize: true
                    },
                     {
                      label: "Due date",
                      editor: "dateInput",
                      width: 200,
                      dataField: "dueDate",
                      cellsFormat: "d",
                      allowResize: true,
                      template: '<button onclick="Your Function()"> Click me</button>'/**The template of the column*////
                    }],
    //Rest of your code 

    Or check the demos regarding templates:
    https://www.htmlelements.com/vue/demos/grid/column-template/
    https://www.htmlelements.com/vue/demos/grid/column-dynamic-template/
    https://www.htmlelements.com/vue/demos/grid/column-dynamic-template-with-components/
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

    in reply to: commandColumns option #101377
    yavordashew
    Member

    Hi dusrkdldlr,
    For more information about the ‘cellsFormat’ property I would advice you to take a look at this demo :
    https://www.htmlelements.com/demos/grid/column-formatting/
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

    in reply to: Close one tabbed docked window #101372
    yavordashew
    Member

    Hi Peter,
    If you want to have closing buttons inside the tabs(multiple) which are docked in one tab you can use the ‘tabCloseButtons’ property of the docking layout like in the following code snippet:
    //In your Js file:

    window.onload = function () {
        const docking = document.getElementById('docking-layout')
        docking.layout = [
            {
                //The Base Group
                type: 'LayoutGroup',
                orientation: 'horizontal',
                items: [{
                        label: 'TabsWindow B',
                        size: '25%',
                        items: [{
                                label: 'Tab B1',
                                selected: true,
                                content: 'Content of B1'
                            },
                            {
                                label: 'Tab B2',
                                content: 'Content of B2'
                            },
                            {
                                label: 'Tab C1',
                                content: 'Content of C1'
                            }
                        ],
                            tabCloseButtons: true,
                    },
                ]
            }
        ];
    };
    

    And in your HTML file :
    <smart-docking-layout id="docking-layout"></smart-docking-layout>
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

    in reply to: commandColumns option #101370
    yavordashew
    Member

    Hi dusrkdldlr,
    If you want the whole ‘command’ column to not be displayed you can simply use the ‘visible’ property of the command column.
    I have a little code snippet to showcase you how to set this property:
    //In your JS file

    window.Smart('#grid', class {
        get properties() {
            return {
                appearance: {
                    showRowHeaderNumber: true
                },
                dataSource: new window.Smart.DataAdapter({
                    dataSource: window.generateData(1000),
                    dataFields: [
                        'id: number',
                        'firstName: string',
                        'lastName: string',
                        'productName: string',
                        'available: bool',
                        'quantity: number',
                        'price: number',
                        'total: number'
                    ]
                }),
                editing: {
                    enabled: true,
                    action: 'none',
                    mode: 'row',
                    commandColumn: {
      /* With the 'visible' property you can set in order to have the command column  visible or not */
                        visible: true,
                        /* Or you can use the inline property if you don't want to display the command column but when you hover on the row an edit panel will  appear */
                        inline: true
                    }
                },
                columns: [
                    {
                        label: 'First Name', dataField: 'firstName'
                    },
                    {
                        label: 'Last Name', dataField: 'lastName'
                    },
                    { label: 'Product', dataField: 'productName', editor: 'autoComplete' },
                    { label: 'Available', dataField: 'available', template: 'checkBox', editor: 'checkBox' },
                    { label: 'Quantity', dataField: 'quantity', editor: 'numberInput' },
                    { label: 'Unit Price', dataField: 'price', editor: 'numberInput', cellsFormat: 'c2' }
                ]
            };
        }
    });

    You can have a look at the following demo:
    https://www.htmlelements.com/demos/grid/editing-command-column-inline/
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

    in reply to: Remove table rows #101352
    yavordashew
    Member

    Thank you! Enjoy your day too and all the best from Smart UI Team!
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

    in reply to: Remove table rows #101350
    yavordashew
    Member

    Hi Johnny Johnny,
    If you are going to connect the ‘table’ component with a database I would suggest you to take a look at the following examples which also include CRUD operations:
    https://www.htmlelements.com/demos/table/server-side-crud/
    https://www.htmlelements.com/demos/table/remote-data/
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

    in reply to: grid row click error #101349
    yavordashew
    Member

    Hi dusrkdldlr,
    Would you like to share piece of your code in order to recreate the case you have encountered because I was unable to simulate that error you have mentioned.
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

    in reply to: Smart button change hover and disabled stying? #101344
    yavordashew
    Member

    Hi davout,
    Yes, the solution you shared works good in your case.
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

    yavordashew
    Member

    Hi Дмитрий Шелковников,
    In your situation in order to give you the best solution it will the best to share some of your code and review it.
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

    in reply to: Remove table rows #101342
    yavordashew
    Member

    Hi Johnny Johnny,
    We have prepared a complete solution for your specific case.
    This is the code snippet of the solution with it you can delete selected rows(multiple or all selected):
    document.getElementById(‘remove’).onclick = function () {
    if (table.dataSource.length > 0) {
    let selectedIds = table.getSelection().slice();
    for(let i=0; i<selectedIds.length;i++){
    const selectedId = selectedIds[i];
    const rowIndex = Array.from(document.querySelectorAll(‘tr[row-id]’)).findIndex(tr => tr.getAttribute(‘row-id’) === selectedId + ”);
    table.dataSource.removeAt(rowIndex)
    }
    }
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

    in reply to: Remove table rows #101331
    yavordashew
    Member

    Hi Johnny,
    Yes the functionality you want to achieved can be done relatively simply like in the code snippet below.
    The following will remove the specific row based on the ‘id’.
    In your JS file :
    const table = document.getElementById(‘table’);
    let userId = 0; // for example
    table.selected=[userId] //selecting the userId row
    document.getElementById(‘remove’).onclick = function () {
    if (table.dataSource.length > 0) {
    table.dataSource.removeAt(userId);
    }
    };
    And in your HTML:
    <div class=”option”><smart-button id=”remove”>Remove</smart-button></div>
    <smart-table id=”table” selection> </smart-table>
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

    in reply to: Query Builder Custom Operator #101329
    yavordashew
    Member

    Hi JoeO,
    Yes it is possible to add between/ not between operators if you want the query builder to make this type of operation you basically want to filter the value like the following:
    In your JS file :
    window.Smart(‘#queryBuilder’, class {
    get properties() {
    return {
    allowDrag: true,
    fields: [
    { label: ‘Unit Price’, dataField: ‘price’, dataType: ‘number’ ,filterOperations:[ ‘>’, ‘<‘] },
    ],
    showIcons: true,
    value: [
    [
    [‘price’, ‘>’, 1300],
    [‘price’, ‘<‘, 1500],
    ],
    ]
    };
    }
    });
    window.onload = function () {
    const queryBuilder = document.getElementById(‘queryBuilder’), filterQueryValue = document.getElementById(‘filterQueryValue’);
    filterQueryValue.innerHTML = JSON.stringify(queryBuilder.value, null, ‘\t’);
    queryBuilder.addEventListener(‘change’, function () {
    filterQueryValue.innerHTML = JSON.stringify(queryBuilder.value, null, ‘\t’);
    });
    console.log(queryBuilder.value)
    };
    And in you HTML :
    <smart-query-builder id=”queryBuilder”></smart-query-builder>
    <div class=”options”>
    <div class=”option”>
    <div id=”filterQueryValue”></div>
    </div>
    </div>
    If you do it like this the values that will be returned are the values of the ‘Unit Price’ greater than ‘1300’ and less than ‘1500’ or if you want you can make a custom operator with the ‘Between’ and ‘Not Between’ names like so :
    window.Smart(‘#queryBuilder’, class {
    get properties() {
    return {
    allowDrag: true,
    customOperations: [
    {
    label: ‘Between’,
    name: ‘between’,
    hideValue:false,
    editorTemplate: function (fieldType, value, fieldData) {
    //In the editorTemplate function you can create the ‘template’ for the editor itself.Here is an example if you want to add number input
    const input = document.createElement(‘smart-number-input’);
    input.placeholder = ‘enter number 1’
    const inputContainer = document.createElement(‘div’);
    inputContainer.className = ‘container’
    inputContainer.appendChild(input);
    return inputContainer
    },
    valueTemplate: function (editor, value) {
    console.log(value);
    },
    handleValue: function (value) {
    //This function handles the value returned by the ‘editor’ when it is closed
    return console.log(‘Handling ‘,value)
    }
    },
    ],
    fields: [
    { label: ‘Unit Price’, dataField: ‘price’, dataType: ‘number’ ,filterOperations:[ ‘>’, ‘<‘, ‘between’] // in the filterOperations array you add the name of your custom filter
    },
    ],
    showIcons: true,
    value: [
    [
    [‘price’, ‘between’, 15],
    [‘price’, ‘between’, 10],
    ],
    ]
    };
    }
    });
    window.onload = function () {
    const queryBuilder = document.getElementById(‘queryBuilder’), filterQueryValue = document.getElementById(‘filterQueryValue’);
    filterQueryValue.innerHTML = JSON.stringify(queryBuilder.value, null, ‘\t’);
    queryBuilder.addEventListener(‘change’, function () {
    filterQueryValue.innerHTML = JSON.stringify(queryBuilder.value, null, ‘\t’);
    });
    console.log(queryBuilder.value)
    };
    As for the terms of the licensing if you get the ‘ Developers Licence’ you can use it in unlimited amount of applications, but this fee applies for 12 months period only.
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

    in reply to: Query Builder Custom Operator #101326
    yavordashew
    Member

    Hi JoeO,
    Our Query Builder does not support the exact same operator you mentioned.
    But if you need custom operator you can have look at the https://www.htmlelements.com/docs/querybuilder-api/#toc-customoperations_any .
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

    in reply to: addFilter with boolean conditions #101324
    yavordashew
    Member

    Hi Cetin Sert,
    For example if you have a data grid with column with names and you want in it to be displayed only certain name you can do it like this:
    addFilter(‘firstName’,’equal Andrew‘)
    This filter will return the ‘firstName’ column containing only rows containing the name ‘Andrew’.
    For more information :https://www.htmlelements.com/demos/grid/filtering/#toc-addfilter
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

Viewing 15 posts - 136 through 150 (of 178 total)