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

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

Thread ID:

Created:

Updated:

Platform:

Replies:

144021 Apr 15,2019 09:52 AM UTC Apr 22,2019 07:24 AM UTC ASP.NET Core - EJ 2 12
loading
Tags: DataGrid
John Stephen Mangam
Asked On April 15, 2019 09:52 AM UTC

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 [Syncfusion]
Replied On April 15, 2019 10:23 AM UTC

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. 



Regards, 
Thavasianand S. 


John Stephen Mangam
Replied On April 15, 2019 10:26 AM UTC

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 [Syncfusion]
Replied On April 15, 2019 11:56 AM UTC

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.  


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
Replied On April 15, 2019 02:56 PM UTC

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
Replied On April 15, 2019 03:33 PM UTC

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 [Syncfusion]
Replied On April 16, 2019 05:34 AM UTC

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
Replied On April 16, 2019 09:26 AM UTC

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


Please let me know how I could fix this issue.

Thank you.

Thavasianand Sankaranarayanan [Syncfusion]
Replied On April 17, 2019 05:40 AM UTC

Hi John, 

Thanks for your appreciation. 

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


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
Replied On April 17, 2019 12:57 PM UTC

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 [Syncfusion]
Replied On April 19, 2019 10:47 AM UTC

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. 



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
Replied On April 19, 2019 10:50 AM UTC

Hi Dhivya,

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

Thavasianand Sankaranarayanan [Syncfusion]
Replied On April 22, 2019 07:24 AM UTC

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. 



Regards, 
Thavasianand 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