Products

[ivanpeevski]

Hi Laola,

 

To make a field read-only, you can set “disabled: true”.

For the second question, please see the Checkout demo here – https://www.htmlelements.com/demos/form/checkout/

You will see that the field at orderSummary.order.products is dependent on the information contained in the payment method fields.

You can do this by updating the value inside the onValueChanges callback

 

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

[ivanpeevski]

Hi Brandon,

You can set a formatting function using JSInterop. Add a callback to the OnReady event. When the TableReady method is fired call a JavaScript function that will correctly set the format. Here is an example:

@inject IJSRuntime JS

<Table Id=”my-table” DataSource=”@Clients” Columns=”@tableColumns” OnReady=”TableReady”></Table>

@code {
Table table;

TableColumn[] tableColumns = new TableColumn[]
{
new TableColumn()
{
Label= “Name”,
DataField= “Name”,
},
new TableColumn()
{
Label= “Last Order”,
DataField= “LastOrder”,
DataType= TableColumnDataType.Date
}
};

private void TableReady(Table table)
{
JS.InvokeVoidAsync(“setDateFormat”, “my-table”, “LastOrder”, “dd/MM/yyyy HH:mm”);
}

//….

}

Then in your App.razor / Host.cshtml file create the function:

<script>
window.setDateFormat = (tableId, dataField, format) => {
let table = document.querySelector(‘#’ + tableId);
if (table) {
table.setColumnProperty(dataField, “formatFunction”, function (settings) {
const formattedValue = new window.Smart.Utilities.DateTime(settings.value).toString(format);
settings.value = formattedValue
});
}
}
</script>

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

[ivanpeevski]

Hi Matias,

When making many changes at once you can use beginUpdate & endUpdate. When beginUpdate() is called, it prevents the grid from refreshing until endUpdate() is called. So you can apply the changes like this so that the grid is refreshed only once at the end:

grid.beginUpdate();
//changes here…
grid.endUpdate();

 

In general, when you use server-side CRUD you can also consider using virtualDataSource as in the example here – https://www.htmlelements.com/angular/demos/grid/server-side-crud/

 

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

[ivanpeevski]

Hi Catdoken,

Yes, beginUpdate and endUpdate also work with setProperties. To use them, you should call them in this order:

grid.beginUpdate();

//make updates

grid.endUpdate();

 

Best Regards,
Ivan Peevski

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

[ivanpeevski]

Hi,

 

One way to achieve this is by using the “mousemove” event to keep track of the mouse:

let mouseX, mouseY;
document.querySelector(‘smart-scheduler’).addEventListener(‘contextMenuOpening’, function(event){
event.preventDefault();
console.log(mouseX, mouseY)
})

document.querySelector(‘smart-scheduler’).addEventListener(‘mousemove’, function(event){
mouseX = event.pageX;
mouseY = event.pageY
})

 

Best regards,
Ivan Peevski

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

[ivanpeevski]

Hi Srinivas,

I don’t fully understand the question. The example shows how to prevent the default window from opening. After this, you can load or launch any angular component that you want. In the example, I launch a new custom window, but you can change this to whatever you need.

 

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

[ivanpeevski]

Hi Srinivas,

 

You can use the “popupWindowCustomizationFunction” property to prevent the default window from opening and replace it with any element you want.

Please see the example here – stackblitz

 

 

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

[ivanpeevski]

Hi Dark Beccio,

 

Have you set the “number” type in the dataSource -> dataFields array?

For example:

dataSource: new Smart.DataAdapter(
{
dataSource: generateData(10000),
dataFields:
[
'id: number',
'firstName: string',
'lastName: string',
'productName: string',
'quantity: number',
'date: date',
'price: number',
'total: number'
]
})

<span class=”im”>Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/</span>

[ivanpeevski]

Hi,

 

You can use the following CSS:

 

.row-class-dettaglio {
background: white;
color: back;
--smart-grid-cell-background-freeze: white;
--smart-grid-cell-color-freeze: black;
}

Best Regards,
Ivan Peevski

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

 

[ivanpeevski]

Hi,

There should be two dashes for the css variable, it seems one got lost when pasting the code. Here is the corrected version:

smart-grid smart-number-input{
--smart-editor-addon-width: 0px;
}

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

• This reply was modified 10 months, 4 weeks ago by ivanpeevski.

[ivanpeevski]

Hi,

 

You can hide the up/down buttons with the following CSS:
smart-grid smart-number-input{
–smart-editor-addon-width: 0px;
}

 

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

[ivanpeevski]

Hi,

 

It’s not described in the API, because this is a property all HTML elements have.

You can see the documentation here – https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

 

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

[ivanpeevski]

Hi,

 

You can use data attributes on our components in the same way you would for any other html element. Like this:

let grid = document.querySelector(‘smart-grid’);
grid.dataset.customData = “abc”;
console.log(grid.dataset.customData);

 

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

[ivanpeevski]

Hi,

 

The two properties are found under the “columns” property.

For a specific example how to achieve the table in the image, please see the demo here – codepen

 

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

[ivanpeevski]

Hi,

 

To set the width of the grid to 90% and set the height of the grid to the existing rows, you can use the CSS below:

smart-grid {
width: 90%;
height: auto;
}

 

For setting the width of columns, you can just use the width property like this: width: “20%”
There is also a “minWidth” property that works in the same way.

Here is an example with all suggestions applied to the grid – codepen

 

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

[Author]

Posts