Load Data on Button Click

[Catalin Radoi]

OK so I have this grid in the cshtml: 

 @(Html.EJ().Grid<object>("ResourcesGrid")
              //.Datasource(ds => ds.URL(Url.Action("ResourcesDataSource", "Resource", new { requestSource = "home" })).Adaptor(AdaptorType.UrlAdaptor))
              .AllowSorting()
              .AllowFiltering()
              .AllowPaging()
              .PageSettings(p => p.PageSize(25))
              .AllowResizeToFit()
              .IsResponsive()
              .ClientSideEvents(eve => eve.DataBound("dataBound").ActionBegin("actionBegin").RowSelected("rowSelected")))

Notice I have commented out the .Datasource part, so that the grid won't load its content at page load.

This is what I have in the Controller:

  public ActionResult ResourcesDataSource(ResourcesDataManager dm, string requestSource)
        {
             // .............Here I use the dm and get the data from the DB ..........................

            return this.Json(new { result = data, count }, JsonRequestBehavior.AllowGet);
        }

What I need is to load the grid's content on button click:

<script>
    $("#cutareButon").click(function() {
       // ?? LOAD GRID Content 
      
    });

</script>

[Seeni Sakthi Kumar Seeni Raj]

Hi Catalin,  

Thanks for contacting Syncfusion Support.  

Using the dataSource method of the Grid, data for the Grid can be updated as follows.  

@(Html.EJ().Grid<object>("ResourcesGrid") 

        //.Datasource(ds => ds.URL(Url.Action("ResourcesDataSource", "Resource", new { requestSource = "home" })).Adaptor(AdaptorType.UrlAdaptor)) 

              .AllowSorting() 

              .AllowFiltering() 

              .AllowPaging() 

              .PageSettings(p => p.PageSize(25)) 

              .AllowResizeToFit() 

              .IsResponsive() 

              .ClientSideEvents(eve => eve.DataBound("dataBound").ActionBegin("actionBegin").RowSelected("rowSelected"))) 

 

 

<script> 

 

    $("#cutareButon").click(function () { 

          

        $("#ResourcesGrid").ejGrid("dataSource", new ej.DataManager({ 

            url: "Resource/ResourcesDataSource", 

            adaptor: new ej.UrlAdaptor() 

        })) 

    }); 

 

</script> 

API Reference: https://help.syncfusion.com/api/js/ejgrid#methods:datasource 

Regards,  

Seeni Sakthi Kumar S. 

[Catalin Radoi]

Unfortunately, it doesn't work.

It gives me this error: 

jquery-3.3.1.js:3827 Uncaught ejGrid: methods/properties can be accessed only after plugin creation
Error: ejGrid: methods/properties can be accessed only after plugin creation
    at t.throwError (http://localhost:16253/Scripts/ej/web/ej.web.all.min.js:10:30074)
    at jQuery.fn.init.n.fn.(anonymous function) [as ejGrid] (http://localhost:16253/Scripts/ej/web/ej.web.all.min.js:10:23796)
    at HTMLDocument.<anonymous> (http://localhost:16253/Scripts/Home/index.js:3:26)
    at mightThrow (http://localhost:16253/Scripts/jquery-3.3.1.js:3534:29)
    at process (http://localhost:16253/Scripts/jquery-3.3.1.js:3602:12)

[Seeni Sakthi Kumar Seeni Raj]

HI Catalin, 

 

The reported problem will occur only if the ejGrid is rendered before calling its functionality. So, we suggest to ensure whether the Grid has been rendered before the clicking the button. Please share the following details to analyze the problem at our end.  

 

1. View of the Grid along with the custom script used for modifications in the Grid
2. Master page of the Grid
3. Page source of the Grid view

 

 

 

Regards,  

Seeni Sakthi Kumar S.