Products

[ivanpeevski]

Hi,

Here is a more detailed guide how to achieve that:

 

For unique cell ids you can use the combination of row index + cell datafield. So a cell id will be like “2_lastName”

 

You can use the cellEndEdit event to keep track of cells that have been edited by storing their id in a global array.

 

Use the browser’s “submit” and “formdata” events to modify the form data before it gets to the server, like in the documentation here:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/formdata_event

 

Use the getValue method I suggested to get the current cell value and add the cell id + value to the modified FormData object.

 

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

[ivanpeevski]

Hi,

If you need the value of only some specific cells, you can use getValue in this way:

const val= table.getValue(“3, ‘lastName'”);

 

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

[ivanpeevski]

Hi,

 

You can use table.cancelEdit() in the ‘cellBeginEdit’ event. Here is an example – codepen

 

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

[ivanpeevski]

Hi,

Please see the example here – codepen – the first cell of the first row is uneditable

You can cell event.preventDefault() in the ‘beginEdit’ event.

 

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

[ivanpeevski]

Hi Lukas,

 

Adding/Updating items of a List generally doesn’t trigger UI updates. You can notify Blazor by assigning the List to itself. For example:

var newEvent = new SchedulerDataSource()
{
Label = “Review Revenue Projections”,
DateStart = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 11, 45, 0),
DateEnd = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 15, 0, 0),
};
dataSource.Add(newEvent);
// Reassign dataSource to trigger UI update
dataSource = new List<SchedulerDataSource>(dataSource);

 

Best regards,
Ivan Peevski

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

[ivanpeevski]

Hi Lukas,

Thank you for the feedback! I have opened a work item for that and we will resolve this in our next releases.

For now, you can attach the event through JavaScript. You can get the task id with “event.detail.task.data.id” and use JSInterop to call back a .Net method to handle the id in the way you need.

 

Best regards,
Ivan Peevski

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

[ivanpeevski]

Hi faraaz,

 

The ganttchart should reload automatically if its dataSource is set to a new value. Here is an example – codepen

Another possible approach is to use clearTasks(), followed by insertTask() for the new tasks.

 

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

[ivanpeevski]

Hi tanner,

 

Unfortunately, this is not supported by the Form, since the template is a custom element and it’s value can’t always be extracted.

 

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

[ivanpeevski]

Hi Brandon,

 

There are a few different ways to capture the value of the input. For example, you can use two-way value binding:

<h3>@textValue</h3>
<Input @bind-Value=”@textValue” OnChange=”changeEvent”></Input>

@code{
string textValue = “”;
private void changeEvent(Event ev)
{
Console.WriteLine(textValue);

}
}

 

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

[ivanpeevski]

Hi khaqan asif,

 

When using virtualDataSource, the pasting operation will trigger an ‘update’ callback for the virtualDataSource, the same way cell editing does.

You can have a look at the demo here- https://www.htmlelements.com/angular/demos/grid/server-side-cell-edit/

You can try to copy and paste some values and you will see the changes in the SQL Table shown below the grid.

 

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

[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

[Author]

Posts