Ajit Goel
Ajit Goel

Reputation: 4418

Syncfusion Grid Add button does not fire

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()
<ejs-grid id="GridNewKeywords" allowPaging="true" load="onLoad" 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() }];
}
</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);
  }
}

Upvotes: 0

Views: 1536

Answers (1)

Pavi
Pavi

Reputation: 101

In your Grid You have added a whitespace before the “Add” option (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).

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

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

Documentation

Upvotes: 1

Related Questions