Syncfusion Grid Add button does not fire

[ajit goel]

I have the grid update, delete functionality working, however the "add" button does not work(i.e I click the "add" button but the "insert" event is not fired). Would the community have inputs on what I could be doing wrong?

Settings.cshtml:

@Html.AntiForgeryToken()

nsertUrl="/Settings?handler=Insert" updateUrl="/Settings?handler=Update" removeUrl="/Settings?handler=Delete" adaptor="UrlAdaptor" />

Settings.cshtml.cs:

[ValidateAntiForgeryToken]

public class SettingsModel : PageModel

{

public async Task OnPostInsert([FromBody]SyncfusionControlCrudModel syncfusionControlCrudModel)

{

var identityUser = await GetIdentityUserAsync();

var keyword = new Keyword()

{

UserId = identityUser.Id,

Value = syncfusionControlCrudModel.value.Value

};

ApplicationDbContext.Keywords.Add(keyword);

await ApplicationDbContext.SaveChangesAsync();

return new JsonResult(syncfusionControlCrudModel.value);

}

}

[Pavithra Subramaniyam]

Hi ajit, 

 

Thanks for contacting Syncfusion support.  

  

Before validating your query could you please provide the below details that will be helpful for us to provide a better solution as early as possible. 

 

1. Ensure whether you have enabled the adding action through “editSettings.allowAdding” property.
2. Please share the Grid code example.
3. Please share the stack trace if you have any script error while adding.
4. Please bind the “actionFailure” event to the Grid and share the arguments if this event is triggered while adding.

 

Regards, 

Pavithra S. 

[ajit goel]

I now have 2 issues:

Here's a video that I recorded.

https://www.loom.com/share/8be28c466384426695223bf6f36ca8b4

This shows 

a. nothing happening when the Add button is clicked.

b. server throwing a 404 server error when the Delete button is clicked. The server endpoint is getting called but only one of the composite keys is being passed to the server. 

Settings.cshtml:

<ejs-grid id="GridNewKeywords" allowPaging="true" load="onLoad" actionFailure="actionFailure" toolbar="@( new List<object>() {" Add","Edit","Delete","Update","Cancel"})">

                                            <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true" />

                                            <e-data-manager url="/Settings?handler=DataSource" insertUrl="/Settings?handler=Insert" updateUrl="/Settings?handler=Update" removeUrl="/Settings?handler=Delete" adaptor="UrlAdaptor" />

                                            <e-grid-pageSettings pageCount="5" pageSize="5" />

                                            <e-grid-columns>

                                                <e-grid-column field="KeywordId" headerText="Id" isPrimaryKey="true" width="0" allowEditing="false" />

                                                <e-grid-column field="UserId" headerText="UserId" isPrimaryKey="true" width="0" allowEditing="false" />

                                                <e-grid-column field="Value" headerText="Keyword" validationRules="@(new { required=true})" />

                                            </e-grid-columns>

                                        </ejs-grid>

<script>

function onLoad()

{

    this.dataSource.dataSource.headers =[{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }];

}

function actionFailure(args)

{

    var span = document.createElement('span');

    this.element.parentNode.insertBefore(span, this.element);

    span.style.color = '#FF0000'

    span.innerHTML = 'Server exception: 404 Not found';

}

</script>

Settings.cshtml.cs:

[ValidateAntiForgeryToken]

public class SettingsModel : PageModel

{

public async Task<JsonResult> OnPostInsert([FromBody]SyncfusionControlCrudModel<Keyword> syncfusionControlCrudModel)

    {

      var identityUser = await GetIdentityUserAsync();

      var keyword = new Keyword()

      {

        UserId = identityUser.Id,

        Value = syncfusionControlCrudModel.value.Value

      };

      ApplicationDbContext.Keywords.Add(keyword);

      await ApplicationDbContext.SaveChangesAsync();

      return new JsonResult(syncfusionControlCrudModel.value);

    }

}

public class SyncfusionControlCrudModel<T> where T : class

  {

    public string action { get; set; }

    public string table { get; set; }

    public string keyColumn { get; set; }

    public object key { get; set; }

    public T value { get; set; }

    public List<T> added { get; set; }

    public List<T> changed { get; set; }

    public List<T> deleted { get; set; }

    public IDictionary<string, object> @params { get; set; }

  }

[ajit goel]

With respect to the delete button not working, I have made changes to the code to based on https://www.syncfusion.com/forums/133663/delete-using-composite-key. I am however getting an error, when trying to refer to args.model.dataSource(please see attachment). How can I refer to the grid's datasource? 

What am I missing?

Settings.cshtml:

 <ejs-grid id="GridNewKeywords" allowPaging="true" load="onLoad" actionFailure="actionFailure" actionbegin="actionbegin" toolbar="@( new List<object>() {" Add","Edit","Delete","Update","Cancel"})">

                                            <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true" />

                                            <e-data-manager url="/Settings?handler=DataSource" insertUrl="/Settings?handler=Insert" updateUrl="/Settings?handler=Update" removeUrl="/Settings?handler=Delete" adaptor="UrlAdaptor" />

                                            <e-grid-pageSettings pageCount="5" pageSize="5" />

                                            <e-grid-columns>

                                                <e-grid-column field="KeywordId" headerText="Id" isPrimaryKey="true" width="0" allowEditing="false" />

                                                <e-grid-column field="UserId" headerText="UserId" isPrimaryKey="true" width="0" allowEditing="false" />

                                                <e-grid-column field="Value" headerText="Keyword" validationRules="@(new { required=true})" />

                                            </e-grid-columns>

                                        </ejs-grid>

<script>

function actionbegin(args)

{ 

    console.log(args);

    if (args.requestType == 'delete') { 

        args.model.dataSource.dataSource.headers = []; 

        args.model.dataSource.dataSource.headers.push({ "KeywordId": args.data.KeywordId, "UserId": args.data.UserId }); 

    } 

} 

</script>

Settings.cshtml.cs:

 public async Task<JsonResult> OnPostDelete([FromBody]SyncfusionControlCrudModel<Keyword> syncfusionControlCrudModel)

    {

      var keywordId = int.Parse(Request.Headers["KeywordId"]);

      var userId = Request.Headers["UserId"];

      var keywords = ApplicationDbContext.Keywords.Where(x => x.KeywordId == keywordId && x.UserId == userId);

      if (keywords.Count() > 0)

      {

        ApplicationDbContext.Keywords.Remove(keywords.First());

        await ApplicationDbContext.SaveChangesAsync();

      }

      return new JsonResult(syncfusionControlCrudModel);

    }   

[ajit goel]

wrt to the add button not working, you can check by going to https://simplerproductsscrubber.azurewebsites.net/Settings url, logging in with 

[email protected]

Rishi@1974

and then clicking on settings link on the top menu, and then going to the "keywords" grid(and clicking the add button). 

[Pavithra Subramaniyam]

Hi Ajit, 

 

Thanks for sharing the details. 

 

Query: nothing happening when the Add button is clicked. 

 

We have checked your code and found that You have added a whitespace before the “Add”(like “ Add”) in toolbar items which is the cause of the reported behavior. So It acts as a custom toolbar item that’s why it does not perform any action(For custom toolbar item, you need to handle the corresponding action in toolbarClick event). 

 

[code example] 

<ejs-grid id="GridNewKeywords" allowPaging="true" load="onLoad" actionFailure="actionFailure" 

          toolbar="@( new List<object>() {" Add","Edit","Delete","Update","Cancel"})">// you need to write like “Add” 

 

To resolve this, please remove the whitespace before the add in toolbar object. 

 

Query: With respect to the delete button not working, I have made changes to the code to based on https://www.syncfusion.com/forums/133663/delete-using-composite-key. I am however getting an error, when trying to refer to args.model.dataSource(please see attachment). How can I refer to the grid's datasource?  

 

We have validated your query and you have handled the actionBegin event and access dataSource properties like EJ1 Grid. You need to handle the above actions in EJ2. Please find the below code example for your reference. 

 

[code example] 

 

<ejs-grid id="Grid" allowPaging="true" load="onLoad" actionBegin="begin" allowFiltering="true" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel","Search" })"> 

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings> 

    <e-data-manager url="/Index?handler=DataSource" insertUrl="/Index?handler=Insert" updateUrl="/Index?handler=Update" removeUrl="/Index?handler=Delete"  adaptor="UrlAdaptor"></e-data-manager> 

    <e-grid-columns> 

        ... 

   </e-grid-columns> 

</ejs-grid> 

<script> 

 

    function onLoad() { 

        this.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }]; 

    } 

 

    function begin(args) { 

        var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0] 

        console.log(args); 

        if (args.requestType == 'delete') { 

            grid.dataSource.dataSource.headers = []; 

            grid.dataSource.dataSource.headers.push({ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val(), "KeywordId": args.data[0].EmployeeID, "UserId": args.data[0].Freight }); 

        } 

    } 

</script> 

 

 

 

Please get back to us if you need further assistance. 

 

Regards, 

Pavithra S.