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

Grid update triggers 404

I have a simple grid pointing to ODataV4

When i make an update on the grid, i see 2 requests in a row - one PATCH request ( /fe/odata/providers('63798f07dd296656807c3ebc') ) with an update that completes successfully (though it returns no payload in response) and another GET that returns 404 because it is made to  /fe/undefined


i see that GET is triggered by refreshing the row but i dont get why it is sent to "/fe/undefined" URL?




6 Replies

JC Joseph Christ Nithin Issack Syncfusion Team January 9, 2023 01:20 AM UTC

Hi Alex,


  Greetings from Syncfusion support.


  Before proceeding with the solution, share the below details so that we will be able to provide a better solution.


  • Complete grid rendering code.
  • Simple sample to replicate the issue you are facing.
  • Video demo of the issue you are facing.
  • Syncfusion package version.


Regards,

Joseph I.



AL Alex Lyashok January 9, 2023 01:48 AM UTC

Version 20.3.59
Video:
https://www.dropbox.com/s/9l0zafdaw79y0ci/1-8-2023%208-47-03%20PM.avi?dl=0

Grid code

let code = "providers";
let sourceName = '/fe/odata/' + code;
let elemIdGrid = 'mp-grid-' + code;

import { EmitType } from '@syncfusion/ej2-base';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
let clickHandler: EmitType<ClickEventArgs> = (args: ClickEventArgs) => {
    if (args.item.id === 'Refresh') {
        grid.refresh();
    }
};

import { showToast } from '../common/masthead';
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
let dataMgr: DataManager = new DataManager({url: sourceName, adaptor: new ODataV4Adaptor });

import { Grid, Edit, Toolbar, ForeignKey, RecordDoubleClickEventArgs } from '@syncfusion/ej2-grids';
Grid.Inject(Edit, Toolbar, ForeignKey );
let grid: Grid = new Grid({
    dataSource: dataMgr,
    toolbar: [{ text: 'Refresh', tooltipText: 'Refresh', prefixIcon: 'e-refresh', id: 'Refresh' }, 'Add', 'Edit', 'Delete', 'Search'],
    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog', showDeleteConfirmDialog: true },
    selectionSettings: { type: 'Single', mode: 'Row' },
    columns: [
        { headerText: 'ID', field: '_id', isPrimaryKey: true, visible: false},
        { headerText: 'Logo URL', width: 95, field: 'logo_url', template: '<div style="height: 55px; width=75px; text-align: center;"><span class="align-helper"></span><img src="${logo_url}" style="max-width: 100%; max-height: 100%; vertical-align: middle;"/></div>', textAlign: 'Center' },
        { headerText: 'Name', field: 'name'},
    ],
    height: 515,
    toolbarClick: clickHandler
});
grid.appendTo("#" + elemIdGrid);



JC Joseph Christ Nithin Issack Syncfusion Team January 11, 2023 11:42 PM UTC

Alex,


The issue you're seeing with the grid making a GET request to an invalid URL ( "/fe/undefined" ) after making an update to the grid is likely related to the grid's data management. The grid is likely configured to refresh the row after the PATCH request is completed, which is causing it to send a GET request to the server.


Regarding the invalid URL ("/fe/undefined"), it could be caused by a few things:


  1. It might indicate that the grid's dataSource property is not configured properly, or the url to the server is missing or incorrect.
  2. Could be due to some issues with the way the grid's dataSource property is updated, for example, a string or url is being replaced with undefined after the initial setup.
  3. It could be caused by some logic within the custom code that handles the update request, which is modifying the request's URL or causing an undefined to be passed to the URL.
  4. It could also be an issue on the client side, a problem with network connectivity or firewall rules might be causing the issue


You should check the configuration of the dataSource property, as well as any custom logic or code that might be modifying the grid's behavior. You can also try to check the value of the dataSource when the error happens and compare it with the initial value that you set. Also, check the network tab of the browser's developer tools to see the exact url that is being sent by the grid, this will help you identify the source of the problem.


You can also find help in the official documentation of syncfusion which might be helpful to resolve the issue, https://ej2.syncfusion.com/documentation/grid/data-binding/remote-data/#odata-v4-adaptor---binding-odata-v4-service


Share a simple issue replicating sample so that we will be able to assist you further. Please let me know if you have any questions or if there's anything else I can do to help.



AL Alex Lyashok January 12, 2023 03:14 AM UTC

Sorry but i dont follow. Complete grid code is posted in the message above - it does not really have special configuration. Also if i simply click refresh on the tab, the grid refreshes correctly before and afteer, so this issue occurs only on PATCH request refresh. 



AL Alex Lyashok January 12, 2023 01:54 PM UTC

Steps to reproduce:



JC Joseph Christ Nithin Issack Syncfusion Team January 19, 2023 06:22 AM UTC

Alex,


   We tried to reproduce the issue using the url provided, but we are not able to run the sample as it shows bad gateway. Please refer the below screenshot.


   Screenshot:



By default, If we use ODataV4Adaptor, the GET method will be triggered for all the grid actions like Paging, Sorting, Filtering, etc., The POST, PATCH, DELETE methods will be triggered for CRUD actions like insert, edit, delete respectively. In these methods, you can perform the CRUD actions in your service.


Screenshot: payload on CRUD actions


 

namespace Batch_OdataV4_Core.Controllers

{

    [Route("api/[controller]")]

    public class BooksController : ODataController

    {

        private BookStoreContext _db;

 

 

        public BooksController(BookStoreContext context)

        {

            _db = context;

            if (context.Books.Count() == 0)

            {

                foreach (var b in DataSource.GetBooks())

                {

                    context.Books.Add(b);

                }

                context.SaveChanges();

            }

 

        }

        // GET api/values

        [HttpGet]

        [EnableQuery]

        public IQueryable<Book> Get()

        {

            return _db.Books;

        }

 

        // POST api/values

        [HttpPost]

        [EnableQuery]

        public IActionResult Post([FromBody]Book book)

        {

            _db.Books.Add(book);

            _db.SaveChanges();

            return Created(book);

        }

 

        [System.Web.Http.AcceptVerbs("PATCH", "MERGE")]

        public Book Patch(int key, [FromBody]Delta<Book> patch)

        {

            var query = Request.Headers["params"];

            var entity = _db.Books.Find(key);

            patch.Patch(entity);

            _db.SaveChanges();

            return entity;

        }

 

        // DELETE api/values/5

        [HttpDelete("{id}")]

        public async Task<int> Delete(int key)

        {

            var od = await _db.Books.FindAsync(key);

 

            _db.Books.Remove(od);

            await _db.SaveChangesAsync();

            return key;

        }

    }

}

 


While using ODataV4 Adaptor in the Grid, when performing any data action like filtering, sorting, paging, searching, exporting, etc., the Grid sends the queryString in OData standards to the server. In the server side, you should handle the all the data operations and return the data in required format to the Grid.


ODataV4 sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/odatav41984479243.zip

OdataV4: http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html#_Toc453752197


Loader.
Up arrow icon