Using one data source across multiple views in Kendo UI SPA
- by user3731783
I am trying to build a Kendo UI SPA. I have two views. View 1 (appListView) shows Application Details in a grid and view 2 (activityView) will have a dropdown for application names and a grid that shows the activity for selected application
As I am loading all the application details on the loading of view 1, I would like to re-use those details to populate the dropdown on view 2. Please see my code below. Everything works fine but when I go to View 2 it makes a call to the service again to get application details. I would like to use the existing data if it is already loaded and if the uses comes to view 2 directly then it should get application data also. I am not sure what I am missing in the code.
View Markup:
<script id="appListView" type="text/x-kendo-template">
<h3 data-bind="html: displayName"></h3>
<div data-role="grid"
data-editable="{'mode':'popup'}"
data-bind="source: items"
data-columns="[
{'field': 'Name'},
{'field': 'ContactEmail','title':'Contact Email'}
]">
</div>
</script>
<script id="" type="text\x-kendo-template">
<div>
Activity for Application
<input name="AppName"
data-role="dropdownlist"
data-source="appsModel.items"
data-text-field="Name"
data-value-field="Id"
data-option-label="Choose an application name"
style="width:250px;" />
</div>
<div id="Activities" data-role="grid"
data-bind="source: items"
data-auto-bind="false"
data-columns="[
{'field': 'Domain','title':'Domain'},
{'field': 'ActivityType','title':'Activity Type'}
]">
</div>
</script>
js with DataSource and View Model:
//data sources
var applications = new kendo.data.DataSource({
schema: { model: { id: "Id" } },
serverFiltering : true,
transport: {
read: {
url: '/api/App',
dataType: 'json',
type:'GET'
}
}
});
var activities = new kendo.data.DataSource({
schema: { model: { id: "Id" } },
transport: {
read: {
url: '/api/Activity',
dataType: 'json',
type: 'GET'
},
parameterMap: function (data, type) {
if (type == "read") {
return 'appId=' + $("#AppName").val() ;
}
}
}
});
//Models
var appsModel = kendo.observable({
items: applications,
displayName: 'My Applications'
});
var activityModel = kendo.observable({
items: activities,
onAppChange: function(t){
$("#Activities").data("kendoGrid").dataSource.read();
},
dispayName: 'Application Activities'
});
//views
var layout = new kendo.Layout("layout-template");
var appListView = new kendo.View("appListView", { model: appsModel });
var activityView = new kendo.View("activityView", { model: activityModel });
Thank you for taking time to read this long question.
