DevExtreme Vue - A Request Error Occurs After Filtering or Searching

This topic addresses multiple request errors that may occur in your application. To check an error code, follow the steps below:

1. Obtain a URL link generated by the problematic data query in the browser network tab. Paste the URL in a new browser tab.

2. Enable exceptions on the server to see a detailed error message. In ASP.NET, you can obtain an exception call stack. Refer to the following help topic for more information: How to obtain an exception call stack.

DevExtreme.AspNet.Data sends load parameters (skip, take, filter, and group) in the browser URL. As a result, an error may occur if a string with parameters is too long and cannot be processed on the server. Refer to the following article for more information: Request Limits.

The following errors may occur:

• Query string is too long
• Request URI is too long
• Maximum request length exceeded
• 404
• 404.15
• The object XMLHttpRequest error occurs once you define total and group summaries in DataGrid.
• Filtering by Search Panel does not work if the component has a lookup column.
• Filtering by Search Panel does not work if the component has more than 20 columns.
• Selection does not work if selection.deferred is true.

If you receive one of the errors above, one of the following solutions may help you resolve it:

• Increase the maximum query string length in your backend configuration file. Note that browsers also impose their own restrictions on the maximum URL length: What is the maximum length of a URL in different browsers?.

• Use POST requests instead of GET requests. Set the LoadMethod option to POST and change the LoadAction implementation as follows:

  jQuery

  index.js

  $("#grid").dxDataGrid({     
      dataSource: DevExpress.data.AspNet.createStore({
          key: "keyFieldName",
          loadUrl: url,
          loadMethod: "POST",
      }),
      // ...
  });

  ASP.NET Core Controls

  Razor C#

  CS

  @(Html.DevExtreme().DataGrid()
      // ...
      .DataSource(d => d.Mvc().Controller("SampleData").LoadMethod("POST").LoadAction("GetData").Key("OrderID"))
  )

  [Route("api/[controller]")]
  public class SampleDataController : Controller {
      [HttpPost]
      public object GetData([FromBody] DataSourceLoadOptions loadOptions) {
          return DataSourceLoader.Load(SampleData.Orders, loadOptions);
      }
  }

  Angular

  app.component.ts

  import { createStore } from 'devextreme-aspnet-data-nojquery';
  
  const dataSource = createStore({
      key: "keyFieldName",
      loadUrl: urlHere,
      loadMethod: "Post",
      // ...
  });

  Vue

  App.vue

  <template>
      <!-- ... -->
  </template>
  
  <script>
  import { createStore } from 'devextreme-aspnet-data-nojquery';
  
  const dataSource = createStore({
      key: "keyFieldName",
      loadUrl: urlHere,
      loadMethod: "Post",
      // ...
  });
  </script>

  React

  App.js

  import { createStore } from 'devextreme-aspnet-data-nojquery';
  
  const dataSource = createStore({
      key: "keyFieldName",
      loadUrl: urlHere,
      loadMethod: "Post",
      // ...
  });

  As POST request size becomes large after these changes, you may need to increase the Content-Length value in the server configuration file.