How to create "Custom Data Grid "with both client and server side filtering - Forum - Kendo UI Builder - Progress Community

How to create "Custom Data Grid "with both client and server side filtering

 Forum

How to create "Custom Data Grid "with both client and server side filtering

This question is answered

Custom Data Grid with both client and server side filtering. I am using JSON API as a data source in KUIB 1.1

Verified Answer
  • Hello,

    The support for OData and Generic REST (READ only) as a Data Provider was introduced in KUIB 2.0.

    Is it possible for you to upgrade to KUIB 2.0?

    For KUIB 1.1, you can write custom code to set the columns and the dataSource properties of the grid component:

    For example on a view created using the blank template, you could add the following to the onShow() function:

                       delete $scope.grid0.options.columns;

                       $scope.grid0.options.dataSource = new kendo.data.DataSource({

                           transport: {

                               read: {

                                   url: "demos.telerik.com/.../products",

                                   dataType: "jsonp"

                               }

                           },

                           pageSize: 10

                       });

    However, please notice that you would still need to define a data source (of JSDO type) to create the grid to the view.

    The usage of client or server side filtering depends on the usage of the serverFiltering properties of the DataSource.

    Link: docs.telerik.com/.../datasource

    I hope this helps.

  • You are welcome.

    Thank you for upgrading to kUIB 2. (Version 2.0.1 is the current version.)

    For server side filtering, you need to do two things:

    - Add support for the JSON Filter Pattern (JFP) in your Business Entity

    - Enable server-side processing in the Edit Data Source dialog.

    To add support for the JFP in your Business Entity, you can use the sample implementation in the documentation:

    - documentation.progress.com/.../index.html

    Note: You can also define your own filter pattern (mapping type) instead of using JFP.

    To enable server-side processing from Kendo UI Builder, you would clear the "Client-side Processing" setting in the Edit Data Source dialog. You would also need to provide the name of the Count Function to use.

    Related link:

    documentation.progress.com/.../

    You can enable filtering support on the grid via the Properties pane in KUIB ( Enable Column Filtering / Sorting properties).

    Alternatively, you can specify filters programmatically.

    Here are links to the documentation and samples:

    - documentation.progress.com/index.html

    - github.com/.../kendo-ui-builder-samples

    - github.com/.../develop

    - oemobiledemo.progress.com/.../index.html

    I hope this helps.

All Replies
  • Hello,

    The support for OData and Generic REST (READ only) as a Data Provider was introduced in KUIB 2.0.

    Is it possible for you to upgrade to KUIB 2.0?

    For KUIB 1.1, you can write custom code to set the columns and the dataSource properties of the grid component:

    For example on a view created using the blank template, you could add the following to the onShow() function:

                       delete $scope.grid0.options.columns;

                       $scope.grid0.options.dataSource = new kendo.data.DataSource({

                           transport: {

                               read: {

                                   url: "demos.telerik.com/.../products",

                                   dataType: "jsonp"

                               }

                           },

                           pageSize: 10

                       });

    However, please notice that you would still need to define a data source (of JSDO type) to create the grid to the view.

    The usage of client or server side filtering depends on the usage of the serverFiltering properties of the DataSource.

    Link: docs.telerik.com/.../datasource

    I hope this helps.

  • Thanks Egarcia.

    I upgraded to KUIB2... Now my datasource is JSDO. My requested URL for the grid is "JSDOName?filter=&_ts=150909762-5579186587-2"....For server side filtering I wish to add query string(filter data) in addition to this...

    I am new to KUIB2.. Could you refer some useful  documents links & examples?

  • You are welcome.

    Thank you for upgrading to kUIB 2. (Version 2.0.1 is the current version.)

    For server side filtering, you need to do two things:

    - Add support for the JSON Filter Pattern (JFP) in your Business Entity

    - Enable server-side processing in the Edit Data Source dialog.

    To add support for the JFP in your Business Entity, you can use the sample implementation in the documentation:

    - documentation.progress.com/.../index.html

    Note: You can also define your own filter pattern (mapping type) instead of using JFP.

    To enable server-side processing from Kendo UI Builder, you would clear the "Client-side Processing" setting in the Edit Data Source dialog. You would also need to provide the name of the Count Function to use.

    Related link:

    documentation.progress.com/.../

    You can enable filtering support on the grid via the Properties pane in KUIB ( Enable Column Filtering / Sorting properties).

    Alternatively, you can specify filters programmatically.

    Here are links to the documentation and samples:

    - documentation.progress.com/index.html

    - github.com/.../kendo-ui-builder-samples

    - github.com/.../develop

    - oemobiledemo.progress.com/.../index.html

    I hope this helps.

  • You may also find the following wiki article useful:

    community.progress.com/.../2933.how-to-add-jfp-support-to-a-business-entity

  • Thanks egarcia... Instead of using JFP and Count function.. I just want to do the server filtering in controller.public.js using angular-javascript...like the one you referred me for KUIB1... The ultimate requirement is to send a query string in request URL using script.