1. Home
  2. Forum
  3. Blazor
  4. Grid e-spinner does not dispose or finish after a row addition

Grid e-spinner does not dispose or finish after a row addition

Hello,

Possibly related to the following:

I am using the EJS Grid as follows:

 <div class="col-lg-12 control-section">
        <div class="content-wrapper">
            <div class="row">
                <EjsGrid ID="@OrganizerGridDataID" @ref="Grid" DataSource="@GridData" AllowSelection="true" Toolbar="@Toolbar" AllowSorting="true" AllowPaging="true">
                    <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"></GridEditSettings>
                    <GridEvents OnActionBegin="GridActionBegin" OnActionComplete="GridActionComplete" TValue="OrganizerModel"></GridEvents>
                    <GridColumns>
                        <GridColumn Field=@nameof(OrganizerModel.Id) IsPrimaryKey="true" TextAlign="TextAlign.Right" Width=50 AllowEditing="false"></GridColumn>
                        <GridColumn Field=@nameof(OrganizerModel.DateDue) HeaderText="Date Due" EditType="EditType.DatePickerEdit" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width=90></GridColumn>
                        <GridColumn Field=@nameof(OrganizerModel.Topic) HeaderText="Topic" ValidationRules="@(new { required = true, maxLength=100 })" Width=75></GridColumn>
                        <GridColumn Field=@nameof(OrganizerModel.Summary) HeaderText="Summary" ValidationRules="@(new { required = true, maxLength=200 })" Width=100></GridColumn>
                        <GridColumn Field=@nameof(OrganizerModel.OrgDescription) HeaderText="Description" ValidationRules="@(new { required = true, maxLength=500 })" Width=400></GridColumn>
                        <GridColumn HeaderText="Manage Records" Width=70>
                            <GridCommandColumns>
                                <GridCommandColumn Type="CommandButtonType.Edit" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-edit", CssClass = "e-flat" })"></GridCommandColumn>
                                <GridCommandColumn Type="CommandButtonType.Delete" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-delete", CssClass = "e-flat" })"></GridCommandColumn>
                                <GridCommandColumn Type="CommandButtonType.Save" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-save", CssClass = "e-flat" })"></GridCommandColumn>
                                <GridCommandColumn Type="CommandButtonType.Cancel" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-cancel-icon", CssClass = "e-flat" })"></GridCommandColumn>
                            </GridCommandColumns>
                        </GridColumn>
                    </GridColumns>
                </EjsGrid>
            </div>
        </div>
    </div>

The GridActionBegin does successfully put a new record into the DB.
   public async void GridActionBegin(ActionEventArgs<OrganizerModel> args)
    {
        if (args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.BeginEdit)
        {
            rowIndex = args.RowIndex;
            await Grid.SelectRow(rowIndex);
        }

        if (args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Save)
        {

            var newData = args.Data;

            if (newData.Id == null)// new record that does not yet have an identity value
            {
                await db.InsertOrganizerItem(newData);

            }
...

The GridActionComplete does not seem to dispose the spinner:
   public async void GridActionComplete(ActionEventArgs<OrganizerModel> args)
    {
        double rowIndex = 0;
        if (args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.BeginEdit)
        {
            rowIndex = args.RowIndex;
        }

        if (args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Save)
        {
            var newData = args.Data;
            await Grid.UpdateRow(rowIndex, newData);
            GridData = await db.GetOrganizerModel(); // this does a fresh get of all of the records... heavy weight but ok for now.
            StateHasChanged(); //gleemed from other syncfusion examples.
            Grid.Refresh(); // attempting to re-render the grid but with the new data.
        }
...

The spinner does not dispose.
Further, a column sort will sort the rows correctly but again, the spinner does not dispose.
What am I missing?

Thanks for your help!


7 Replies
RS Renjith Singh Rajendran Syncfusion Team March 3, 2020 02:25 PM UTC

Hi Johnathan, 

Thanks for contacting Syncfusion support. 

Based on your requirement, we suggest you to use the “Custom way of binding” data to Grid. By default Grid will handle the editing and update actions in Grid. But from your codes, we could see that you are updating the Grid and db, manually without using Grid’s default update handling. At these cases “Custom way of binding” is the recommended way. 
 
Please refer the below documentation link for more details, 
 
Query : Possibly related to the following:https://www.syncfusion.com/forums/151973/grid-frozen-when-using-an-ejsprogressbutton-in-a-custom-toolbar-control 
Issue reported in the mentioned forum will occur if and only if you contain a EjsProgressButton component in Grid. We suspect that the reported problem might have occurred because of some failure in the updating of the db and Grid while the Grid’s default editing action is taking place, as default editing action is not prevented in the Action events by using the “args.Cancel”. So both the simultaneous occurrence of the default action and manual update action might have caused this failure in Grid, thereby showing the spinner. 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


JO Johnathan March 5, 2020 02:04 AM UTC

Thanks Renjith.

I have spent several hours and this is where it has come to:
  1. I prefer to use the default Grid functionality.  However, getting the grids selected row gives null for Grid.GetSelectedRecords().  Hence, I do not know how to get the record to hand off to the db call.
  2. The event,  OnActionBegin does give me what I need from #1 above.  However, other events such as sorting the grid results in a spinner (grid is hung).  So it appears there is an event conflict.
  3. I have tried the linked custom-binding.  Using a mostly copy paste of the documentation, there is an empty row on render (as shown in the documentation).  Further, sort gives the same hung grid spinner as #2 above.
So again I would prefer to use the grids non-custom route.  I am simply needing to get the selected grid row, map it to an object, and do the update/save database call.

The documentation linked CRUD zip file does not appear to have the full functionality -unless I am missing something.
A full example would be most welcome.

Thanks for your help,

Johnathan

RS Renjith Singh Rajendran Syncfusion Team March 5, 2020 11:07 AM UTC

Hi Johnathan, 

We have prepared a sample in Blazor webassembly to perform update/save and sorting actions in a WebApiAdaptor bind Grid. We are attaching the sample for your convenience, please download the sample form the link below, 

 
When using the WebAPI services to bind data to Grid using WebApiAdaptor, then it is a must that you need to handle these actions(search/filter/sort/paging actions) at server side by using the “Request.Query” you get from the request. And you need to handle the CRUD operations with the PUT, POST and Delete methods. In the above attached sample, we have handled the sort, update actions based on our application scenario. You must have to handle these actions in your application based on your application. Please refer the code below, 

[DefaultController.cs] 
 
    public class DefaultController : ControllerBase 
    { 
        public static List<Orders> order = new List<Orders>(); 
        [HttpGet] 
        public async Task<object> Get() 
        { 
            ... 
            var data = order.AsQueryable();             
            var queryString = Request.Query;  
            string sort = queryString["$orderby"];   //based on the sorting query handle the sort action in Grid. 
            ... 
            } 
            if (queryString.Keys.Contains("$inlinecount")) 
            { 
                StringValues Skip; 
                StringValues Take; 
                int skip = (queryString.TryGetValue("$skip", out Skip)) ? Convert.ToInt32(Skip[0]) : 0; 
                int top = (queryString.TryGetValue("$top", out Take)) ? Convert.ToInt32(Take[0]) : data.Count(); 
                var count = data.Count(); 
                return new { Items = data.Skip(skip).Take(top), Count = count }; 
            } 
            else 
            { 
                return data; 
            } 
        } 
        ... 
        [HttpPost] 
        public object Post([FromBody]Orders value) 
        { 
            //Perform your add action here 
            return value; 
        } 
        [HttpPut] 
        public object Put([FromBody]Orders value) 
        { 
            //Perform your update action here 
            return value; 
        } 
        [HttpDelete("{id}")] 
        public void Delete([FromBody]int id) 
        { 
            //Perform your delete action here 
        } 
    } 
} 


If you are still facing difficulties, kindly get back to us with the following details so that we could proceed further based on your exact requirement or problem you are facing. 
  1. Kindly share a simple issue reproducing sample or reproduce the problem with our attached samples and share with us. So that we could validate the problem based on your scenario.
  2. Share the video demo showing the exact problem you are facing.

Regards, 
Renjith Singh Rajendran. 


JO Johnathan April 15, 2020 11:46 PM UTC

Hello,

I hope you are well.

I have updated to the latest syncfusion bits and rewritten the page to use API calls.
The problem persists.

Repro Steps:
1.  load the page (datagrid is propagated with test data).
2.  click on toolbar add
3.  add the required data to the new record.
4.  click on update.

results:
the new record is added to the datagrid list.
the spinner is shown and does not dispose.

I have attached a zip file with the screen recording of the issue and the .razor page.

Please let me know (as I am green to blazor) what the issue is and how to avoid it going forward.

Cheers,

Johnathan

Attachment: ScreenCapture_4162020_11.39.12_AM_7b1faeda.zip

RS Renjith Singh Rajendran Syncfusion Team April 16, 2020 09:34 AM UTC

Hi Johnathan, 

Thanks for your concern. We hope the same for you. 

We suggest you to set the value for the ID property directly as like the below code, instead of using property binding to overcome the problem you are facing. Please set the ID="GridDataID” instead of ID="@GridDataID" to overcome the problem. 

Please use the code below, 

 
   <SfGrid ID="GridDataID" @ref="Grid" DataSource="@GridData" AllowSelection="true" Toolbar="@Toolbar" AllowSorting="true"> 
       ... 
  </SfGrid> 


Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


JO Johnathan April 17, 2020 01:17 AM UTC

Thanks Renjith
That worked!
The follow-up question I have for you is this -  Most of the syncfusion examples (in the documentation) use the property binding "@" instead of the direct property... So when do you use the property binding vs the property? (digging through the Blazor documentation has not been helpful)

To Renjith's boss... give him a raise.  :)

RS Renjith Singh Rajendran Syncfusion Team April 17, 2020 09:48 AM UTC

Hi Johnathan, 

Thanks for your update. 

We would like to inform you that most of the properties can be used for property binding. We suggest you to select the properties for property binding based on your application scenario. 

And if you need to know any details regarding, any specific property or component supported for property binding then please get back to us with those properties or components details. We will assist you based on your requirement.  

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


Loader.
Up arrow icon