Products

[yavordashew]

Hi Jozef,
Thank you for contacting us!
Because DockingLayout component uses the Window Component we can use its API to select the tab you want.
Quick example on how to do this:

window.onload = function () {
    const docking = document.querySelector('smart-docking-layout');
    docking.layout = [
        {
            //The Base Group
            type: 'LayoutGroup',
            orientation: 'horizontal',
            items: [
                {
                    //DockingLayout Item B
                    label: 'TabsWindow B',
                    size: '25%',
                    items: [{
                            //Tab Item B1 of Item B
                            label: 'Tab B1',
                            selected: true,
                            id: 'clickEvent12321312',
                            content: 'Content of B1'
                        },
                        {
                            //Tab Item B2 of Item B
                            label: 'Tab B2',
                            content: 'Content of B2',
                        }],
                        id: 1,
                        tabCloseButtons: true
                },
            ]
        }
    ];
    setTimeout(() => {
        docking.items[0].select(1)
    }, 1000);

More info about this you can find in the window API here https://www.htmlelements.com/docs/window-api/
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 rubem001,
Thank you for contacting us!
We have made test on the accordion component and we did found the bug that you reported.
I would like to thank you for your feedback and I have created a work item for this issue to be fixed.
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 paul,
Glad to hear that the suggestions have worked!
I would like to answer you question regarding the window field values and replacing the smart-input elements with a drop-down instead.
The code snippet below which is pretty self explаnatory will give you example how to achieve both things.

    onOpen($event: CustomEvent) {
        // event handling code goes here.
        const window = document.querySelector('smart-window')
        let allInputValues = window.querySelectorAll('smart-input')
        for(let i = 0; i < allInputValues.length; i++){
            console.log(allInputValues[i].getAttribute('value'))
        }
        if (($event.target as Element).classList.contains('smart-card-view')) {
            window.footerTemplate = 'footerTemplateDelete'
            let dropdownContainer: Element = window.querySelector('smart-input'),
                inputValue = dropdownContainer.getAttribute('value'),
                dropdown = document.createElement('smart-drop-down-list');
            dropdown.value = inputValue;
            dropdown.placeholder = inputValue;
            let dropdownDataSource: string[] = [
                "Your Dropdwon List Item 1 ",
                "Your Dropdwon List Item 2",
                "Your Dropdwon List Item 3",
                "Your Dropdwon List Item 4"
            ];
            dropdown.dataSource = dropdownDataSource
            dropdownContainer.replaceWith(dropdown)
            let id = parseFloat(window.label[0])
            let deleteBtn = document.getElementById('deleteButton')
            deleteBtn.addEventListener('click', () => {
                window.close()
                this.removeRecord(id)
            })
        }
    }

And one additional thing is to add the following CSS styles in order the drop-down element to match the styles of the other input elements in the window.

.smart-drop-down-list{
    width: 100%;
    --smart-surface: white;
}

Let me know if that works 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 Jozef,
By default when you drag and drop a panel item inside the DockingLayout, a new Panel is created and the dragged item is placed inside. Since the new Panel belongs only to that item, the label of the Panel is set to match the label of the dragged item.
Regarding the missing tabs close button on the newly created Panel from the dragged item, that is an issue that we will be fixing for our next release which is expected in the end of this month.
Also we have a solution on how to achieve the functionality you want to.

const dockinglayout = document.querySelector('smart-docking-layout');
dockinglayout.addEventListener('stateChange', function (event) {
    const detail = event.detail;
    if(['dock', 'float'].indexOf(detail.type) > -1 && detail.item.items.length === 1){
        event.detail.item.label= '';
        event.detail.item.tabCloseButtons=true;
    }
 })

We use the ‘stateChange’ event to add an empty string label to the item and to add the close button for the tab.
Also we check if the event is ‘float’ or ‘dock’ because these are responsible for drag and drop and we also check if this is a new tab because if we don’t have this check a window which has a header with some text it will be set it to empty string.
Let me know if that works for you and thank you for your feedback!
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 rr@187,
Thank you for contacting us!
I have tried to reproduce the issue that you encounter but with no success.
I would like to ask you to create a code example for us that recreates this error in order to give you a solution for it.(jsfiddle or github repository for example)
However looking at the log that you shared it appears that the error my be coming from a smart-button element.
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 paul,
Thank you for contacting us, again!
For your fist question I forgot to mention in my previous reply that you have to place the whole template element for the window footer in your
index.html file after <app-root> tag.
And for your second question I have made yet another code snippet similar to the last one but with a little differences and we will need to add another click event to the SmardCardView component.
//In your app.component.html file:

<!-- Note the new click event -->
smart-card-view
(open)="onOpen($event)"
[coverField]="coverField"
(click)="newCardEvent($event)"
[editable]="true"
[titleField]="titleField"
[allowDrag]="true"
[addNewButton]="true"
[dataSource]="dataSource" [columns]="columns" #cardview id="cardView"></smart-card-view>

//In your index.html file:

<!-- Its important to add the templates after <app-root> -->
  <app-root></app-root>
  <template id='footerTemplateDelete'>
    <smart-button id ='deleteButton'> Delete</smart-button>
  </template>
  <template id='footerTemplateNew'>
    <smart-button id ='newBtn'> Your New Button</smart-button>
    <smart-button id ='anotherBtn'> Another Button</smart-button>
  </template>

//In your app.component.ts file:

   onOpen($event:CustomEvent) {
            // event handling code goes here.
        const window = document.querySelector('smart-window')
        if(($event.target as Element).classList.contains('smart-card-view')){
            window.footerTemplate = 'footerTemplateDelete'
            let id = parseFloat(window.label[0])
            let deleteBtn= document.getElementById('deleteButton')
            deleteBtn.addEventListener('click', () =>{
              window.close()
              this.removeRecord(id)
            })
        }
    }
    newCardEvent($event:CustomEvent) {
       // event handling code goes here.
        let targetElement = ($event.target as Element).classList
        const window = document.querySelector('smart-window');
        if(targetElement.contains('smart-add-new-button')){
             window.footerTemplate = 'footerTemplateNew';
             let anotherBtn= document.getElementById('anotherBtn')
             anotherBtn.addEventListener('click', () =>{
               console.log('Another Button in the window footer was clicked')
             })
         }
     }
    removeRecord(id):void{
      console.log(typeof id)
      this.cardview.removeRecord(id-1)
    }
 

I know its a long post but I wanted to be comprehensive as possible.
Let me know if that works 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 david,
Unfortunately if you want to add a custom event handler to a button in Smart.Form there is another approach.
I want to give you an example on how to achieve this by having made a code snippet for you.
//In your JS file

    const smartForm = document.querySelector('form')
    let ctrlButton = smartForm.querySelector('smart-button[role="button"]')
    ctrlButton.addEventListener('click', ()=>{
        console.log('Your function')
    })

Let me know if that works 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 Walter,
Let me give you a solution that my suit your needs.
If you want to add new task columns when export the Gantt chart you can do so by pushing new task column object to the taskColumns array.
I have prepared a little code example to showcase you this functionality:
//In your HTML file:

  <smart-gantt-chart view="day"></smart-gantt-chart>
    <div class="option">
            <smart-button id="exportToPDF">Export to PDF</smart-button>
    </div>

//In your Js file:

    let newTaskColumn =   {
        label: 'Date End',
        value: 'dateEnd',
        size: '25%',
        min: '20%'
    };
    const ganttChart = document.querySelector('smart-gantt-chart');
    document.getElementById('exportToPDF').addEventListener('click', function (event) {
        ganttChart.taskColumns.push(newTaskColumn);
        ganttChart.refresh(true,false);
        ganttChart.exportData('pdf');
    });

Let me know if that works 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 paul,
Thank you for contacting us, again!
After some testing I was able to find out why the icons are not displayed in your project.ViewEncapsulation defines template and style encapsulation options available for component’s.
Just add the following code snippet to you app.componetn.ts file:

import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core';
import { CardViewComponent, Smart } from 'smart-webcomponents-angular/cardview';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None
})

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 paul,
Thank you for contacting us!
Let me answer your enquiries:
1. Can you share a code example of this case, because I was unable to reproduce this case.Also check the console for errors.
2. You can use the footerTemplate property of the smart-window to overwrite the default one and create custom one. I
have prepared a little code example on how to achieve this. I used the event ‘open’ of the smart-card-view.
More about the footerTemplate you can check in the smart-window API here :https://www.htmlelements.com/docs/window-api/
//In you JS File:

window.onload = function ( ){
    const cardview = document.querySelector('smart-card-view');
        cardview.addEventListener('open', function (event) {
        const window = document.querySelector('smart-window')
        window.footerTemplate = 'footerTemplate'
        let id = parseFloat(window.label[0])
        let deleteBtn= document.getElementById('deleteButton')
        deleteBtn.addEventListener('click', () =>{
          window.close()
          removeRecord(id)
        })
    });
    function removeRecord(id){
        cardview.removeRecord(id-1)
      }
}

And in your HTML file:

    <smart-card-view id="cardView"></smart-card-view>
    <template id='footerTemplate'>
        <smart-button id ='deleteButton'> Delete</smart-button>
      </template>

Note that I have used this demo for base : https://www.htmlelements.com/demos/cardview/deferred-scroll/
3.This on will be similar to the previous one:
//In your JS file:

window.onload = function ( ){
    const cardview = document.querySelector('smart-card-view');
        cardview.addEventListener('open', function (event) {
        const window = document.querySelector('smart-window')
        let okBtn = window.querySelector('.ok .smart-button')
            console.log(okBtn)
        okBtn.addEventListener('click', function (){
            alert(okBtn.textContent)
        })
    })
}

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 Shriram Toradmal,
Thank you for contacting us!
1. You can create custom operations, but not custom operators .
2. Unfortunately the Query Builder doesn’t support SQL query format but it supports QueryBuilder value to DynamicLinq expression if that may suit your needs.
DynamicLinq expression documentation:
https://www.htmlelements.com/docs/querybuilder-query-parser/
However if you really SQL query format we can make Custom Javascript Components Development for you.
If that suits you feel free to submit your enquiry with: sales@jqwidgets.com
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,
By default the DateTimePicker in the dropdown(pop-up) will highlight the todays date in the dropdown even if the nullable property is set to true.
However there is a way to achieve this and you can check the solution in the code snippet below :
//In your HTML file:

    <smart-date-time-picker
                          calendar-button
                          enable-mouse-wheel-action
                          spin-buttons
                          spin-buttons-position="left"
                          nullable
                          value = 'null'
                          hide-tooltip-arrow
                        >
                        </smart-date-time-picker> 

Note that I have set the nullable property to true and set the DAteTimePicker value to null
And in your CSS:
/* Necessery styles for the initial selected date */

.smart-calendar .smart-calendar-week .smart-calendar-cell[today]{
    background-color: white;
    color: black;
    border-color: transparent;
}

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 Dark Beccio,
In order to achieve the functionality you want, the dataType column is recieving must be a number, but in your case its a string .
Also I have used this demo for testing:
https://www.htmlelements.com/demos/grid/column-formatting/
I have tested the grid with a column with cellsFormat: ‘c2’ and value as the one from your post and there is no rounding up of the value.
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 Dark Beccio,
Yes with the formatFunction is totally doable.
I have prepared a quick code example for you on how to achieve this.

const sampleData = [{ "Date": "1", "Referral": "1391", "SearchPaid": "1158", "SearchNonPaid": "1201", "uid": 0 }, { "Date": "2", "Referral": "1379", "SearchPaid": "1439", "SearchNonPaid": "1015", "uid": 1 }, { "Date": "3", "Referral": "1026", "SearchPaid": "1288", "SearchNonPaid": "1282", "uid": 2 }, { "Date": "4", "Referral": "1497", "SearchPaid": "1063", "SearchNonPaid": "1089", "uid": 3 }, { "Date": "5", "Referral": "1153", "SearchPaid": "1107", "SearchNonPaid": "1051", "uid": 4 }, { "Date": "6", "Referral": "1367", "SearchPaid": "1351", "SearchNonPaid": "1037", "uid": 5 }, ]
window.Smart('#chart', class {
    get properties() {
        return {
            caption: 'Web Site Traffic Analysis',
            description: 'Daily unique visitors (stacked)',
            showLegend: true,
            padding: { left: 5, top: 5, right: 11, bottom: 5 },
            titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
            dataSource: sampleData,
            xAxis: {
                dataField: 'Date',
                type: 'auto',
                baseUnit: 'month',
                valuesOnTicks: false,
                labels: {
                    formatFunction: function (value) {
                        let months = [ 'jan', 'feb' ,'march' , 'april' , 'may' , 'june' , 'july' , 'august' , 'september', 'october' , 'november' , 'december']
                       return months[value-1]
                    }
                },
// Rest of your Code
//Note that i'm using this demo for base : https://www.htmlelements.com/demos/chart/stacked-line-series/

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 Michele,
Thank you for sharing this issue with us!
We have created a work item for this case and we will work on it to fix 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/

[Author]

Posts