Products

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

[ivanpeevski]

Hi Oliver,

 

Blazor runs asynchronously from JavaScript, so the handled property is not available.

If you wish to change the default behavior of the Delete command, for example, you can change its “Command” name to a custom name. For example:

CommandColumnDelete = new GridCommand() { Visible = true, Command=”customDeleteCommand” },

 

Best Regards,
Ivan Peevski

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

[ivanpeevski]

Hi Oliver,

Here is how you can use the OnCommand property to capture the command and the clicked row:

@using Newtonsoft.Json.Linq;

<Grid DataSource=”@Clients” Editing=”@editing” OnCommand=”OnCommand”>….</Grid>

@code{
….
private void OnCommand(object obj)
{
dynamic commandObject = JObject.Parse(obj.ToString());
string commandName = (commandObject[“name”]).ToObject();
int commandRowId = (commandObject[“id”]).ToObject();
}

}

Best Regards,
Ivan Peevski

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

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

[ivanpeevski]

Hi Oliver,

 

The columns with AllowHide set to “false” will not be displayed in the Column Chooser.

 

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

[ivanpeevski]

Hi innosoft,

 

The jszip.min.js file is included in the NPM package in the “export” folder. You can include the script in the following way:

<script src=”/node_modules/smart-webcomponents/export/jszip.min.js”></script>

 

Best Regards,
Ivan Peevski

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

[ivanpeevski]

Hi innosoft,

You should set the “editor.settings.formatString” property.

Here is an example – codepen

 

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

[Author]

Posts