Products

[svetoslav_borislavov]

Hi,

What do you execute on focus? You can both select everything and also do the other actions
If I have not understood you correctly, explain again.

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

You should select the input element of the numeric text box and then invoke the select function.
Here is an example: https://codepen.io/dkeamcaksoem/pen/RwELxNK

I hope it helps!

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

The CSS style that should be added is this:

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

Also, make sure that you are adding it to a place where the CSS is not scoped!

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

Could you please check this topic and see if it helps:
https://www.htmlelements.com/forums/topic/custom-gridcolumnmenu/

If you still face the problems, do not hesitate to contact us!

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

What are you trying to achieve and face problems with the re-rendering?
To freeze and unfreeze a column, you can use the setColumnProperty.

Example:
const grid = document.querySelector(‘smart-grid’);
grid.setColumnProperty(“firstName”,”freeze”,true);

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

Thank you for the update.
If you have any further questions, do not hesitate to contact us!

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

This is happening because you have set the locale to ‘ko’ but you haven’t assigned any messages to the grid.
Please visit this article to see how to correctly setup localization:
https://www.htmlelements.com/docs/grid-localization/

I hope this helps!

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

You may tweak the CSS, to change the width and height of the dialog, as well as the max-width, width and height of the textArea editor:
Here is the updated version:
https://codepen.io/svetoslavb04/pen/xxmELPv

I hope this helps!

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

You may turn off the message either for all the columns or for specific ones, here is an example:
https://codepen.io/svetoslavb04/pen/mdarMMr

Turning off the message can be made with pure CSS:

/*For specific columns*/
.smart-kanban-column[data-field=”manualTesting”] .smart-kanban-column-content-tasks.empty:after{
content: “”
}

/*For all columns*/
.smart-kanban .smart-kanban-column-content-tasks.empty:after {
content: “”
}

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

Thanks for the update!
If you need further assistance, do not hesitate to contact us!

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

A custom command cannot be added, but an existing one can be made custom.
For example, you can use ‘columnMenuCustomizeType’ and make it custom. Change the command that it should execute and change its label.
To change the command in JS, just pass a function that will be executed.
Changing the label should be done via ‘messages’ property. ‘messages’ is used for localization, but can be used our case also.
You should change the message for ‘columnMenuCustomizeType’ in the object.
Note that you should add all the messages in order for your grid to have the correct labels.
Here is an example in JS:
https://codepen.io/svetoslavb04/pen/MWZeENJ?editors=1010

Replicating it in Blazor can be a tough task.
The messages will be set easily, but the command cannot.
You can set it via JS in Blazor, but this way a JS function will be executed.
Here is an example in Blazor:
`
@page “/treegrid”
@using System.Text.Json

@inject IJSRuntime JS;

<style>
body,
html,
app {
height: 100%;
}

app {
overflow: auto;
}

.content {
height: calc(100% – 70px);
}
/* This is the CSS used in the demo */
smart-grid {
width: 100%;
}

body {
height: 1000px;
}
</style>
<h1>Filter Panel – DataGrid filtering UI</h1>
<p>
This example shows how to use the DataGrid filtering panel. Click on the Filter button in the Grid
header to open the filtering panel.
</p>
@if (dataRecords == null)
{
<p><em>Loading…</em></p>
}
else
{
<Grid Id=”my-grid” DataSource=”dataRecords” Editing=”@editing” ColumnMenu=”@columnMenu” Messages=”@messages”>
<Columns>
<Column DataField=”Name” Label=”Name”></Column>
</Columns>
</Grid>
}
<script>
window.customCommand = () => {
console.log(‘custom command’)
}

window.setGridColumnMenu = () => {
const grid = document.querySelector(“#my-grid”);

console.log(grid.columnMenu.dataSource.columnMenuCustomizeType)
grid.columnMenu.dataSource.columnMenuCustomizeType.command = customCommand;
}
</script>
@code {

class Human
{
public Human(string name, int age, string gender, string city)
{
this.Name = name;
this.Age = age;
this.Gender = gender;
this.City = city;
}

public string Name { get; set; }
public int Age { get; set; }
public string Gender { get; set; }
public string City { get; set; }

}

Dictionary<string, object> messages = new()
{
{
“en”, new Dictionary<string, object>()
{
{“columnMenuCustomizeType”, “Custom Command” },
//Fill the rest messages…
}
}
};

GridEditing editing = new GridEditing()
{
Enabled = true,
Mode = GridEditingMode.Cell
};

GridColumnMenu columnMenu = new GridColumnMenu()
{
Enabled = true,
DataSource = new GridColumnMenuDataSource()
{
ColumnMenuCustomizeType = new GridCommand() { Visible = true },
ColumnMenuItemRename = new GridCommand() { Visible = true },
ColumnMenuItemEditDescription = new GridCommand() { Visible = true },
ColumnMenuItemHide = new GridCommand() { Visible = true },
ColumnMenuItemDelete = new GridCommand() { Visible = true }
}
};

private void CustomCommand()
{
}

private List<Human> dataRecords;

protected override void OnInitialized()
{
base.OnInitialized();

dataRecords = new List<Human>();

dataRecords.Add(new Human(“Peter”, 26, “male”, “Sofia”));
dataRecords.Add(new Human(“Johny”, 17, “male”, “Plovdiv”));
dataRecords.Add(new Human(“Ivan”, 32, “male”, “Varna”));
dataRecords.Add(new Human(“Iskra”, 56, “female”, “Burgas”));
}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if(firstRender)
{
await JS.InvokeVoidAsync(“setGridColumnMenu”);
}
}
}
`

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

Thank you for the update!
Please, do not hesitate to contact us if you need any assistance.

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

Thank you for the update!
Please, do not hesitate to contact us if you need any assistance.

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

Here is something similar achieved:
https://codepen.io/svetoslavb04/pen/NWeNZMj

I hope this helps!

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

As you can see, the callback accepts a few arguments.
Generally, this callback is for validating the new cell value.
You may validate the cell; if it is valid, you should invoke the confirm function from the arguments.
The function accepts true if the cell is valid and false if it is not:
https://codepen.io/svetoslavb04/pen/RwEaZvM

Best Regards,
Svetoslav Borislavov

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

[Author]

Posts