We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Syncfusion Grid Add button does not fire

Thread ID:

Created:

Updated:

Platform:

Replies:

144570 May 13,2019 04:54 AM UTC May 14,2019 11:51 AM UTC ASP.NET Core - EJ 2 5
loading
Tags: DataGrid
ajit goel
Asked On May 13, 2019 04:54 AM UTC



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 [Syncfusion]
Replied On May 13, 2019 06:00 AM UTC

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
Replied On May 13, 2019 10:51 PM UTC

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
Replied On May 14, 2019 02:57 AM UTC

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
Replied On May 14, 2019 03:26 AM UTC

wrt to the add button not working, you can check by going to https://simplerproductsscrubber.azurewebsites.net/Settings url, logging in with 
ajitgoel@gmail.com
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 [Syncfusion]
Replied On May 14, 2019 11:51 AM UTC

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. 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon