Products

[ivanpeevski]

Hi Oliver,

 

Please contact us at support@jqwidgets.com with your license key and we will provide with the instructions how to activate the license. It is not necessary to use the JS files from the website download.

 

Best Regards,
Ivan Peevski
Smart UI Team
http://www.htmlelements.com

[ivanpeevski]

Hi Peter,

 

1) You can use the getCellValue property of the column to set a function, which will return only the value of the property you wish to display.

Here is a simple example – codepen

 

2) One way to implement is to set getCellValue to return a string containing both properties. So if account number is “15” and name is “John”, return “15, John”. Then set the ‘template’ of the column to display only one of the values. In this way, filtering will work for both values

 

Best Regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi Peter,

 

Inside of the ‘change’ event, you can use either grid.getSelectedCells() or grid.getSelection() to get the current selection.

Here is an example: codepen

 

Best Regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi Jose,

 

You can prevent the grid from updating by first calling grid.beginUpdate(). For example, this will update the value(internally, but not visually) without interrupting the cell editing:

grid.beginUpdate();

grid.setCellValue(2, ‘quantity’, 15);

 

To update the value visually(but not internally), the only possible way is through DOM selection. For example:

grid.querySelector(‘smart-grid-row[data-id=”2″] smart-grid-cell[data-field=”quantity”] .smart-label’).textContent = “15”

 

However, the DOM selection will work only if the row is visible. Otherwise, the element will not exist.

 

Combining the two methods should achieve the desired effect.

 

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

• This reply was modified 1 year, 8 months ago by ivanpeevski.

[ivanpeevski]

Hi Manikanda,

 

the ‘template’ property can also be set as an HTML string. For example, this will produce the exact same result as the one in the demo:

template: `<div tabindex=0 style=”padding: 0px; display:flex; justify-content: center;”><span
tabindex=1>😊</span><span tabindex=2>😐</span>
<span tabindex=3>😂</span>
</div>`

 

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi Peter,

The full list of messages option is in the Grid API, under the ‘messages’ property – https://www.htmlelements.com/docs/grid-api/#toc-messages_any

Regarding translations – we don’t have any ready translations, since many of the ‘messages’ phrases can be translated in multiple ways depending on the context, instead providing the tools for localization gives more flexibility to developers.

 

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

 

[ivanpeevski]

Hi Dark Beccio,

If you’d like to disable the image zooming, you can set the following CSS rule – background-size:contain – to a carousel item.

For example, the following CSS disabled zooming only for the first item in the Carousel:
<div>
<div>smart-carousel div[item-id=”0″] .smart-carousel-item-container{</div>
<div>  background-size: contain;</div>
<div>}</div>
</div>
<div></div>
<div>Here is a live demo – the first image is shown in its normal aspect ratio without zooming: stackblitz</div>
<div></div>
<div>

Best Regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

</div>
 

[ivanpeevski]

Hi Peter,

 

Can you please share the rest of the grid’s settings?

This issue doesn’t appear in the codepen my colleague sent you.

 

Best Regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi Peter,

 

In the Grid API Typescript section, you can see the properties of the GridCell object.

 

The translation of the Grid is not automatic. Before you set the ‘locale’, you should set the translations inside the ‘messages’ property, like this:

messages: {“da”: {….}}

 

Then, set the locale to ‘da’ and the Grid will be translated.

We have a detailed guide on Localization here – Grid Localization

Best Regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi Andrea,

 

Thanks for reporting that!

Regarding your solution, the 200ms delay is needlessly big. You can also achieve the same effect with 0ms

 

Best regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi Andreas,

Thanks for reporting that! I have opened a work item for that and we will fix it for our next releases.

Here is workaround fix until we patch the issue – after changing the dataSource, you should also call:

kanban.refresh();

 

Best regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi Andrea,

 

Since ajax calls are asynchronous, the component will always load before receiving the response from the ajax call. They will load at the same time only if dataSource is a static array.

If dataSource is set to a function, like in the example I shared, it should be set in the ngAfterViewInit() function.

 

Best regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi Andrea,

The functionality in comboBox works in the exact same way as in the topic you shared.

Here is an example how to implement it in Angular: stackblitz

 

Best regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi pkz,

I have answered the questions regarding the chart and the slow loading to your colleague at the support mail.

The chart is cut-off since it’s default width is 400px. You can set it to 100% or any other % value and it will scale inside the window. For example:

smart-chart{
width: 95%;
}

smart-window{
width: 600px;
}

 

For the second issue:

allowRowGroup is not a valid Grid column property. I think you are confusing it with ‘allowGroup’

You can find the full Grid API here –  https://www.htmlelements.com/docs/grid-api/#toc-column

‘allowRowGroup’ only exists for PivotTable columns. Some of the properties of the grid and pivot columns are similar, but they are not identical

 

Best regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

 

 

[ivanpeevski]

Hi pkz,

 

“data” represents the entire row object. So to create tags, you can use:

return data.tags.map(el=>el.tag)

 

This transforms the cell value from an array of objects to a comma separated string.

 

Best regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts