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. Image for the cookie policy date

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

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

12 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team 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. 



JS John Stephen Mangam 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


TS Thavasianand Sankaranarayanan Syncfusion Team 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. 



JS John Stephen Mangam 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 ...
   


JS John Stephen Mangam 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


TS Thavasianand Sankaranarayanan Syncfusion Team 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. 



JS John Stephen Mangam 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.


TS Thavasianand Sankaranarayanan Syncfusion Team 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. 



JS John Stephen Mangam 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.


DR Dhivya Rajendran Syncfusion Team 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


JS John Stephen Mangam 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.


TS Thavasianand Sankaranarayanan Syncfusion Team 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. 


Loader.
Live Chat Icon For mobile
Up arrow icon