BuyLog In
Ticket T598615
Visible to All Users

DataGrid - Server-side pagination in Angular

created 7 years ago

Hello,

we need an Angular 4-5 example that implement a server side paginated dxGrid with the following features:

Server side pagination (already included)
Server Side sorting (already included)
Server side column filtering
Server side external dxForm filtering ( example: some inputs and a submit button that call server and refresh the datasource of grid )
Master detail view with server side data source of child template like this example: https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/AdvancedMasterDetailView/Mvc/Light/

We have already try to customize your example https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CustomDataSource/Angular/Light/
But I have some questions about CustomStore.

How to update the datasoure and re-render the grid with new CustomStore after a custom action-method (example: button click on external form outside the dxGrid).
Add more custom parameters in params variable to CustomStore before http.get call.
How to inject the http.get on other methods than constructor. (when I try to pass new CustomStore on my custom method I receive some errors like ‘method get undefined’ ).

Thanks in advance.

Sign in to comment on this post

Answers approved by DevExpress Support

created 7 years ago (modified 7 years ago)

Hi Anestis,

Thank you for the detailed description. Here are my comments:

  1. First I recommend you take a look at the Custom Sources - Load Data help topic that contains a full Angular example for a CustomStore. The server-side solution depends on what platform you're using. For instance, we provide the DevExtreme ASP.NET Data and DevExtreme PHP Data libraries that support all server-side operations out of the box. In addition, you can use the createStore function to get a built-in client-side implementation. For instance, check this example - https://plnkr.co/edit/YQW2X4Gbzh2dMTBV2KF8?p=preview
  2. Use the refresh method to reload grid data on an external button click.
  3. The example from the Custom Sources - Load Data help topic demonstrates how to use Inject in such scenarios.

Let us know if you have additional questions.

    Comments (2)
    NP NP
    Nikos Panagou 7 years ago

      Hi Artem,
      Thanks for the reply. I have tried to use your suggestions.

      I have tried to install the “devextreme-aspnet-data”
      with npm install devextreme-aspnet-data into my angular-cli project
      I’m using angular 5.2 with latest angular-cli 1.6.5 and jquery installed

      When I try to ng serve my application with nodeJs the following error appeared

      ERROR in node_modules/devextreme-aspnet-data/js/dx.aspnet.data.d.ts(18,54): error TS2304: Cannot find name 'JQueryAjaxSettings'.

      https://github.com/DevExpress/DevExtreme.AspNet.Data/issues/168
      I found this article about the error from AntonSermyazhko ( https://github.com/AntonSermyazhko )

      and I have followed his instructions to add include section with "node_modules/@types/jquery” in tsconfig.json but with no success.
      "include": [``````"node_modules/@types/jquery"``````]

      Could you please provide me more details how I can fix this?
      Thanks.

      Artem (DevExpress Support) 7 years ago

        Thank you for the update. To avoid discussing multiple issues in the same thread,  I've created a separate ticket on your behalf (T598839: The Cannot find name 'JQueryAjaxSettings'. error occurs on an attempt to install dx.aspnet.data in Angular CLI). Please refer to it for further correspondence.

        Sign in to comment on this post

        Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

        Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.