Modifications to the default behavior in Syncfusion Blazor Grid - c#

I have a grid that is working for me, but my Customer has a requirement pretty different to the default behavior. I'm now very pressed to perform this changes ASAP.
The grid has a checkbox column and multiselection is enabled. The user can select a row only through the checkboxes. For the sake of brevity, I'll copy here the settings.
<SfGrid #ref="Grid" DataSource="Coberturas" Width="100%" EnablePersistence="true">
<GridSelectionSettings Type="SelectionType.Multiple" CheckboxMode="CheckboxSelectionType.Default" CheckboxOnly="true"></GridSelectionSettings>
<GridEditSettings AllowAdding="false" AllowDeleting="false" AllowEditing="true" AllowEditOnDblClick="false" AllowNextRowEdit="false"></GridEditSettings>
It has no toolbar. You can't add rows, nor deleting them. EnablePersistence is needed for reasons out of this question. There is a Primary Key column, but it is hidden (Visible is false). About the rest of the columns, they are text columns.
The customer has asked to change the default behavior in the following way:
When the user clicks a checkbox, the row must both select and open
for editing.
After changing values, the edition boxes must remain
open, even if the user press Enter or clicks another row.
If the user clicks another row, this new row must both select and open for
editing. Even if it's not possible to kept the previous row with the
boxes open (I'm in doubt about if this is possible in the Syncfusion
grid), the previous selection must be kept. All selections must not
be lost, even if the user confirms the edition or moves to another
row.
Illustrative image of the requirements
I'm pretty new to Syncfusion controls and I have no idea how to perform this requirement. I suppose I must create handlers for some Grid Events (maybe RowSelected or OnRecordClick?) but I also may have to interrupt the default Selection and Editing behavior and I don't know how to do this. Because the pressure I have, any idea would be highly appreciated.

You can achieve this requirement by using the RowSelected and OnActionComplete events of Grid. Call the StartEdit method in RowSelected event handler to enable edit in a single click. And in the OnActionComplete event handler based on the RequestType as BeginEdit you can select the required rows based on the stored selected rows indexes from RowSelected event handler.
Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp-614805550
Please refer the codes below,
<GridEvents RowSelected="RowSelected" OnActionComplete="OnActionComplete" TValue="Order"></GridEvents>
public List<double> SelectIndexes = new List<double>();
SfGrid<Order> Grid;
public bool flag { get; set; } = true;
public async Task RowSelected(RowSelectEventArgs<Order> args)
{
if (flag)
{
await Grid.StartEdit();
SelectIndexes.Add(args.RowIndex);
}
flag = true;
}
public async Task OnActionComplete(ActionEventArgs<Order> args)
{
if (args.RequestType.Equals(Action.BeginEdit) && SelectIndexes.Count != 0)
{
flag = false;
await Grid.SelectRows(SelectIndexes);
}
}
References :
https://blazor.syncfusion.com/documentation/datagrid/events/#onactioncomplete
https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_StartEdit
https://blazor.syncfusion.com/documentation/datagrid/editing/#event-trace-while-editing

Related

My method only works when called from one particular area of my application [duplicate]

I have tried to get an answer to this but so far no help has been able to do what I want it to.
I have this piece of code, which is meant to look at the selected row and output it's columns into the corresponding text boxes.
private void DataGridView01_SelectionChanged(object sender, EventArgs e)
{
if (DataGridView01.SelectedRows.Count > 0)
{
personIDTextBox.Text = DataGridView01.SelectedRows[0].Cells[0].Value.ToString();
comboBox1.Text = DataGridView01.SelectedRows[0].Cells[1].Value.ToString();
Txt_FirstName.Text = DataGridView01.SelectedRows[0].Cells[2].Value.ToString();
mIDDLENAMETextBox.Text = DataGridView01.SelectedRows[0].Cells[3].Value.ToString();
sURNAMETextBox.Text = DataGridView01.SelectedRows[0].Cells[4].Value.ToString();
cITYTextBox.Text = DataGridView01.SelectedRows[0].Cells[5].Value.ToString();
eMAILTextBox.Text = DataGridView01.SelectedRows[0].Cells[6].Value.ToString();
}
}
When I launch the program, I get no errors but it doesn't output the data into the textbox. Anyone know what I am doing wrong?
HOOKING UP EVENTS:
It is the most basic thing you need to learn to code in VS. In short it means that the event name, here DataGridView01_SelectionChanged is connected to the event. To do so one can either use code or one inserts it into the correct slot of the events pane of the property tab. Select the DataGridView, open the events pane (the one with the flash) and locate the SelectionChanged event! Here insert the name of the event and you are done.
(I only have the German versions of VS installed..)
The result is reflected in the form_designer.cs file and it is the same thing (in reverse) as double clicking that spot and then filling in the generated code stub..
Controls have many events; one is the default event and this can be generated by double clicking the control itself in the designer. But eventually you will need all 3 ways to generate and hook up the events, (as well as sometimes removing them.)
I use a slightly different approach when trying to get data from a datagridview.
Try doing personIDTextBox.Text = DataGridView01.SelectedCells[0].Value.ToString();
but instead of the event being on selection change, switch to CellClick and change the property of the the datagridview row selection property to full row select. after that you can change the SelectedCell[0] number to match whichever cell you want
If you want to display the datagridview selected rows into corresponding textboxes, fine the below steps ,
Step 1:
1. Change the DataGridView Selection mode to FullRowSelect in Datagridview property.
2. Create the cell click event in Data grid view using property.
enter image description here
3. Write the below code and test it, It may helpful
private void DataGridView01_CellClick(object sender,DataGridViewCellEventArgs e)
{
if (DataGridView01.Rows.Count > -1)
{
PersonIdTextBox.Text=DataGridView01.Rows[e.RowIndex].Cells[0].Value.ToString();
comboBox1.Text = DataGridView01.Rows[e.RowIndex].Cells[1].Value.ToString();
Txt_FirstName.Text = DataGridView01.Rows[e.RowIndex].Cells[2].Value.ToString();
mIDDLENAMETextBox.Text = DataGridView01.Rows[e.RowIndex].Cells[3].Value.ToString();
sURNAMETextBox.Text = DataGridView01.Rows[e.RowIndex].Cells[4].Value.ToString();
cITYTextBox.Text = DataGridView01.Rows[e.RowIndex].Cells[5].Value.ToString();
eMAILTextBox.Text = DataGridView01.Rows[e.RowIndex].Cells[6].Value.ToString();
}
}

Copy DataGridView values to TextBox

I have tried to get an answer to this but so far no help has been able to do what I want it to.
I have this piece of code, which is meant to look at the selected row and output it's columns into the corresponding text boxes.
private void DataGridView01_SelectionChanged(object sender, EventArgs e)
{
if (DataGridView01.SelectedRows.Count > 0)
{
personIDTextBox.Text = DataGridView01.SelectedRows[0].Cells[0].Value.ToString();
comboBox1.Text = DataGridView01.SelectedRows[0].Cells[1].Value.ToString();
Txt_FirstName.Text = DataGridView01.SelectedRows[0].Cells[2].Value.ToString();
mIDDLENAMETextBox.Text = DataGridView01.SelectedRows[0].Cells[3].Value.ToString();
sURNAMETextBox.Text = DataGridView01.SelectedRows[0].Cells[4].Value.ToString();
cITYTextBox.Text = DataGridView01.SelectedRows[0].Cells[5].Value.ToString();
eMAILTextBox.Text = DataGridView01.SelectedRows[0].Cells[6].Value.ToString();
}
}
When I launch the program, I get no errors but it doesn't output the data into the textbox. Anyone know what I am doing wrong?
HOOKING UP EVENTS:
It is the most basic thing you need to learn to code in VS. In short it means that the event name, here DataGridView01_SelectionChanged is connected to the event. To do so one can either use code or one inserts it into the correct slot of the events pane of the property tab. Select the DataGridView, open the events pane (the one with the flash) and locate the SelectionChanged event! Here insert the name of the event and you are done.
(I only have the German versions of VS installed..)
The result is reflected in the form_designer.cs file and it is the same thing (in reverse) as double clicking that spot and then filling in the generated code stub..
Controls have many events; one is the default event and this can be generated by double clicking the control itself in the designer. But eventually you will need all 3 ways to generate and hook up the events, (as well as sometimes removing them.)
I use a slightly different approach when trying to get data from a datagridview.
Try doing personIDTextBox.Text = DataGridView01.SelectedCells[0].Value.ToString();
but instead of the event being on selection change, switch to CellClick and change the property of the the datagridview row selection property to full row select. after that you can change the SelectedCell[0] number to match whichever cell you want
If you want to display the datagridview selected rows into corresponding textboxes, fine the below steps ,
Step 1:
1. Change the DataGridView Selection mode to FullRowSelect in Datagridview property.
2. Create the cell click event in Data grid view using property.
enter image description here
3. Write the below code and test it, It may helpful
private void DataGridView01_CellClick(object sender,DataGridViewCellEventArgs e)
{
if (DataGridView01.Rows.Count > -1)
{
PersonIdTextBox.Text=DataGridView01.Rows[e.RowIndex].Cells[0].Value.ToString();
comboBox1.Text = DataGridView01.Rows[e.RowIndex].Cells[1].Value.ToString();
Txt_FirstName.Text = DataGridView01.Rows[e.RowIndex].Cells[2].Value.ToString();
mIDDLENAMETextBox.Text = DataGridView01.Rows[e.RowIndex].Cells[3].Value.ToString();
sURNAMETextBox.Text = DataGridView01.Rows[e.RowIndex].Cells[4].Value.ToString();
cITYTextBox.Text = DataGridView01.Rows[e.RowIndex].Cells[5].Value.ToString();
eMAILTextBox.Text = DataGridView01.Rows[e.RowIndex].Cells[6].Value.ToString();
}
}

WPF MVVM Perform different actions based on focused item

I’m developing a WPF application in MVVM Patern. The application has a command bar and buttons for Save and Delete records.
The application also has a Master Detail form. It’s a User control and a DataGrid.
Master block : Customer Order
Detail block: Customer Order Lines
(one to many relationship).
Problem:
When clicking a button in command bar, different actions need to be performed depending on the focused item.
For an example if I click the Delete button
It should delete the records only in the DataGrid row, when DataGrid has
focus and row(s) selected.
E.g. DeleteRows() Method should be called.
It should delete the entire record if the master block has focus and not datagrid focused.
E.g. DeleteRecord() Method should be called.
As far as I know I can achieve this using Keyboard focus and Logical focus manager.
But I was unable to find out a proper solution. I should consider that, when clicking the delete button I should ignore the focus of the Delete button.
Please help me to overcome this issue with a sample code.
Since you're using the MVVM pattern, I assume that your buttons in the command bar have corresponding ICommands in the view model.
You can bind your DataGrid's SelectedItem property to a view model property (of course, with a two-way binding) and make that decision according to this property value. If it is null, so there's no item currently selected in the DataGrid, and you can delete the whole record. If it is set to an instance, then a row is selected in the DataGrid, and you can delete only one row.
If you need to exactly know which was the last focused element, you can use the Keyboard.PreviewLostKeyboardFocus attached event in your code behind. Or even better, create your own Behavior with a dependency propery that you can bind to your view model.
enum LastFocusedEntityType { None, Record, Row }
class LastFocusedEntityTrackingBehavior : Behavior<UIElement>
{
public static readonly LastFocusedEntityProperty = DependencyProperty.Register(
"LastFocusedEntity",
typeof(LastFocusedEntityType),
typeof(LastFocusedEntityTrackingBehavior),
LastFocusedEntityType.None);
public LastFocusedEntityType LastFocusedEntity
{
get { return (LastFocusedEntityType)this.GetValue(LastFocusedEntityProperty); }
set { this.Setvalue(LastFocusedEntityProperty, value); }
}
protected override void OnAttached()
{
Keyboard.AddPreviewLostKeyboardFocusHandler(this.AssociatedObject, this.PreviewLostKeyboardFocusHandler);
}
private void PreviewLostKeyboardFocusHandler(object sender, KeyboardFocusChangedEventArgs e)
{
if (e.OldFocus is DataGrid)
{
this.LastFocusedEntity = LastFocusedEntityType.Row;
}
else
{
this.LastFocusedEntity = LastFocusedEntityType.Record;
}
}
}
Then you can apply this behavior to your master block container:
<UserControl>
<i:Interaction.Behaviors>
<local:LastFocusedEntityTrackingBehavior LastFocusedEntity="{Binding LastFocusedEntity, Mode=OneWayToSource}"/>
</i:Interaction.Behaviors>
</UserControl>
In your view model, your ICommand's Execute() method should then look at the LastFocusedEntity property value and decide what to do next.
Note: I didn't check this code whether it compiles.

Keydown event being swallowed/not actioned in DataGridView control

I have a problem with some code I developed based on the article DataGridView keydown event not working in C#.
I wanted to allow the user to add a row to a Dataviewgrid control, but found that by enabling AllowUserToAddRows this caused an additional row to be shown as soon as the first character was typed into the new cell in the new row. This would have been confusing to my poor user, so to prevent this, I used the code from above article to immediately disable AllowUserToAddRows at every keystroke (although would have preferred to only do it after the first char was typed). However, this seems to swallow the 1st char typed, i,.e. it is not passed onto the base class for processing. Here's the full code:
public sealed class XDataGridView : DataGridView
{
private bool _singleUpdateOnly = true;
public bool SingleUpdateOnly
{
get { return _singleUpdateOnly; }
set { _singleUpdateOnly = value; }
}
[Description("Disallows user adding rows as soon as a key is struck to ensure no blank row at bottom of grid")]
protected override bool ProcessCmdKey(ref System.Windows.Forms.Message msg, System.Windows.Forms.Keys keyData)
{
if (SingleUpdateOnly)
{
AllowUserToAddRows = false;
}
return base.ProcessCmdKey(ref msg, keyData);
}
}
Why is the 1st char I type swallowed? How can I prevent this from happening? Is there a better way than what I have coded?
I've had very little response to this question on this forum and others. It must be a very difficult problem, or I'm simply expecting too much from the DataGridView control.
After many hours of trial and error, I have settled on a solution which does not require subclassing. The solution is not exactly what I wanted, i.e. to prevent another another row from being appended to the bottom of the grid once the user begins typing into the newly added row, but it comes close. I use the CellLeave event to turn off AllowUserToAddRows. When the user presses Tab or Enter to enter the data into the 1st cell, this effectively removes the newly added row from the grid leaving the user in the next cell of the newly added (last) row of the grid (without an empty row underneath). Not elegant, but at least mostly functional. Here's the code:
private void uxContactEmailAddressesGrd_CellLeave(object sender, DataGridViewCellEventArgs e)
{
uxContactEmailAddressesGrd.AllowUserToAddRows = false;
}
Maybe one day someone else will come across this problem and find a solution more elegant than mine. That'd be great. Make sure you post your solution to this site for others to use.

ASP.NET - How to check if one or more field values have been changed

I have a web form where I register a new employee. There're 3 parts in the form: Personal info, Address info, Special Status. But there's only one button for the whole form. When I submit the form all the information is updated to the database. So three Update statements are executed against the database. The methods are UpdatePersonalInfo, UpdateAddressInfo and UpdateSpStatus. Is there a way to check if there's been a change in any field in the certain part and run update method only if it's true. So something like this:
if (There's been any change to the personal data of the employee)
{
UpdatePersonalInfo;
}
if (There's been any change to the address information of the employee)
{
UpdateAddressInfo;
}
Sure I know, I can save all the previous values in a session object in PageLoad and then compare them one by one before running the method. But I thought maybe there's a magic way of doing this more easily.
Not sure that this is a better solution than any of the alternatives you already mentioned, but you could create a default handler to attach to the TextChanged, SelectedIndexChanged, etc events of your controls to keep track of which ones have changed.
List ChangedControls = new List(Of, String);
private void ChangedValue(object sender, System.EventArgs e) {
WebControl cntrl = (WebControl) sender;
ChangedControls.Add(cntrl.ID);
}
Then on your button click scour the ChangedControls list for the relevant controls.

Categories

Resources