I am trying to use angular-ui/ui-calendar( FullCalendar ) in my Angular Js app.
I have select box which lists some items, based on the selcted item, my event source url need to be updated. So in controller, I do update it, but the calendar is still not using the updated URL and also I need the calendar to refresh/Render, once the source is changed.
As per this link need to some remove and add event source.
I am new to both Jquery and Angular so I would appreciate if any one can explain how I can do it in angular js.
some bits of my controller where i set the url source , but I think it is not the right way to do , and it is also not working.
$scope.locationId = 0
$scope.url = "./api/ev/event/calendarByLocationId?locationId=" + $scope.locationId;
$scope.eventSource = {
url : $scope.url
};
$scope.setURL = function(locationId) {
$scope.locationId = locationId
$scope.url = "./api/ev/event/calendarByLocationId?locationId=" + $scope.locationId;
$scope.eventSource = {
url : $scope.url
};
$scope.eventSources = [ $scope.eventSource ];
}
Without using refetchEvents, below code works for me. Once the new event source is added, Calendar automatically fetching the new data from new source.
// This function is called to change the event source. When
// ever user selects some source in the UI
$scope.setEventSource = function(locationId) {
// remove the event source.
uiCalendarConfig.calendars['myCalendar'].fullCalendar('removeEventSource', $scope.eventSource);
// Create the new event source url
$scope.eventSource = {url : "./api/ev/event/calendarByLocationId?locationId=" + locationId};
// add the new event source.
uiCalendarConfig.calendars['myCalendar'].fullCalendar('addEventSource', $scope.eventSource);
}
I am figuring out on adding and removing events sources as well. There seems to be a problem.
But as temporarily, what I had was a REST url. Once updated, the data is updated. By then I made the program to refresh the event on the same url by triggerring this. This enables the url to be refreshed and grabbed from database again.
$scope.myCalendar.fullCalendar( 'refetchEvents' );
Which your HTML code should look like this:
<div class="calendar" ng-model="eventSources" calendar="myCalendar" config="uiConfig.calendar" ui-calendar="uiConfig.calendar"></div>
Hope this helps.
Related
i try to get the the value of number row selected, and print it in HTML using Angularjs, but no issue,
i have the count only when i clic in the grid column header.
The value of " selectedRowsCounter " is 0 in html, when i dosn't clic in the grid header
my code is like
var activeButtons = function() {
var countRowsSelected = $scope.gridOptions.api.getSelectedRows().length;
$scope.selectedRowsCounter = countRowsSelected;
console.log($scope.selectedRowsCounter);
$rootScope.count.selectedRows = countRowsSelected;
};
$scope.gridOptions = {
rowData: null,
angularCompileRows: true,
onSelectionChanged: activeButtons,
}
there is a screenshot
i have open the same subject here
https://github.com/ceolter/ag-grid/issues/1023
i have added this line to activeButtons function and it work fine
$scope.gridOptions.api.refreshView();
i dont knew if there is a good solution, but that work for now
The problem seems to be with Angular being unaware of the $scope property change because ag-grid does not tell Angular that it has modified something in the $scope. Although it is difficult to tell if you don't show your view.
You can use onSelectionChanged the way you are using it to know how many rows have been selected, but you need to tell Angular that something has changed in its $scope by applying it.
Something like this:
var activeButtons = function() {
var countRowsSelected = $scope.gridOptions.api.getSelectedRows().length;
$scope.selectedRowsCounter = countRowsSelected;
console.log($scope.selectedRowsCounter);
$rootScope.count.selectedRows = countRowsSelected;
window.setTimeout(function() {
this.$scope.$apply();
});
};
That way you can apply the $scope and the html view will reflect the changes.
Is there any direct way to get dialog object of all components which are dragged on page.
For ex: when we load page and if there is any component like text, image are on page, I can get dialog. Please suggest?
Yes, it is possible. Attach a listener which listens to the editablesready event fired by WCM. Get all the editables on the page using the #getEditables() method of CQ.WCM and then get the dialog of each editable if it is present.
Sample code below.
CQ.WCM.on('editablesready', function() {
var editables = CQ.WCM.getEditables();
for(var path in editables) {
var editable = editables[path];
try {
console.log(editable.getEditDialog());
//Do stuff
} catch(e) { }
}
});
I am trying to refresh the page based on value selected. Initially i had set the meta tag to refresh the page for 10 secs. Later when a particular value is selected from combo, the page should get refreshed based on the value selected.
There is a buildchart function which gets executed when i load the page or when refreshed. This function gets a json file from a location. The json file gets updated every few minutes. So after few intervals i will be getting the updated json file in a configured location . So i am configuring a combo box with values so that when the user selects the value, after that much secs the json is fetched and the report displayed.
HTML
<meta id="refresh" http-equiv="refresh" content="10;URL=/index.html#/Refresh">
Later in the code:
<select style="text-align: right;" name="refreshrate"
ng-model="model.refreshrate"
ng-options= "item.value as item.label for item in refreshValues "
ng-change = "TimedRefresh(model.refreshrate)">
</select>
My angular code
$scope.refreshValues =
[
{label:"1 Min", value:"1"},
{label:"3 Min", value:"3"},
{label:"5 Min", value:"5"},
{label:"Never", value:"0"}
];
$scope.TimedRefresh = function(t) {
console.log(t);
setTimeout("location.reload(true);", t*60);
}
However, the page refreshes with the already configured value of 10 in the meta tag's content. what am i missing to update this?
UPDATE
I tried changing the meta tag during runtime when the value is selected, now the page refresh happens but only once at the specified selected interval and not repeatedly after that.
$scope.TimedRefresh = function(t) {
console.log(t);
var s = document.getElementById('refresh');
s.setAttribute("content", t*10 +";URL=index.html#/Refresh");
console.log(s);
}
I removed the content attribute from the meta tag and assigned it at runtime. However i am trying to refresh the page not once but every configured interval times.
Try
$route.reload(); or $window.location.reload();
The meta-tag will refresh the page no matter what. You should call TimedRefresh(10) in the controller, so when it loads, the function get called.
app.controller('myCtrl', function() {
$scope.refreshValues = [
{label:"1 Min", value:"1"},
{label:"3 Min", value:"3"},
{label:"5 Min", value:"5"},
{label:"Never", value:"0"}
];
$scope.TimedRefresh = function(t) {
console.log(t);
setTimeout("location.reload(true);", t*60);
}
$scope.TimedRefresh(10); // Will trigger TimedRefresh(10) once when the controller loads
// ...
});
I'm curious on what you are trying to do though. Can you elaborate?
I'm using a kendo grid and have a checkbox column with the following template:
"<input class='gridCheckbox' id='gridCheckbox_#=name#' name='Selected' type='checkbox' ng-model='dataItem.checked'/>"
In addition I'm also using an observableArray as the grid's dataSource.
When clicking the chekcbox the data in the observableArray is changed as expected but no "change" event is triggered.
Here is how I define the observableArray:
var obsArray = new kendo.data.ObservableArray(scope.gridData);
this.gridDataSource = new kendo.data.DataSource({
data: obsArray
});
obsArray.bind("change", function (e) {
console.log(e.action, e.field);
});
"scope.gridData" is the original dataModel. When I click the checkbox the observableArray is changed but not the "scope.gridData". In order to change the "scope.gridData" I want to listen to the "change" event and change the "scope.gridData" manually but as I said the "change" event is not triggered.
Any suggestions to what am I doing wrong and maybe there is a better solution.
Read This
your issue is that kendo uses a copy of your scope object
I manually added an event to my input checkbox (in our class we're using Angular so it was on ng-click="doSomething()" but maybe yours is just click="doSomething" and recorded handling the boolean change manually.
We have the Kendo Observables, too - but I got **lucky because we're also using the Breeze JS stuff where we can do data detection and refresh the grid once the data propagates backwards to the right place to be set to dirty. ( grid.dataSource.read(); )
If you want the full row value, make the click="doSomething(this)" and then capture it as the Sender. Just debug in and you should the dataItem attached to the Sender.
This might help you & this is not the correct figure but i did one example like this similar to your problem
var contentData = [
{ organization: 'Nihilent', os: 'Window' }
];
var nihl = contentData[0];
var viewModel = kendo.observable({
gridSource: new kendo.contentData.DataSource({
contentData: contentData
})
});
kendo.bind($(document.body), viewModel);
contentData.push({ organization: 'Dhuaan', os: 'Android' });
nihl.set('os', 'iOS');
In my controller i have.
'panel > button':{
click:function(){
console.log('button clicked')
var view = Ext.ComponentQuery.query('#alexPanel')[0];
var modelItem = view.getPostValue() // i get the data from the form
//here i would like to update my store with a new item
}
}
Thank you guys for helping me out.
Should be as simple as:
getXXXStore().add(modelItem);
Where XXX is the name of your store as configured in your controller's stores property.