How to use change dashboard data source without page reload?
Tom_Hendricks
Customer Super IT Monkey ✭✭✭✭✭
The scenario: per the title, I have some custom controls on my dashboard pages that add querystring params to the URL and refresh the page to get all the widgets to recognize them. Essentially identical to this: https://community.cireson.com/discussion/4161/duplicate-dashboards-for-multiple-support-groups
This works well, except that it is a fairly terrible user experience, especially on pages that take a long time to load.
It is entirely possible to change the params without reloading the page (window.history.pushState(null,null,'?myParam=NewValue');). However, the datasource for the grids/charts was created before this change and is not updated by it.
I can see where the url lives inside of the widgets' datasource (myWidget.dataSource.transport.read.options.url, but can be changed via setDataSource IIRC). In this scenario, it will look something like "https://mySite/platform/api/endpoint?$filter=(MyProperty eq)" which is not valid (MyProperty equals....what, exactly?). I am using a {{variable}} there.
The Question: How can I rewrite this URL to contain the correct url WITH the property value from the page's URL? You might think that reloading the widget(s) works, but it actually makes things worse--it knocks out all the changes to the window's URL (for......some reason...) and you end up with the same malformed URL in your data source.
What is a good way to approach this?
This works well, except that it is a fairly terrible user experience, especially on pages that take a long time to load.
It is entirely possible to change the params without reloading the page (window.history.pushState(null,null,'?myParam=NewValue');). However, the datasource for the grids/charts was created before this change and is not updated by it.
I can see where the url lives inside of the widgets' datasource (myWidget.dataSource.transport.read.options.url, but can be changed via setDataSource IIRC). In this scenario, it will look something like "https://mySite/platform/api/endpoint?$filter=(MyProperty eq)" which is not valid (MyProperty equals....what, exactly?). I am using a {{variable}} there.
The Question: How can I rewrite this URL to contain the correct url WITH the property value from the page's URL? You might think that reloading the widget(s) works, but it actually makes things worse--it knocks out all the changes to the window's URL (for......some reason...) and you end up with the same malformed URL in your data source.
What is a good way to approach this?
0
Best Answer
-
Geoff_Ross
Cireson Consultant O.G.
Hi Tom,
Not sure if this is any good but rather than update the URL you could just update the widgets config and then reload the widget.
This changes the first Parameter on the first Chart, I'm sure you can take it from here if this sounds like it might be a suitable solution.$('[kendo-chart="chart"]').first().data('kendoChart').$angular_scope.config.selectedQuery.Parameters[0].Value = "xzy"
Geoff5
Answers
Not sure if this is any good but rather than update the URL you could just update the widgets config and then reload the widget.
This changes the first Parameter on the first Chart, I'm sure you can take it from here if this sounds like it might be a suitable solution.
$('[kendo-chart="chart"]').first().data('kendoChart').$angular_scope.config.selectedQuery.Parameters[0].Value = "xzy"Geoff
As for grids (OData, to be specific)....
There is no selectedQuery within config. The most similar thing I see is queryParamKeys. If I set each key's value, it seems to accomplish the same thing. So that has ended up working too.
I passed in a JSON object with my key/value pairs and then set params with the same key name, rather than calling them by index as shown above--I'm sure you had something similar in mind when started me off with that example, of course.