@ivanpeevski
@ivanpeevski
Forum Replies Created
-
AuthorPosts
-
ivanpeevski
ParticipantHi,
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/ParticipantHi,
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/ParticipantHi,
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/ParticipantHi,
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/ParticipantHi,
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/ParticipantHi,
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_eventUse 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/ParticipantHi,
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/ParticipantHi,
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/ParticipantHi,
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/November 22, 2023 at 11:19 pm in reply to: [Blazor Scheduler]How to add an item to a scheduler datasource from an event #109205ParticipantHi 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 PeevskiSmart UI Team
https://www.htmlelements.com/ParticipantHi 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 PeevskiSmart UI Team
https://www.htmlelements.com/ParticipantHi 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/ParticipantHi 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/ParticipantHi 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/ParticipantHi 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/ -
AuthorPosts