CODEWITHSUNDEEP
mobilekendo-uiparam
AndreLiem
AndreLiem

Reputation: 2051

How to pass View Param to View Model DataSource in Kendo Mobile?

What is the correct way to pass a view variable from the URL to a View Model to filter the result?

For example:

dataSource: new kendo.DataSource( { 
    transport: {
        read: {
           url: 'http://api.endpoint.com/resource',
        }
        parameterMap: function(options,type) {
            if (type === 'read') {
                return {
                   FormID: view.params.FormID
                };
            }
        }

});

In the example above, there's a parameter in the URL called "FormID" and I would like to pass that value right to the parameterMap function. There is no "view" object, so I'm just putting that as an example.

I tried hooking into to the "data-show" and "data-init" functions to set this value to use, but the datasource fetches the data before these functions run.

Thanks

Upvotes: 1

Views: 2091

Answers (2)

Lars Höppner
Lars Höppner

Reputation: 18402

The configuration option options.transport.read can be a function, so you can compose the url there:

dataSource: new kendo.DataSource({
    transport: {
        read: function (options) {
            // get the id from wherever it is stored (e.g. your list view)
            var resourceId = getResourceId(); 

            $.ajax({
                url: 'http://api.endpoint.com/resource/' + resourceId,
                dataType: "jsonp",
                success: function (result) {
                    options.success(result);
                },
                error: function (result) {
                    options.error(result);
                }
            });
        }
    }
});

To connect this with your list view, you could use the listview's change event:

data-bind="source: pnrfeedsDataSource, events: { change: onListViewChange }"

then in viewModel.onListViewChange you could set the appropriate resource id for the item that was clicked on:

// the view model you bind the list view to
var viewModel = kendo.observable({
    // ..., your other properties
    onListViewChange: function (e) {
        var element = e.sender.select(); // clicked list element
        var uid = $(element).data("uid");
        var dataItem = this.dataSource.getByUid(uid);

        // assuming your data item in the data source has the id 
        // in dataItem.ResourceId
        this._selectedResource = dataItem.ResourceId; 
    }
});

Then getResourceId() could get it from viewModel._selectedResource (or it could be a getter on the viewModel itself). I'm not sure how all of this is structured in your code, so it's difficult to give more advice; maybe you could add a link to jsfiddle for illustration.

Upvotes: 2

Petyo Ivanov
Petyo Ivanov

Reputation: 1137

You may use a "global" variable or a field in the viewmodel for that purpose. Something like 

var vm = kendo.observable({
   FormID: null, 
   dataSource: new kendo.DataSource( { 
   transport: {
    read: {
       url: 'http://api.endpoint.com/resource',
    }
    parameterMap: function(options,type) {
        if (type === 'read') {
            return {
               FormID: vm.FormID
            };
        }
    }
  })
});

function viewShow(e) {
    vm.set("FormID", e.view.params.FormID);
    // at this point it is usually a good idea to invoke the datasource read() method.
    vm.dataSource.read();
}

The datasource will fetch the data before the view show event if a widget is bound to it. You can work around this problem by setting the widget autoBind configuration option to false - all data-bound Kendo UI widgets support it.

Upvotes: 1

Related Questions