Products

[admin]

Hi Eric,
Which version do you use?
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi,
We are not able to reproduce this with the current version. Please, check whether you use the latest version and share more details about your test.
Regards,
Peter
Smart UI Team
Htmlelements.com

[admin]

Hi klslead,
To initialize custom fields as in the example I pointed out, you should use Javascript, not HTML.
Example:

{
		dataField: 'mask',
		label: 'Mask Input',
		controlType: 'mask',
		controlOptions: {
			placeholder: 'Phone number',
			mask: '+1 (###) ### - ####',
		},
		required: true
	},

Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi klslead,
Documentation about types can be found here: https://www.htmlelements.com/docs/form-api/. For setting up a Form with Mask and Number fields, please refer to: https://www.htmlelements.com/demos/form/datetime/
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi Johnny,
You can use Blazor’s RenderFragment for that purpose.
Example:

@page "/dockinglayout"
<Example Name="DockingLayout">
    <style>
        smart-docking-layout {
            width: 100%;
            height: 500px;
            max-width: 1000px;
            background-color: #EEEDF3;
        }
            smart-docking-layout .smart-items-container smart-splitter-item.smart-element,
            smart-docking-layout .smart-items-container > .smart-container > smart-splitter-item.smart-element {
                width: 50%;
                height: 50%;
            }
            smart-docking-layout smart-tabs-window smart-slider.smart-element,
            smart-docking-layout smart-tabs-window smart-multiline-text-box.smart-element {
                height: 100%;
                width: 100%;
            }
            smart-docking-layout smart-tabs-window smart-multiline-text-box.smart-element {
                display: block;
            }
    </style>
    <DockingLayout OnReady="OnReady" Layout=@layoutStructure>
    </DockingLayout>
    <div id="Input">
        <br />
        <br />
        <TextArea Value="What is Lorem Ipsum?"></TextArea>
    </div>
    <div id="Slider">
        <br />
        <br />
        <Slider Value="50" ShowButtons="true" TicksVisibility="TicksVisibility.Major" TicksPosition="TicksPosition.Track"></Slider>
    </div>
    <div id="Custom">
        @DynamicRender
    </div>
    <Button @onclick="InjectBlazorComponent">Inject Component</Button>
</Example>
@code {
    private object[] layoutStructure = new object[] {
        new {
            type = "LayoutGroup",
            orientation = "horizontal",
            items = new object[] {
                new {
                    type = "LayoutGroup",
                    size = 200,
                    items = new object[] {
                        new {
                            type = "LayoutPanel",
                            label = "Input",
                            id = "tabPanel",
                            items = new object[] {
                                new {
                                    type = "LayoutPanel",
                                    label = "TextBox Tab",
                                    content = "#Input"
                                },
                                new {
                                    type = "LayoutPanel",
                                    label = "Slider Tab",
                                    content = "#Slider"
                                }
                            }
                        }
                    }
                },
                new {
                    type = "LayoutPanel",
                    label = "Output",
                    items = new object[]{
                        new {
                            id="outputTab",
                            label = "Output",
                            headerPosition = "none",
                            content = "Write more text here..."
                        }
                    }
                }
            }
        },
        new {
            id = "item0",
            label = "Tabs 0",
            items = new object[]{
                new {
                    label = "Tab A",
                    selected = true,
                    content = "#Custom"
                }
            }
        }
    };
    private RenderFragment DynamicRender { get; set; }
    private void OnReady(DockingLayout dockingLayout)
    {
    }
    private RenderFragment CreateDynamicComponent() => builder =>
    {
        builder.OpenComponent(0, typeof(SurveyPrompt));
        builder.AddAttribute(1, "Title", "Some title");
        builder.CloseComponent();
    };
    private void InjectBlazorComponent(MouseEventArgs args)
    {
        DynamicRender = CreateDynamicComponent();
    }
}

Hope this helps.
Best regards,
Boyko Markov
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi peter.jak,
Thank you for the feedback.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi Johnny Johnny,
I hoped that in the previous post I explained that when you remove a row the index of the rest of the ROWS is changed expectedly which means that your selection indexes when you started the loop becomes invalid and this is visible from your console logs, too.
For example, when you call

table.removeRow(0);
table.removeRow(3);
table.removeRow(11);

All three rows are removed. Ex: https://jsfiddle.net/L0qcynzf/
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi klslead,
We will need an example which demonstrates the reported behavior. You can modify any of our website samples and send us a codepen link.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi Dark Beccio,
The reported behavior is actually by design and same as in MS Excel. If you would like to try, please type a number 38 in an empty excel spreadsheet, then select the cell and set the formatting to “Percentage”. The result is 3800.00%
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi,
We are aware of that and work on it, but there is also an issue in the provided code. When you remove a row within that foreach, the next row’s index in the loop will be incorrect. We suggest you using a different type of loop – ‘for’ and correct its step after you remove a row. Otherwise, while you remove rows, you will skip a step in the loop.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi,
The Table component when it displays a Dates in the column, the Data can be formatted by using a formatFunction. Example about that functionality is available on that page: https://www.htmlelements.com/demos/table/overview/
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi davout,
we will need a full stackblitz.com sample. Unfortunately, the provided information is insufficient for reproduction of an issue with our angular datetimepicker.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi Dean Cama,
I would suggest you to download the library from our website. The .zip includes the angular examples available on the website.
For the export, you need to refer to:

   <!-- JSZip -->
    <script type="text/javascript" src="../../scripts/jszip.min.js"></script>
    <!-- pdfmake -->
    <script type="text/javascript" src="../../scripts/pdfmake.min.js"></script>
    <script type="text/javascript" src="../../scripts/vfs_fonts.js"></script>

In your index page.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi davout,
We use this for testing:

<smart-date-time-picker
  (change)="change($event)"
  #datetimepicker
  [calendarButton]="true"
  [enableMouseWheelAction]="true"
  [dropDownPosition]="'center-bottom'"
  [spinButtons]="true"
  [spinButtonsPosition]="'left'"
></smart-date-time-picker>

app.component.html

import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { DateTimePickerComponent } from '@smart-webcomponents-angular/datetimepicker';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('datetimepicker', { read: DateTimePickerComponent, static: false }) datetimepicker: DateTimePickerComponent;
	
  change(event): void {
    console.log(event.detail.value);
  }
  
	ngOnInit(): void {
		// onInit code.
	}
	ngAfterViewInit(): void {
		// afterViewInit code.
		this.init();
    }
		
	init(): void {
		// init code.
	    
	}	
}

The reported behavior cannot be reproduced. Please, share a Stackblitz sample showing incorrect behavior and instructions how to reproduce it.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi deancama,
You need to include the missing reference to ‘jszip.min.js’. The file can be found in the installation package.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts