Products

[ivanpeevski]

Hi khaqan asif,

When the values are pasted, the “onCellUpdate” callback function will be called. You can use it to get the cells, which will be updated. The function also contains a “confirm” callback, which you can use to confirm the changes if the database save was successful or otherwise cancel them.

You can have a look at the code here – stackblitz, for Google Chrome you may need to run the demo locally, since the Clipboard API is not available for security reasons.

 

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

[ivanpeevski]

Hi FerrisChamp,

 

Here is an example of a GridColumn object with a dropDownList editor and custom dataSource:

new GridColumn()
{
DataField = “Product”,
Label = “Product Name”,
Template = “dropDownList”,
Editor = new Dictionary<string, object>()
{
{“template”, “dropDownList” },
{“dataSource”, new string[] {“Black Tea”, “Green Tea”,
“Caffe Espresso”, “Doubleshot Espresso”,
“Caffe Latte”, “White Chocolate Mocha”,
“Caramel Latte”, “Caffe Americano”,
“Cappuccino”, “Espresso Truffle”,
“Espresso con Panna”, “Peppermint Mocha Twist”} },
}
}

 

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

[ivanpeevski]

Hi Shubham Printe,

 

It is possible by inserting the dropDown menu through JavaScript in the “formatFunction” of the column.

Here is a basic example – sandbox

 

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

[ivanpeevski]

Hi wolf.t,

 

We will make OnColumnChange available for Blazor in our next release.

Apologies for the confusion.

 

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

[ivanpeevski]

Hi mydoal,

 

When working with large datasets, we recommend using the TreeGrid in Virtual Mode instead. We have an example in our demos section – https://www.htmlelements.com/angular/demos/grid/virtual-tree-grid/

 

In Virtual Mode, the child rows are generated through a callback whenever a row is expanded. In this way, the grid doesn’t need to process all records at once and it considerably improves performance.

 

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

[ivanpeevski]

Hi,

 

The “selectCells” method as the name suggests simply selects the given cells. The reason you don’t see the result in your code is because selection is not enable.

You can test your code with cell selection enabled and see the result.

 

Best Regards,
Ivan Peevski

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

[ivanpeevski]

Hi edward,

 

You can use column -> cellsClassName. You can set this to a function, which is called for each cell. For example:

cellsClassName: (index, dataField, value, rowData, row) => { if (index === 0) { return ‘cell-class-1’ }

 

Best Regards,
Ivan Peevski

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

[ivanpeevski]

Hi Shubham,

You can manually implement the scroll through the “wheel” event.

Here is an example – codepen

 

Best Regards,
Ivan Peevski

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

[ivanpeevski]

Hi edwardsmarkff,

 

You can make changes to the source code if you wish, however sharing the source code publicly is not allowed.

You can also have a look at the ListBox components, which supports this feature – https://www.htmlelements.com/demos/listbox/reorder/

 

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

[ivanpeevski]

Hi,

 

The issue is caused due to JavaScript trying to apply the same object reference to all three grids. To fix the issue, you should create a copying function, so that messages is a separate object for each grid. You can insert the function below in the initGrid.js file. Then apply to each message:
function deepClone(obj) {
if (obj === null || typeof obj !== ‘object’) {
return obj;
}

if (Array.isArray(obj)) {
const arrCopy = [];
for (const item of obj) {
arrCopy.push(deepClone(item));
}
return arrCopy;
}

const objCopy = {};
for (const key of Object.keys(obj)) {
objCopy[key] = deepClone(obj[key]);
}
return objCopy;
}

 

And then:

messages: deepClone(messages);

 

Regards,
Ivan Peevski

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

[ivanpeevski]

Hi c.ienco,

There is currently an issue with using resourceTimelineFormatFunction when resourceTimelineMode  is set to “custom”, which we are working to resolve for our next release.

For now, you can consider using the “load” CSS attribute to customize the cells. For example:

.smart-resource-timeline-view-cell[load=”9/10″]::after{

background: orange;

}

 

 

Best Regards,
Ivan Peevski

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

 

[ivanpeevski]

Hi faraaz,

The baseline of a task will be shown only if the task has a “planned” property, which determines the dateStart and dateEnd of the baseline.

Please see the example on our site – https://www.htmlelements.com/demos/gantt/task-baseline/

 

Best Regards,
Ivan Peevski

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

[ivanpeevski]

Hi Ferris,

Can you please make sure you are using the latest version of Smart.Blazor? If yes, please also share all properties you have set to the Grid.

In the example below you can see that the code you shared should be working correctly:

@page “/”

<Grid @ref=”grid” DataSource=”@Clients” ColumnGroups=”@columnGroups”>
<Columns>
<Column DataField=”Name” Label=”Client Name” ColumnGroup=”Details”></Column>
<Column DataField=”Balance” Label=”Acccount Balance” DataType=”number”
ColumnGroup=”Details”></Column>
<Column @ref=”cityColumn” DataField=”City” Label=”City” ColumnGroup=”Address”></Column>
<Column DataField=”Country” Label=”Country”
ColumnGroup=”Address”></Column>
<Column DataField=”LastOrder” Label=”Last Order” DataType=”date” CellsFormat=”dd/MM/yyyy”
Align=”HorizontalAlignment.Center”></Column>
</Columns>
</Grid>

<Button OnClick=”FreezeColumn”>Freeze City</Button>
<Button OnClick=”UnfreezeColumn”>Unfreeze City</Button>

@code{
Grid grid;
Column cityColumn;

private void FreezeColumn()
{
cityColumn.ColumnGroup = “Frozen”;
cityColumn.Freeze = “near”;
}

private void UnfreezeColumn()
{
cityColumn.ColumnGroup = “Address”;
cityColumn.Freeze = “false”;
}

class Client
{
public string Name { get; set; }
public double Balance { get; set; }
public string City { get; set; }
public string Country { get; set; }
public DateTime LastOrder { get; set; }

public Client(string name, double balance, string city, string country, DateTime lastOrder)
{
Name = name;
Balance = balance;
City = city;
Country = country;
LastOrder = lastOrder;
}
}
Client[] Clients = new Client[]
{
new Client(“Maria Anders”,130.00,”Berlin”, “Germany”, DateTime.Now),
new Client(“Ana Trujillo”,230,”Mxico D.F.”, “Mexico”, DateTime.Now),
new Client(“Antonio Moreno”,-3500,”Mxico D.F.”, “Mexico”, DateTime.Now),
new Client(“Thomas Hardy”,55,”London”, “UK”, DateTime.Now),
};

List<GridColumnGroup> columnGroups = new List<GridColumnGroup>()
{
new GridColumnGroup()
{
Label = “Customer Details”,
Align = HorizontalAlignment.Center,
Name = “Details”
},
new GridColumnGroup()
{
Label = “Customer Address”,
Align = HorizontalAlignment.Center,
Name = “Address”
},
new GridColumnGroup()
{
Label = “Frozen”,
Align = HorizontalAlignment.Center,
Name = “Frozen”
}
};
}

 

 

Best Regards,
Ivan Peevski

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

[ivanpeevski]

Hi Oliver,

 

Here is how to apply a custom icon to a command button:

.smart-grid-icon.smart-icon-arrow-left::before {
content: var(–smart-icon-arrow-left);
}

You can find all icons that display automatically in the smart.grid.css file. Search in the page for “.smart-grid-icon.smart-icon-”

 

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

[ivanpeevski]

Hi Oliver,

 

We share the same property descriptions for the JavaScript and Blazor API versions, since they are generally identical. The “handled” parameter is one of the few exceptions which are missing for the Blazor version.

We will consider updating the Blazor API to reflect that.

 

Best Regards,
Ivan Peevski

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

[Author]

Posts