Products

[yavordashew]

Hi Johnny Johnny, 
First make sure you use the newest version(I have tested in a bit older version and it didn’t work) of the smart-table, because the in the newest version the ‘removeRow’  function works.I have also prepared a code snippet that deletes all the rows from the table.Also note that for example if you are on the third page of the table it will select all the remaining rows from this page till the last and will remove them.

const table = document.getElementById('table');
let rowId = Array.from(table.getSelection());
        rowId.forEach(id =>{
            table.removeRow(id)
        })

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 AUARAGUARD,
If you want to fetch your data from remote server with AJAX request you can do so like this :

window.onload = function () {
    let request = new XMLHttpRequest();
    let url = 'countries.txt';//NOTE THAT IM USING LOCAL FILE
    let data =[]
    request.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            data = JSON.parse(this.responseText);
        }
    };
    request.open('GET' , url )
    request.send();
    console.log(data)
    const textBox = document.querySelector('smart-text-box');
    textBox.displayMember = 'name';
    textBox.valueMember = 'code';
    textBox.dataSource = function (query, callback) {
        let result = [];
        for (let d = 0; d < data.length; d++) {
            if (data[d].name.toLowerCase().indexOf(query.toLowerCase()) > -1) {
                result.push(data[d]);
            }
        }
        setTimeout(function () {
            callback(result);
        }, 100);
    };
};

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,
I have prepared a little code snippet to show you how to achieve the functionality you want:

<smart-date-time-picker id="scheduledStart" autoclose="true" calendar-button down-position="bottom"
                        dropDownDisplayMode="calendar"
                        formatString="dd-MMM-yyyy"
                        placeholder="From"
                        [autoClose]="true"
                        formControlName="scheduledFrom"
                        style="width: 150px"
                        [nullable]="true"
                        [placeholder]="'YOUR PLACEHOLDER'"
                       >
</smart-date-time-picker>

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 edwardsmarkf,
Another solution for you could be to use the ‘::placeholder’ pseudo-element of the input element.With it you can change font size, color and etc.
For example:
//In your CSS file:

input::placeholder{
   font-size:15px;
   color:black;
}

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,
If you set datepicker’s value to null the input where the date is displayed will not display the current date but it will have placeholder with the text ‘Enter Date’.
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 chips,
If you wannt to achieve such functionality I would suggest you to take a look at this demo:
https://www.htmlelements.com/demos/grid/column-dynamic-template/
It demonstrates how to display different column cell styles with a conditional referencing another column.
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 to display the state ‘row’ I think the best solution will be to use the rowDetail’ property.
I have prepared a little code snippet for you on how to set it:

  rowDetail:{
                  enabled:true,
                  visible:true,
                  dialog:{
                    enabled:true
                  },
                   template: <code><h5> {{Your Datafiield Name}} {{{An other Datafiield Name}} </h5></code>//you can use the template to customise it
                },

With the code above you this will open a window with the details of the ‘row’.
Also a demo for the ‘rowDetail’ property :
https://www.htmlelements.com/vue/demos/grid/row-details/
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,
Unfortunately we don’t support this feature for the pager I know that maybe the documentation can be a little misleading because the template property of the pager is there but we are working on to include feature as well.For the time being its best to use the CSS properties.
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,
The problme here in your case is quite simple.First you define ‘dialogWindow’ with capital ‘W’ but in the event listener of the button you use it with lowercase ‘w’ just change your code to this”

 button.addEventListener("click", function() {
            console.log('Button inside the column was clicked')
            dialogWindow.open();
            //smartwindow.open()</div>
                                   });

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 Peter,
I was unable to recreate the situation you encounter, but in order to give you the best solution I would suggest to share a code example of 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 dusrkdldlr,
I don’t encounter the error you do, I would advice you to share code example of your situation in order to be able to find a solution for you.
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 chips,
When using the code you provided I was unable to reproduce the situation you encounter.
If you be so kind to provide some more information we will do out best to provide you with a proper solution.
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,
Which part of the design you want to change?
For example if you want to change change the background-color or border-radius on page identifier you can do it by accessing the classes of the elements you want to change :

.smart-pager .smart-pager-page-index-selector{
    border-radius: 0.25rem;
    background-color: rebeccapurple;
    color: white;
} 

Or for a selected page identifier

.smart-pager .smart-pager-page-index-selector[selected]{
    background-color: blue;
}

Another option is to check this demo which shows the different pagination options:
https://www.htmlelements.com/demos/grid/paging-advanced/
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,
I have prepared another code snippet for you.
Just change the code in the ‘template’ of the column property you want to change:

                {
                  label: "Due date",
                  editor: "dateInput",
                  width: 200,
                  dataField: "dueDate",
                  cellsFormat: "d",
                  allowResize: true,
                  template: function(formatObject) {
                    if (!formatObject.template) {
                      const button = document.createElement("smart-button");
                      button.innerHTML = 'Click Me';
                      button.row = formatObject.row;
                      button.addEventListener("click", () => {
                        console.log('Button inside the column was clicked')
                      });
                      const template = document.createElement("div");
                      template.appendChild(button);
                      formatObject.template = template;
                    }
                  }
                }

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 Mike,
I have made a simple code example to showcase you how to disable row expanding on certain rows depending on a condition.
//In your Js File:

const chemicalElementsData = [
    { number: 1, name: 'Hydrogen', symbol: 'H', weight: 1.008, abundance: 1400, originOfName: 'Greek elements hydro- and -gen, \'water-forming\'' },
    { number: 2, name: 'Helium', symbol: 'He', weight: 4.002602, abundance: 0.008, originOfName: 'Greek hḗlios, \'sun\'' },
    { number: 3, name: 'Lithium', symbol: 'Li', weight: 6.94, abundance: 20, originOfName: 'Greek líthos, \'stone\'' },
    { number: 4, name: 'Beryllium', symbol: 'Be', weight: 9.0121831, abundance: 2.8, originOfName: 'Beryl, a mineral (ultimately from the name of Belur in southern India)' },
    { number: 5, name: 'Boron', symbol: 'B', weight: 10.81, abundance: 10, originOfName: 'Borax, a mineral (from Arabic bawraq)' },
    { number: 6, name: 'Carbon', symbol: 'C', weight: 12.011, abundance: 200, originOfName: 'Latin carbo, \'coal\'' },
    { number: 7, name: 'Nitrogen', symbol: 'N', weight: 14.007, abundance: 19, originOfName: 'Greek nítron and -gen, \'niter-forming\'' },
    { number: 8, name: 'Oxygen', symbol: 'O', weight: 15.999, abundance: 461000, originOfName: 'Greek oxy- and -gen, \'acid-forming\'' },
    { number: 9, name: 'Fluorine', symbol: 'F', weight: 18.998403163, abundance: 585, originOfName: 'Latin fluere, \'to flow\'' },
    { number: 10, name: 'Neon', symbol: 'Ne', weight: 20.1797, abundance: 0.005, originOfName: 'Greek néon, \'new\'' }
];
window.JQX('#table', class {
    get properties() {
        return {
            dataSource: new window.JQX.DataAdapter({
                dataSource: chemicalElementsData,
                dataFields: [
                    'number: number',
                    'name: string',
                    'symbol: string',
                    'weight: number',
                    'abundance: number',
                    'originOfName: string'
                ]
            }),
            keyboardNavigation: true,
            rowDetailTemplate:'
<div class="element-cell">
                    <div class="element-no">{{number}}</div>
                    <div class="element-symbol">{{symbol}}</div>
                    <div class="element-name">{{name}}</div>
                    <div class="element-weight">{{weight}}</div>
                </div>
                <div><strong>Origin of name:</strong> {{originOfName}}</div>',
            columns: [
                { label: 'No.', dataField: 'number', dataType: 'number', width: 50 },
                { label: 'Name', dataField: 'name', dataType: 'string', width: 200 },
                { label: 'Symbol', dataField: 'symbol', dataType: 'string', width: 150 },
                {
                    label: 'Weight', dataField: 'weight', dataType: 'number', width: 200, formatFunction(settings) {
                        settings.template = new window.JQX.Utilities.NumberRenderer().formatNumber(settings.value, 'F2');
                    }
                },
                {
                    label: 'Abundance', dataField: 'abundance', dataType: 'number', width: 200, formatFunction(settings) {
                        settings.template = settings.value + ' mg/kg';
                    }
                }
            ]
        };
    }
});
window.onload= function (){
    const table = document.getElementById('table');
    const expandedRow = document.querySelectorAll('jqx-table[row-detail-template] tr[row-id]')
        for( let rowIndex = 0 ; rowIndex <expandedRow.length ; rowIndex++){
            let cellValue = table.getValue(rowIndex,'weight')
            if(cellValue <10){
                expandedRow[rowIndex].style.pointerEvents = 'none'
            }
        }
}

And in you HTML file :
<smart-table id="table"></smart-table>
For base for this code snippet I used this demo: https://www.htmlelements.com/demos/table/expandable-rows/
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