Demos

[admin]

Hi Dennis,
Thank you for the feedback. Unfortunately, there is currently no way to achieve what you require. However, in the next release, we will introduce a new Smart.Menu Boolean property – preventCloseOnCheck (prevent-close-on-check), that will prevent the closing of Menu items if enabled.
Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

I am evaluating the HTML UI Element. Now I am trying to create a custom dialog box when selecting a grid cell. The following is a summary of the issues that I encountered:
a) I have a child angular component that has a “smart-grid” custom tag. In the typescript file, I initialize the smart-grid in the ngAfterViewInit() function. In the function, I also attach a cellClick listener (which is firing).
this.grid.addEventListener(‘cellClick’, function (event: CustomEvent) {
const gridCell = <GridCell>event.detail.cell;
this.myClicked.emit(gridCell);
});
b) In the same component, I have an Output emitter
@Output() myClicked: EventEmitter<any> = new EventEmitter();
c) I tried to emit the output variable in the addEventListener function (as per (a)). It is however, it always return with the “undefined myClicked error”. I think the issues might be something to do with web component integration with Angular. I tried to declare any variable outside the ‘cellClick’ callback function, and use it within the ‘cellClick’ function, and, the result is, the callback function can’t use any angular variables.
d) The idea of emitting the event, is that the parent component can display a custom dialog box (with custom gridCell data) when someone click on the grid cell.
e) And after checking the API documentation, in order for me to use the events of grid and other web component, it always attached event to the web compoent via addEventListener.
Thus, for me to use the htmlelements components, I need your help, that, how can I use any angular variables within the addEventListener function.
I hope to hear from you, of course, as usual, as promptly as possible.
Best regards
-vinci-

[admin]

Hi LC,
Thank you for your feedback. We were able to reproduce this issue and will try to fix this issue as soon as possible.
Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hello LC,
Thank you for your feedback. There was a syntax error in the online example, in app.component.ts:
filtering: {
has to be:
filtering = {
We will rectify this mistake as soon as possible.
Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hello george@woh.rr.com,
1. Your code seems correct. We created a demo with some sample data in JSON format and your Grid settings and it works as expected: https://codepen.io/dimitar_jqwidgets/pen/ExyOYQX?editable=true%3Dhttps%3A%2F%2Fwww.htmlelements.com%2F.
2. Please contact support@jqwidgets.com for more information on how to remove the licensing message.
Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hello LC,
1. When a cell is in edit mode, the arrow keys navigate inside the cell editor’s (input’s) value. Unfortunately, it is not currently possible to change this behavior.
2. Ctrl+C and Ctrl+V are supported for copying/pasting cell values in the Grid, but Ctrl+Z (Undo operation), is, unfortunately, not. You can implement a custom context menu for Grid cells as shown in the following demo: https://www.htmlelements.com/angular/demos/grid/context-menu/.
Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi MiteshJ,
Thank you for the feedback. We have created a work item and will strive to improve the performance of Smart.Kanban for a future release.
Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi,
You can try our ComboBox component – https://www.htmlelements.com/demos/combobox/basic/
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi tanner anz,
Thanks for the feedback. We were able to reproduce the behavior.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hello LC,
The following step from the https://www.htmlelements.com/docs/grid/#angular guide is very important and should solve your issue:
3. Adding CSS reference
The following CSS file is available in ../node_modules/smart-webcomponents-angular/ package folder. This can be referenced in [src/styles.css] using following code.
@import 'smart-webcomponents-angular/source/styles/smart.default.css';
Another way to achieve the same is to edit the angular.json file and in the styles add the style.

"styles": [
	"node_modules/smart-webcomponents-angular/source/styles/smart.default.css"
]

Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi Dennis,
The filtering requires additional resources so it will indeed take a bit longer. There is mot a way around this.
Best Regards,
Peter Stoev

[admin]

Hello davout,
Both approaches are valid and applicable. To enable paging in the case where a table element is inside smart-table, just set the attribute (property) paging and whatever other settings you require to the smart-table tag, i.e.:

<smart-table id="table" paging>
    <table>
        <thead>
            <tr>
                <th scope="col">Country</th>
                <th scope="col">Area</th>
                <th scope="col">Population_Rural</th>
                <th scope="col">Population_Total</th>
                <th scope="col">GDP_Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Brazil</td>
                <td>8515767</td>
                <td>0.15</td>
                <td>205809000</td>
                <td>2353025</td>
...

Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hello Peter,
There is no need to add a dependency to another, more specific, npm package. What matters to the size of the build is what is actually imported in your Angular application (in app.module.ts). If you have imported only, for example, DockingLayoutModule, only it will be bundled when the application is built.
Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hello!
In the query builder, is it possible to add the options: “Not And”, “Not Or” when you add a group or a field? Because now there are only “And” and “Or”.

[admin]

Hello tanner anz,
Thank you for the feedback. We will work on updating this behavior for the next version of Smart HTML Elements.
Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com

[Author]

Posts