Hi guys i have a problem.
Im making a callback from an aspxgridview. I do callback when i make RowDblClick and then i switch to another tab of the pageControl and fill some controls with database information. One of those controls is another gridview. So what i want to do is when i rowdblclick in the new gridview, make another callback.
I dont know why but when i double click the new aspxgridview, my application stacks. So i haven't response of the callback. I stopped the first callback of the first grid, and the second callback works fine.
So my question is, how can i make a callback in an aspxgridview by a rowdblclick, and after that make another callback with another rowdblclick in another aspxgridview?
this is first aspxgridview
<dx:ASPxGridView ID="grillaInformes" runat="server" KeyFieldName="ID" width="100%" EnableCallBacks="false" ClientInstanceName="grillaInformes" OnCustomCallback="grillaInformes_CustomCallback">
<ClientSideEvents RowDblClick="function(s, e) { s.PerformCallback(e.visibleIndex); }"/>
and this is the second aspxgridview, whose callback doesn't work because i made another callback before of grillaInformes
<dx:ASPxGridView ID="grillaSubInformes" runat="server" KeyFieldName="ID" Width="100%" EnableCallBacks="false" ClientInstanceName="grillaSubInformes" OnCustomCallback="grillaSubInformes_CustomCallback" >
<ClientSideEvents RowDblClick="function(s, e) { s.PerformCallback(e.visibleIndex); }"/>
Have you tried calling a defined JavaScript function for the CallBacks, and stepping through the code there? For example:
function grillaInformes_RowDblClick(s, e) {
s.PerformCallback(e.visibleIndex);
}
function grillaSubInformes_RowDblClick(s, e) {
s.PerformCallback(e.visibleIndex);
}
and use the following for your grid:
<dx:ASPxGridView ID="grillaInformes" runat="server" KeyFieldName="ID" width="100%" EnableCallBacks="false" ClientInstanceName="grillaInformes" OnCustomCallback="grillaInformes_CustomCallback">
<ClientSideEvents RowDblClick="grillaInformes_RowDblClick"/>
<dx:ASPxGridView ID="grillaSubInformes" runat="server" KeyFieldName="ID" Width="100%" EnableCallBacks="false" ClientInstanceName="grillaSubInformes" OnCustomCallback="grillaSubInformes_CustomCallback" >
<ClientSideEvents RowDblClick="grillaSubInformes_RowDblClick"/>
You should see right away whether the second double-click is even starting, then step through the code behind. We do things like this often though, and have no problem with multiple callbacks running at one time.
Related
So I have a form that collects 3 data points that looks like this:
<form class="" >
<table>
<tr>
<td>Maximum Temperature</td>
<td><input class="setSettings" v-model="settings.maxTMP" type="number" max="30" min="5"></td>
</tr>
<tr>
<td>Minimum Humidity</td>
<td><input class="setSettings" v-model="settings.minHUM" type="number" max="95" min="20"></td>
</tr>
<tr>
<td>Maximum CO2</td>
<td><input class="setSettings" v-model="settings.maxCO2" type="number" min="200" max="5000" step="10"></td>
</tr>
</table>
<button type="button" v-on:click="whatSettings(settings)">Update Settings</button>
</form>
My data in the script tag is stored in the components local data, not the store, ike this:
data: function() {
return {
settings: {
maxTMP: "",
minHUM: "",
maxCO2: ""
}
}
}
There's no reason to put it through a mutation and commit it to the store as the purpose for the action is merely to send the data via post request to receiving api.
My methods for the component look like this:
methods: {
...mapActions({
setSettings: 'setSettings'
}),
whatSettings(settings){
let foo = settings.maxTMP;
let bar = settings.minHUM;
let uhm = settings.maxCO2;
console.log(foo);
console.log(bar);
console.log(uhm);
this.setSettings(foo,bar,uhm)
}
},
And that action from the store is write like this:
setSettings(foo,bar,uhm) {
console.log("Set these settings");
console.log(foo);
console.log(bar);
console.log(uhm);
},
Please forgive all the console.log()'s. I have it like this cause I was trying to test out different combinations of things to figure out where it goes wrong. Right now when I click the Update Settings button the console prints the whatSettings() correctly so I know that foo, bar, uhm are the correct value as they are passed into the setSettings() action. The problem is in the action's logs. "Set these settings" and foo are printed correctly followed by a single undefined, not two. So I'm not sure exactly what's happening with bar & uhm. When I rearrange the order it's always the first that gets printed.
Is it a problem with multiple arguments being passed to the action? Ideally I would just like it to look like this directly in the button tag for neatness but that didn't work so I tried trouble shooting like this:
v-on:click="this.setSettings(settings.maxTMP, settings.minHUM, settings.maxCO2)"
Thanks for reading and I appreciate the help!
Well, after a little more looking around I found this and it fixed my problem: Axios post request with multiple parameters in vuex action
correct button tag:
<button type="button"
v-on:click="setSettings({
foo: settings.maxTMP,
bar: settings.minHUM,
uhm: settings.maxCO2
})"
>Update Settings</button>
correct vuex store action:
setSettings({commit}, {foo, bar, uhm}) {
console.log("Set these settings");
console.log(foo);
console.log(bar);
console.log(uhm);
},
Not entirely sure why the {commit} needs to be present, but it does otherwise I just get 3 undefined results in the log. But it works now!
In my Ionic 1.3.1 app I am using the ion-slides component to display sections of a questionnaire:
<ion-slides options="vm.options" slider="data.slider">
<ion-slide-page ng-repeat="s in ::vm.sections">
<div class="bar bar-header bar-positive">
<button class="button button-small button-icon icon ion-chevron-left"
ng-click="vm.previous()"
ng-show="::$index !== 0"></button>
<h1 class="title">{{::s.text}}</h1>
<button class="button button-small button-icon icon ion-chevron-right"
ng-click="vm.next()"
ng-show="::($index + 1) < vm.sections.length"></button>
</div>
<ion-content class="has-header">
<div ng-if="s.include" ng-show="s.show">
<!--My content-->
</div>
</ion-content>
</ion-slide-page>
</ion-slides>
In my controller I listen for the slideChangeStart:
$scope.$on("$ionicSlides.slideChangeStart", function (event, data) {
alert('slideChangeStart');
vm.activeIndex = slider.activeIndex;
vm.propertySurvey.CurrentSectionIndex = vm.activeIndex;
//include is used on an ng-if so elements are removed from the dom
//and the number of watchers is reduced
//also, the slider displays the contents of the
//previous slide unless they are explicitly hidden
vm.sections[slider.previousIndex].include = false;
vm.sections[slider.previousIndex].show = false;
initialiseQuestions(vm.activeIndex);
});
When I click on my previous and next buttons, which call slider.slidePrev() or slider.slideNext(), the slideChangeStart event fires - and I see the alert. But if I slide the page using a gesture - the header changes as I expect but the event does not fire. I've tried switching the swipe off in my options without success (not my preferred solution anyway):
vm.options = {
noSwiping: true,
effect: 'fade'
}
UPDATE
I tried using slideChangeEnd but that event isn't firing either.
So I moved all my code into a single gotoSlide(index) method that I call from my next, previous and pagerClick methods - so that I don't rely on the ion-slides event.
And I added Ionic on-swipe directives to my ion-slide-page component to see if they would work:
<ion-slide-page ng-repeat="s in ::vm.sections"
on-swipe-left="vm.next()"
on-swipe-right="vm.previous()">
That made the swipe work in the Ripple emulator (where it wasn't working at all before), but it still doesn't work on any of my android devices. Again, the swipe events don't seem to fire.
I am using the Crosswalk plugin
The problem goes away if I remove the effect option. So this works:
vm.options = {
noSwiping: false,
speed: 300
}
And, since these are the default values anyway, I ended up removing the options object altogether.
NB replacing 'fade' with 'slide' did not work
Reference:
http://ionicframework.com/docs/api/directive/ionSlides/
I had a similar problem, and the above answer did not work for me, so I thought I'd share what did:
Per the Swiper API (which underlies ion-slides), you can add event based call backs directly to the widget.
The following worked for me (assuming the scope.slider object...)
//the 'slideChangeStart' event has a slider argument in its callback
scope.slider.on('slideChangeStart', function(slider) {
//do stuff - maybe you want to store the activeIndex
scope.indexIReallyCareAbout = slider.activeIndex;
});
The Swiper API gives a list of events that can named in the 'on' callback function under the header Callbacks
When using the WorkList (and even Master-detail) templates you have the following event in the onInit function:
oTable.attachEventOnce("updateFinished", function() {
// Restore original busy indicator delay for worklist's table
oViewModel.setProperty("/tableBusyDelay", iOriginalBusyDelay);
});
In the view.xml you also have the eventHandler for updateFinished which you can set, so that you are able to do stuff when the data is received in your list.
In the PlanningCalendar you don't have such an eventhandler, how do we handle these kind of things for such a component?
The logic I'm trying to implement is the following:
<PlanningCalendar
id="PC1"
rows="{
path: '/DeveloperSet'
}"
viewKey="Day"
busyIndicatorDelay="{planningView>/calendarBusyDelay}"
noDataText="{planningView>/calendarNoDataText}"
appointmentSelect="onAppointmentSelect"
rowSelectionChange="onDeveloperRowChange"
startDateChange="onStartDateChange">
<toolbarContent>
<Title
text="Title"
titleStyle="H4" />
<ToolbarSpacer />
<Button
id="bLegend"
icon="sap-icon://legend"
type="Transparant"
press="onShowlegend" />
</toolbarContent>
<rows>
<PlanningCalendarRow
icon="{Pic}"
title="{Name}"
text="{Role}" />
</rows>
</PlanningCalendar>
I want to load and add the "appointments" only for the visible part (filter on start and endDate) of the calendar, so I want to perform the oDataModel.read-calls myself. But the rows (the DeveloperSet) should always remain the same. So I should be able to "wait" until the calendar has the data/rows filled in the calendar and then do my manual calls to retrieve the appointments.
So I need to be able to do something when the data is retrieved, but there is no updateFinished event for a calendar?
Does anybody have an idea on how to solve this?
the event "updateFinished" when used in the Table or List is triggered from method updateList, this method handles the update of aggregation "list"
PlanningCalendar does not have an updateRows method, therefore no event "updateFinished"
You could listen to the dataReceived event on the Row binding, if you have one
OnInit: function(){
...
this.oPlanningCalendar = this.byId("PC1")
var oBinding = oPlanningCalendar.getBinding("rows");
oBinding.attachDataReceived(this.fnDataReceived, this);
else you can extend the control and add your own updateRows method and fire "updateFinished", the hack test below shows it would work
OnInit: function(){
...
this.oPlanningCalendar = this.byId("PC1");
this.oPlanningCalendar.updateRows = function(sReason) {
this.oPlanningCalendar.updateAggregation("rows");
var oBinding = this.oPlanningCalendar.getBinding("rows");
if (oBinding) {
jQuery.sap.log.info("max rows = " + oBinding.getLength() || 0);
}
}.bind(this);
Here is the zul file for reference
<?page title="MVVM Tree POC"?>
<zk>
<borderlayout height="800px">
<west size="25%"></west>
<center>
<window apply="org.zkoss.bind.BindComposer"
viewModel="#id('vm') #init('com.nagarro.viewmodel.TreeViewModel')"
title="Dynamic Tree" border="normal">
<tree checkmark="true" model="#bind(vm.treeModel)"
onSelect="#command('select')" >
<template name="model" var="node" status="s">
<treeitem checkable="#load(node.checkable)"
open="true">
<treerow style="text-align:center;">
<treecell
label="#bind(node.data.firstName)" style="text-align:left;">
</treecell>
</treerow>
</treeitem>
</template>
</tree>
</window>
</center>
</borderlayout>
</zk>
There is a "onSelect" event in the tree tag and there are checkboxes for some treeItems only. Now, I want to create certain components like a combobox for the corresponding tree row when its checkbox is selected. I am trying to do it with the onSelect event of the tree but the problem is I need to pass the reference of the selected checkbox which I am unable to pass as the onSelect event is kept outside the scope of the template through which treeItems are getting rendered.
Is there any other way out to do what I want
This is the page which I get through the above zul file.
I want to know which checkbox is selected ?
You can pass any parameter on every event like that (from ZK docs):
<button label="Delete" onClick="#command('delete', item=item)"/>
and use this parameter in your java code:
#Command
public void delete(#BindingParam("item") Item item ) {
//do some stuff based on what item you've picked
}
In your case I would move onSelect-Event from Tree-Component to Treeitem, like this:
<tree checkmark="true" model="#bind(vm.treeModel)">
<template name="model" var="node" status="s">
<treeitem checkable="#load(node.checkable)"
open="true" onSelect="#command('select', nameParameter=node.data.firstName">
<treerow style="text-align:center;">
<treecell
label="#bind(node.data.firstName)" style="text-align:left;">
</treecell>
</treerow>
</treeitem>
</template>
</tree>
and use parameter in your #Command-method:
#Command
public void select(#BindingParam("nameParameter") String nameParameter ) {
System.out.println(nameParameter + " selected");
}
See ZK MVVM > Advance > Parameter Docs for more information
This is an issue I often run into. My solution has always been to attach data to the component itself; keep a database entity's id or an object itself on the checkbox for retrieval during the event.
checkbox.setAttribute("myAttributeName", myAttributeValue);
This requires a cast to retrieve, which is unfortunate, but with some best practices you can do so confidently.
Here is my code:
function MainCtrl($scope) {
$scope.thisarray = globalObj;
$scope.loadthis = function (index) {
return thisarray[index];
}
}
Here is the markup:
<table ng-controller="MainCtrl">
<tr>
<td ng-repeat="element in thisarray">
{{loadthis($index)}}
</td>
</tr>
</table>
I'm loading some data through a SOAP callback:
SOAPCLient.invoke(url, methodName, pl, true, function(obj) {globalObj = obj;
**angular.bootstrap("html");**//here is where I try to reinitialize the app
});
If you look at the SOAP call, I use bootstrap to reinitialize the app, but it has not been working. loadthis does not display any data inside the HTML table. Can anyone help me here?
You could listen for changes to the SOAP using $.watch and then $.apply when trying to force a push. See examples of how to use here
You should not be re-initializing AngularJS application every time you've got data arriving from an external source. Instead of destroying and re-creating AngularJS the way to go would be to use $apply method on a scope object.
The pseudo-code (in your controller) would be like:
SOAPCLient.invoke(url, methodName, pl, true, function(obj) {
$scope.apply(function(){
$scope.thisarray = obj;
});
});
Also, if I understand your code correctly you would invoke a SOAP call for each item in a repeater (ng-repeat) while your SOAP call is bringing back data for all objects. So the better approach would be to do a SOAP call (as in a snippet above), assign data to a variable in a scope and let the ngRepeat do its magic.
I might be misunderstanding what you are trying to achieve here so having a jsFiddle / plunker with your code would help to provide more detailed response.