How to pass correct DataSourceRequest when use transport-read function?

[Dave]

We want to move all our calls sever side so we got half way there but there are issues.

We have the following code that partially works

<kendo-datasource ref="datasourceSpike"
:page-size=100   :serverFiltering=true :serverSorting=true :serverPaging=true :serverGrouping=true
  :schema-data="'data.data'" :schema-total="'data.total'" :schema-groups="'data.groups'"
 :transport-read="readData"
></kendo-datasource>

readData(e) {
     this.$OurApi
       .getList(e.data)
       .then((response) => {
         e.success(response);
       });
   },

 

And server side:  (actually only got this bit to work half way if I change the type of the DataSourceRequest parameter to string and then jsonconvert it.)

public HttpResponseMessage GetListTest([System.Web.Http.ModelBinding.ModelBinder(typeof(WebApiDataSourceRequestModelBinder))]DataSourceRequest dataSourceRequest)
       {
           //  DataSourceRequest request = JsonConvert.DeserializeObject<DataSourceRequest>(dataSourceRequest);
           IRequestService requestService = new ServiceFactory().GetRequestService();
           List<RequestsList> requestsLists = requestService.GetList();

            var dataSourceResult = requestsLists.ToDataSourceResult(dataSourceRequest);
    etc...

       }

 

The problem the properties in e.data do not match the properties in DataSourceRequest.

"take":100,"skip":100,"page":2,"pageSize":100   These ones work but the filter, sort, group properties dont have the same names.   Im trying to figure out if I need to use an existing parametermap but still have no luck.  

 

 

 

[Dave]

If I try to use transport-read-url  instead of a function the paging works but sorts etc... dont  

I get an url that looks like this

http://MYURL/api/Request/TestList/?take=100&skip=0&page=1&pageSize=100&sort%5B0%5D%5Bfield%5D=activityName&sort%5B0%5D%5Bdir%5D=asc

But I found a link somehwere that showed a different syntax and this works for sorts if I input it directly in the browser.

http://MYURL/api/Request/TestList/?take=10&skip=0&page=1&pageSize=10&sort=activityName-asc

Why dont I get this in my url ?

 

 

[Dave]

I got it mostly working by adding a couple of lines.
readData(e) {
  const requestObject = (new kendo.data.transports.webapi({ prefix: '' }))
        .options.parameterMap(e.data);
     this.$OurApi
       .getList(requestObject )
       .then((response) => {
         e.success(response);
       });
   },

[Georgi]

Hi Dave,

What I would recommend you is to set a type to the dataSource. Once a the type is specified, the dataSource will use a predefined configuration for the transport and you will be able to simply pass an url to the transport-read setting.

e.g.

:type="'webapi'"

Have in mind that it will be necessary to include the kendo.aspnetmvc.min.js script. You could use our CDN:

<script src="http://kendo.cdn.telerik.com/2019.1.220/js/kendo.aspnetmvc.min.js"></script>

When you set the type, the predefined transport configuration will include the parameterMap handler which will map the parameters to a format compatible with the DataSourceRequest parameter.

Finally, you can omit the schema.groups configuration as the DataSourceResult does not have a separate property for the groups.


Regards,
Georgi
Progress Telerik

[Dave]

Ok so I tracked down some of our issues.  We were transforming the response in camelCase because thats how our datasource used to expect the data.  But this does not play well with the kendo grid as it breaks some of the fields it uses in the response.

[Georgi]

Hello Dave,

If the field names in the columns configuration of the grid are specified in camelCase, you should not face any trouble when returning the data in camelCase from the server.

Could you please provide us with the full configuration of your grid and dataSource? Ideally, a sample which replicates the issue would definitely help us fully understand the case and provide a more to the point solution.


Regards,
Georgi
Progress Telerik