URLadaptor change to datasource in ViewBag on a click of a button.

[John Stephen Mangam]

Hi,

Could you please provide me a sample where the grid has a URL adoptor by default, but on a click of a button 

loads datasource from ViewBag? 

[Thavasianand Sankaranarayanan]

Hi John, 

Greetings from Syncfusion support. 

We can achieve your requirement using the dataSource property of Grid. 

Refer the below code example. 

[index.cshtml] 

<ejs-button id="dataSourceUpdate" content="UpdateDataSource"></ejs-button> 

 

 

<ejs-grid id="Grid" allowPaging="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 

    <e-data-manager url="/Home/GridDatasource" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Delete" adaptor="UrlAdaptor"></e-data-manager> 

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

    <e-grid-pagesettings pageSize="7"></e-grid-pagesettings> 

    <e-grid-columns> 

 

         ----- 

 

    </e-grid-columns> 

</ejs-grid> 

 

 

 <script> 

 

     document.getElementById("dataSourceUpdate").addEventListener('click', function (args) { 

         var gridObj = document.getElementById("Grid").ej2_instances[0]; 

         gridObj.dataSource = @Html.Raw(Json.Serialize(ViewBag.datasource)); 

     }); 

 

 </script> 

We have prepared a simple sample and it can be downloadable from the below location. 

Sample: http://www.syncfusion.com/downloads/support/forum/144021/ze/TestSampleMcoreErr-2085663290_(4)-916986890.zip 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid#datasource 

Regards, 

Thavasianand S. 

[John Stephen Mangam]

Hi Thavasianand,

Thank you for the prompt response. Could you please let me know how I could even change the URL to load the ViewBag?

Thank you. 

John

[Thavasianand Sankaranarayanan]

Hi John, 

Thanks for your update. 

In the previous update we have initially bind a remote data through the UrlAdaptor and in a button click we have bind a local data (viewBag data) to the Grid. 

Also We suspect that you wants to get the remote data but needs to do the grid actions in client side itself. So, we suggest you to enable the offline property in the data Manager class. We have discuss about the query in the following documentation.  

Link: https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/?no-cache=1#offline-mode 

If the above solutions is not accomplish your requirement then please provide some more detail regarding your requirement for providing better solution from our end. 

Regards, 

Thavasianand S. 

[John Stephen Mangam]

Hi Thavasianand,

Earlier it used to work perfectly.

When I add offline="true" I get the error:

Failed to load resource: the server responded with a status of 400 ()

Create:1 Uncaught (in promise) Object

Promise.then (async)

e @ manager.js:77

(anonymous) @ Create:9864

 <e-data-manager url="@Url.Action("GetFiles", "Role")" adaptor="UrlAdaptor" offline="true"></e-data-manager>

 [HttpPost]

        [ValidateAntiForgeryToken]

        public IActionResult ...

   

[John Stephen Mangam]

Also, I get the error:

ej2.min.js:1 Uncaught TypeError: e.dataSource.json.slice is not a function

    at t.processQuery (ej2.min.js:1)

    at e.executeLocal (ej2.min.js:1)

    at ej2.min.js:1

[Thavasianand Sankaranarayanan]

Hi John, 

 

Thanks for your update. 

 

We have validated the reported issue in our end. We suspect that you haven’t handle the RequiresCounts in server end. When we defined offline as true, then we need to return complete dataSource from source end. So, we suggest you to return the complete dataSource from source end based on the RequiresCounts as we given in the below code example. 

 

public IActionResult UrlDatasource([FromBody]DataManagerRequest dm) 

        { 

            System.Collections.IEnumerable data = OrdersDetails.GetAllRecords(); 

 

            DataOperations operation = new DataOperations(); 

             .    .     .    .            

            return dm.RequiresCounts ? Json(new { result = data, count = count }) : Json(data) ; 

        } 

 

Regards, 

Thavasianand S. 

[John Stephen Mangam]

Thank you, that works. However I had to comment [ValidateAntiForgeryToken]

Please let me know how I could fix this issue.

Thank you.

[Thavasianand Sankaranarayanan]

Hi John, 

Thanks for your appreciation. 

We have already discuss about using anti-forgery token using in Grid in the following documentation. 

Link: https://ej2.syncfusion.com/aspnetcore/documentation/grid/how-to/perform-crud-operation-using-anti-forgery-token/ 

Note: When we using anti-forgery token then the CRUD operations are performed in server end. But in your case you have set offline as true and CRUD operations are performed in client side only. So, please ensure on this.   

Regards, 

Thavasianand S. 

[John Stephen Mangam]

Thank you for the response.

In this offline scenario, could you please let me know how I could remove a single item from the datasource?

Thank you.

[Dhivya Rajendran]

Hi John, 

Thanks for your update. 

By default, while using offline mode then it fetch all data from server at initial rendering of Grid and then perform grid actions(filtering, editing etc.,) in client side. You can enable allowDeleting property in Grid to remove the selected record from Grid. 

Demo Sample : https://ej2.syncfusion.com/aspnetcore/Grid/InlineEditing#/material 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/?no-cache=1#offline-mode 

If we misunderstood your query then share more details(programmatically remove record from data source), it will helpful for us to validate and provide a better solution as soon as possible. 

Regards, 

R.Dhivya

[John Stephen Mangam]

Hi Dhivya,

Please let me know how i can delete a record programmatically using a jacascript function in offline mode.

[Thavasianand Sankaranarayanan]

Hi John, 

Thanks for your update. 

We can delete the row/record in Grid using the deleteRow, deleteRecord method of Grid.  

Refer the below documentation. 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid#deleterecord 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid#deleterow 

Regards, 

Thavasianand S.