Products

[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/

[ivanpeevski]

HI pkz,

 

Please see the example here – codepen

As I mentioned in the previous reply, for most chart types, it is as simple as setting:
smartChart.seriesGroups[0].type = ‘column’ or  = ‘line’…..

 

Best regards,
Ivan Peevski

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

[ivanpeevski]

Hi pkz,

The object “smartChart.seriesGroups[0]” controls the settings of the chart’s type.

In the example, the type is set ‘column’. You can change the type just by changing it to ‘line’ or ‘area’.

To create a bar chart – set the type to ‘column’ and set ‘orientation’ to ‘horizontal’

 

Best regards,
Ivan Peevski

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

 

[ivanpeevski]

Hi pkz,

 

Thanks for the feedback!

Here is the updated version: codepen

The Chart can be refreshed by calling smartChart.refresh(), and the animation is controlled with the ‘animation’ property.

 

Best regards,
Ivan Peevski

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

 

 

[ivanpeevski]

Hi pkz,

Thanks for reporting that! Here is the update example with the fix included – codepen

If the chart is empty, there is most likely some error when transforming the data from the pivot to the chart

 

Best regards,
Ivan Peevski

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

[ivanpeevski]

Hi pkz,

For the custom summary function:

Please see the example here: codepen – it implements a custom summary function which sums 2* value of the data
I have left some comments to make it easier to understand how it works and how to modify it.
Though since this is not an official feature and more of a workaround, there might be some edge cases I have missed where bugs happen.

 

And for the Charting:

Thanks for noting that! I updated the code with a fix here – codepen
Also added some comments to make some of the functions clearer.

For example, here is the result when you select Country + Income + Expenses

You can also visit the smart-chart demos page to see some of the possible chart types and customization for the chart.

 

Best regards,
Ivan Peevski

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

 

[ivanpeevski]

Hi pkz,

 

1.  At the moment, we support multiple different summaries only for the smart-grid component.
2.  To achieve this, you could use the onCellRender() callback function. The function is called before each cell render and you can use it to perform the custom calculations and set them as value. Here is a simple example, which changes the value of the ‘USA Income’ summary: codepen
3.  The button is inactive since the div.switchContainer is standing on top of it. If you change it’s position, the button will be active
4. At the moment, the pivot designer only supports the categorical filter, however this is a great suggestion, and we will consider adding such option in a future release!
5. Yes, it’s possible – the createChart() function simply passes the table data to the smart-chart component. You can create a custom function, which will pass only the selected data – please have a look at the example here codepen
   We also have a similar demo on our site here: https://www.htmlelements.com/demos/pivottable/integration-with-chart/

Best regards,

Ivan Peevski

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

[ivanpeevski]

Hi Andrea,

The structure of the Editing window can be fully customized, including with custom Angular Components.

Here is an example of creating a custom Editing Window with multiple different Smart Angular components: codesandbox

If you experience any difficulties, please do not hesitate to contact us again!

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

 

[ivanpeevski]

Hi Pavan,

 

You can achieve this by using the OnChange Event. The current value of query builder is an array of objects.

Here is a simple example, where the array value is transformed into string and shown in the page:

@page “/”
@using System.Text.Json
@using System.Text.Json.Serialization

value is: @currentValue
<QueryBuilder Fields=”fields” OnChange=”OnChange”></QueryBuilder>

@code {
string currentValue = “”;
QueryBuilder queryBuilder;
private List<QueryBuilderField> fields = new List<QueryBuilderField>() {
new QueryBuilderField()
{
Label = “Id”,
DataField = “id”,
DataType = “number”
},
new QueryBuilderField()
{
Label = “Product”,
DataField = “productName”,
DataType = “string”
},
new QueryBuilderField()
{
Label = “Unit Price”,
DataField = “price”,
DataType = “number”,
FilterOperations = new string[]{“=”, “<“, “>”}
},
new QueryBuilderField()
{
Label = “Purchased”,
DataField = “purchased”,
DataType = “date”
},
new QueryBuilderField()
{
Label = “Available”,
DataField = “available”,
DataType = “boolean”
}
};

private async void OnChange(Event ev)
{
var detail = JsonSerializer.Deserialize<Dictionary<string, dynamic>>(ev[“detail”]);
currentValue = string.Join(“,”, detail[“value”]);
}
}

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

[Author]

Posts