Products

[yavordashew]

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/

[yavordashew]

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/

[yavordashew]

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/

[yavordashew]

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/

[yavordashew]

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/

[yavordashew]

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/

[yavordashew]

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/

[yavordashew]

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/

[yavordashew]

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]

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/

[yavordashew]

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/

[yavordashew]

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/

[yavordashew]

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/

[yavordashew]

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/

[yavordashew]

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/

[Author]

Posts