I have a problem with displaying the reportviewer on the page under the platform DNN 7. Element is not visible but is initialized and loaded on the page.
MS VS2103.
Code of reportviewer
<tr>
<td style="vertical-align: top; width: 25%; height: 400px; display: none;"><div style="width:100%;height:100%;">
<span id="dnn_ctr1387_View_ReportViewer1_DocMap"><div id="dnn_ctr1387_View_ReportViewer1_ctl08" style="display:none;">
<input type="hidden" name="dnn$ctr1387$View$ReportViewer1$ctl08$ClientClickedId" id="dnn_ctr1387_View_ReportViewer1_ctl08_ClientClickedId">
</div></span>
</div></td><td style="display: none; width: 4px; padding: 0px; margin: 0px; height: 400px; vertical-align: middle; background-color: rgb(236, 233, 216);"><div id="dnn_ctr1387_View_ReportViewer1_ctl07">
<input type="image" name="dnn$ctr1387$View$ReportViewer1$ctl07$img" id="dnn_ctr1387_View_ReportViewer1_ctl07_img" title="Show / Hide Document Map" src="/Reserved.ReportViewerWebControl.axd?OpType=Resource&Version=11.0.3452.0&Name=Microsoft.Reporting.WebForms.Icons.SplitterVertCollapse.png" alt="Show / Hide Document Map" align="top" onclick="void(0);" style="cursor:pointer;"><input type="hidden" name="dnn$ctr1387$View$ReportViewer1$ctl07$store" id="dnn_ctr1387_View_ReportViewer1_ctl07_store"><input type="hidden" name="dnn$ctr1387$View$ReportViewer1$ctl07$collapse" id="dnn_ctr1387_View_ReportViewer1_ctl07_collapse" value="false">
</div></td><td style="height: 400px; vertical-align: top;"><div id="dnn_ctr1387_View_ReportViewer1_ctl09" style="height:100%;width:100%;overflow:auto;position:relative;">
<div id="VisibleReportContentdnn_ctr1387_View_ReportViewer1_ctl09" style="height:100%;display:none;"></div><div id="dnn_ctr1387_View_ReportViewer1_ctl09_ReportArea">
<div newcontenttype="Microsoft.Reporting.WebFormsClient.ReportAreaContent.None" fornonreportcontentarea="false" id="dnn_ctr1387_View_ReportViewer1_ctl09_VisibilityState" style="visibility:none;">
<input type="hidden" name="dnn$ctr1387$View$ReportViewer1$ctl09$VisibilityState$ctl00" value="None">
</div><input type="hidden" name="dnn$ctr1387$View$ReportViewer1$ctl09$ScrollPosition" id="dnn_ctr1387_View_ReportViewer1_ctl09_ScrollPosition"><span id="dnn_ctr1387_View_ReportViewer1_ctl09_Reserved_AsyncLoadTarget"></span><div id="dnn_ctr1387_View_ReportViewer1_ctl09_ReportControl" style="display:none;">
<span></span><input type="hidden" name="dnn$ctr1387$View$ReportViewer1$ctl09$ReportControl$ctl02"><input type="hidden" name="dnn$ctr1387$View$ReportViewer1$ctl09$ReportControl$ctl03"><input type="hidden" name="dnn$ctr1387$View$ReportViewer1$ctl09$ReportControl$ctl04" id="dnn_ctr1387_View_ReportViewer1_ctl09_ReportControl_ctl04" value="100">
</div><div id="dnn_ctr1387_View_ReportViewer1_ctl09_NonReportContent" style="height: 100%; width: 100%; display: none;">
</div>
</div>
</div></td>
</tr>
You'll want to track down why DISPLAY:NONE is set in the Style for the viewer. Did you perhaps not bind any data to it?
Related
i want to test a combobox (react-select) with cypress, i got this error, can anyone help me in that? or is there another way to choose an option from the react-select combobox and test it?
Timed out retrying after 4000ms: expected '<input#Land>' to have value 'Angola', but the value was ''
<div class=" css-1kszcc2-container">
<span id="react-select-2-live-region" class="css-1f43avz-a11yText-A11yText"></span>
<span aria-live="polite" aria-atomic="false" aria-relevant="additions text" class="css-1f43avz-a11yText-A11yText"></span>
<div class=" css-1oa51g-control">
<div class=" css-k02lgv-ValueContainer">
<div class=" css-1cgt3sd-placeholder">Land</div>
<div class=" css-aic2ap-singleValue">Angola</div>
<div class=" css-6j8wv5-Input" data-value="">
<input class="" autocapitalize="none" autocomplete="off" autocorrect="off" id="Land" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" aria-controls="react-select-2-listbox" aria-owns="react-select-2-listbox" role="combobox" value="" style="color: inherit; background: 0px center; opacity: 0; width: 100%; grid-area: 1 / 2 / auto / auto; font: inherit; min-width: 2px; border: 0px; margin: 0px; outline: 0px; padding: 0px;">
</div>
</div>
</div>
</div>
onSubmitFormData.submitFirstFormData('Angola')
submitFirstFormData(land){
cy.get("[id^=Land]").type(land+"{enter}{enter}").should('have.value',land);
}
Reselect the input for the assertion. If there's a slow(ish) event handler, the way you have .should() chained off .type() my not be retrying the .get().
cy.get("[id^=Land]").type(land+"{enter}{enter}")
cy.get("[id^=Land]").should('have.value',land)
<th style="position: relative; top: 0px;">
<div style="width: 48.003906px;" data-lngst="nullpx" data-ndx="2">123</div></th>
<th id="" class="abc_naem" nowrap="" style="position: relative; top: 0px;">
<div style="width: 44.003906px;" data-lngst="nullpx" data-ndx="4">...</div>
<th style="position: relative; top: 0px;">
<div style="width: 48.003906px;" data-lngst="nullpx" data-ndx="5">123</div></th>
<th id="" class="abc_phase" nowrap="" style="position: relative; top: 0px;">
<div style="width: 44.003906px;" data-lngst="nullpx" data-ndx="3">...</div>
how do I select all 'th' element using css selectors that do not have a classname? All the 'th' elements have exactly the same attributes except classname and I need the ones without it. I tried th[classname=''] and that does not do the trick. I tried all the css selection options like 'no-child' etc, still it always returns all th elements
Assuming your HTML is properly formed, you can use :not() with the attribute selector []. Ex th:not([class])
Example:
th:not([class]) {
color: red;
}
<table>
<tr>
<th style="position: relative; top: 0px;">
<div style="width: 48.003906px;" data-lngst="nullpx" data-ndx="2">123</div>
</th>
<th id="" class="abc_naem" nowrap="" style="position: relative; top: 0px;">
<div style="width: 44.003906px;" data-lngst="nullpx" data-ndx="4">123</div>
<th style="position: relative; top: 0px;">
<div style="width: 48.003906px;" data-lngst="nullpx" data-ndx="5">123</div>
</th>
<th id="" class="abc_phase" nowrap="" style="position: relative; top: 0px;">
<div style="width: 44.003906px;" data-lngst="nullpx" data-ndx="3">123</div>
</th>
</tr>
</table>
Need to open a pop-up along with cell data from DB based on the type on on ag-grid table by using the survey tag id?
I can able to fetch the survey tag id
emoji = () =>{
isPopup()=true;
}
onCellClicked = event => {
console.log(event);
let tag = event.data.survey_tag_id;
console.log(tag);
const column = event.colDef;
if (column.headerName === "emoji" ){
this.emoji();
}else{
this.showNotification("clicked", "success");
}
console.log(
"onCellClicked: " + event.data.name + ", col " + event.colIndex
);
};
maybe this answer can help, but this applies in angular sorry if you can not translate it into the react
parent.html
<div >
<ag-grid-angular
style="width: 100%; height: 750px; border-radius: 5px; text-align: left;"
class="ag-theme-balham-dark"
[rowData]="rowData"
[columnDefs]="columnDefs"
[enableFilter]="true"
[enableSorting]="true"
[defaultColDef]="defaultColDef"
[rowSelection]="rowSelection"
[animateRows]="true"
[enableStatusBar]="true"
[enableColResize]="true"
[enableRangeSelection]="true"
[alwaysShowStatusBar]="false"
(gridReady)="onGridReady($event)"
(cellClicked)="onCellClicked($event)"
>
</ag-grid-angular>
</div>
parent.ts
graphAlarm(apn:any): void {
const dialogRef = this.dialog.open(graphAlarm, {
width: '1000px',
height: '700px',
data : apn,
});
dialogRef.afterClosed().subscribe(result => {
});
}
onCellClicked(event){
this.graphAlarm(event)
console.log('get dialog : ',event.data)
}
in this part pop up or dialog in angular material graphAlarm child/part from file parent
graphAlarm.ts
#Component({
selector: 'graph-alarm',
templateUrl: '
<div>
<div class="row">
<div class="row col-sm-8">
<div class="col">
{{name.kpi}}
</div>
<div class="col">
<mat-icon>help</mat-icon>
</button>
</div>
</div>
<div class="col-sm-4">
<button style="border-radius: 10px; background-color: #044c94;color: white" (click)="sendChangeThreshold()">
save
</button>
</div>
</div>
<div class="row">
<div class="col-sm-8" style="border-radius: 10px;">
<div class="row" style="font-size: 12px; ">
<table id="table" mat-table [dataSource]="dataSource.nameKPI" class="mat-elevation-z8"
style="width: 100%; background-color: #230162; color: white;">
<!-- Position Column -->
<ng-container matColumnDef="header">
<th mat-header-cell *matHeaderCellDef style="color: white;"> KPI</th>
<td mat-cell *matCellDef="let element" style="color: white;"> {{element.header}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="threshold_up">
<th mat-header-cell *matHeaderCellDef style="color: white; text-align: center;"> Threshold Up | 4G</th>
<td mat-cell *matCellDef="let element">
<input *ngIf="element.threshold_up && element.header != 'Throughput'"
(change)="save(element.header,'up',thresholdUp.value)"
style="width: 150px; border-radius: 15px; text-align: center; background-color: #230162; color: white;"
ngModel="{{element.threshold_up}}" #thresholdUp>
<input *ngIf="element.threshold_up && element.header == 'Throughput'"
style="width: 150px; border-radius: 15px; text-align: center; background-color: #230162; color: white;"
ngModel="{{element.threshold_up}}" disabled>
<input *ngIf="element.threshold_up_4g"
(change)="save(element.header,'4g up',thresholdUp4G.value)"
style="width: 150px; border-radius: 15px; text-align: center; background-color: #230162; color: white;"
ngModel="{{element.threshold_up_4g}}" #thresholdUp4G>
<!-- (input)="onSearchChange($event.target.value)">-->
</td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="threshold_down">
<th mat-header-cell *matHeaderCellDef style="color: white; text-align: center;"> Threshold Down | 4G</th>
<td mat-cell *matCellDef="let element">
<input *ngIf="element.threshold_down && element.header != 'Throughput'"
(change)="save(element.header,'low',thresholdDown.value)"
style="width: 150px; border-radius: 15px; text-align: center; background-color: #230162; color: white;"
ngModel="{{element.threshold_down}}" #thresholdDown>
<!-- (input)="onSearchChange($event.target.value)">-->
<input *ngIf="element.threshold_down && element.header == 'Throughput'"
style="width: 150px; border-radius: 15px; text-align: center; background-color: #230162; color: white;"
ngModel="{{element.threshold_down}}" disabled>
<input *ngIf="element.threshold_down_4g"
(change)="save(element.header,'4g low',threshold4GDown.value)"
style="width: 150px; border-radius: 15px; text-align: center; background-color: #230162; color: white;"
ngModel="{{element.threshold_down_4g}}" #threshold4GDown>
<!-- (input)="onSearchChange($event.target.value)">-->
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
</div>
<div class="col-sm-4" style="border-radius: 10px; padding-top: 15px; text-align: center;">
<div class="box_down">
<div class="material-icons" style="font-size: 100px;">note_add</div>
<input style="padding-bottom: 10px;font-size: 10px;" type="file" (change)="fileChange($event)"
placeholder="Upload file" accept=".pdf,.doc,.docx">
<div class="listFile">
list file
</div>
</div>
<br>
<div class="box_down1">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Alarm Triggered</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck2">
<label class="custom-control-label" for="customCheck1">Telegram Bot Alarm</label>
</div>
</div>
</div>
</div>
</div>
',
styleUrls: ['graph-alarm.scss'],
animations: [
trigger('detailExpand', [
state('collapsed', style({height: '0px', minHeight: '0'})),
state('expanded', style({height: '*'})),
transition(
'expanded <=> collapsed',
animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')
)
])
]
})
export class graphAlarm implements OnInit {
constructor(
public apn_service: ApnDashboardService,
private _snackBar: MatSnackBar,
public dialogRef: MatDialogRef<graphAlarm>,
#Inject(MAT_DIALOG_DATA) public selected_apn: any,
) {
console.log('anu tour', selected_apn.nameKPI);
this.dataSource = selected_apn;
this.kpi_threshold_up = selected_apn.threshold_up;
}
ngOnInit() {
}
onNoClick(): void {
this.dialogRef.close();
}
}
This is my HTML:
<div ng-repeat="product in productsCurrency"
value="{{product}}"
style="margin-bottom: 0px;">
<div style="display: inline-flex; width: calc(100% - 10px);margin-bottom: 0px;height: 90px; padding-left: 10px !important;"
class="row"
ng-class="{'beacon_shipping_selected': $root.shippingMethod == (product.id + ''),
'beacon_padding_bottom': $root.isUsingDevice}">
<input checked
id="{{product.id}}"
type="radio"
name="shipping_method"
value="{{product.id}}"
ng-model="$root.shippingMethod"
style="align-self: center;">
<label for="{{product.id}}"
ng-class="{'beacon_margin_left': $root.isUsingDevice === false}"
style="margin-top: 28px; margin-left: 5px;">
</label>
<span style="margin-left: 10px; width: calc(100% - 120px);margin-bottom: 20px;">
<p class="beacon_text beacon_text_title beacon_shipping_title" style="font-weight: 400 !important;">
{{ product.name}}
</p>
<p class="beacon_text beacon_shipping_subtitle">
{{ product.description}}
</p>
</span>
<span class="beacon_text beacon_sum beacon_shipping_sum"
ng-class="{'beacon_shipping_sum_selected': $root.shippingMethod == (product.id + ''),
'beacon_sum_mobile': $root.isUsingDevice}">
{{unit.currencySymbol(product.currency) + roundPrice(product.price,1)}}
</span>
</div>
<div style="width: 100%; height: 1px; background: #979797;"
ng-class="{'beacon_remove_margin_divider': $root.isUsingDevice === false}">
</div>
</div>
I am using AngularJS and it goes through a list of products, and creates a div (view) for all of them.
Now I want the <input> that I have included in the div, to be selected when the user pressed on the view. How can I achieve this?
This is actually simple to achieve. You can use label for every product row and put content inside it as shown below.
It seems that you're trying to adjust a lot to create a product row with inline CSS styles. I suggest that you use CSS flexbox properties to achieve a predictable layout without doing a lot of width, height, margin related properties, only if you need further help on this.
angular.module('ExampleApp', [])
.controller('ExampleController', function($scope) {
console.log('ExampleController');
$scope.productsCurrency = [
{
id: 1,
name: 'Product 1'
},
{
id: 2,
name: 'Product 2'
},
{
id: 3,
name: 'Product 3'
}
]
});
.layout,
.layout-row,
.layout-column {
display: flex;
}
.layout-row {
flex-direction: row;
}
.layout-column {
flex-direction: column;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp" ng-controller="ExampleController">
<div ng-repeat="product in productsCurrency"
value="{{product}}"
style="margin-bottom: 0px;">
<label for="{{product.id}}" style="display: inline-flex; width: calc(100% - 10px);margin-bottom: 0px;height: 90px; padding-left: 10px !important;"
class="row"
ng-class="{'beacon_shipping_selected': $root.shippingMethod == (product.id + ''),
'beacon_padding_bottom': $root.isUsingDevice}">
<input checked
id="{{product.id}}"
type="radio"
name="shipping_method"
value="{{product.id}}"
ng-model="$root.shippingMethod"
style="align-self: center;">
<div for="{{product.id}}"
ng-class="{'beacon_margin_left': $root.isUsingDevice === false}"
style="margin-top: 28px; margin-left: 5px;">
</div>
<span style="margin-left: 10px; width: calc(100% - 120px);margin-bottom: 20px;">
<p class="beacon_text beacon_text_title beacon_shipping_title" style="font-weight: 400 !important;">
{{ product.name}}
</p>
<p class="beacon_text beacon_shipping_subtitle">
{{ product.description}}
</p>
</span>
<span class="beacon_text beacon_sum beacon_shipping_sum"
ng-class="{'beacon_shipping_sum_selected': $root.shippingMethod == (product.id + ''),
'beacon_sum_mobile': $root.isUsingDevice}">
{{unit.currencySymbol(product.currency) + roundPrice(product.price,1)}}
</span>
</label>
<div style="width: 100%; height: 1px; background: #979797;"
ng-class="{'beacon_remove_margin_divider': $root.isUsingDevice === false}">
</div>
</div>
</div>
I used a ng-click on the div like this:
HTML:
<div style="display: inline-flex; width: calc(100% - 10px);margin-bottom: 0px;height: 90px; padding-left: 10px !important;" class="row" ng-class="{'beacon_shipping_selected': $root.shippingMethod == (product.id + ''), 'beacon_padding_bottom': $root.isUsingDevice}" ng-click="selectInput(product.id)">
JS:
$scope.selectInput = function(input) {
$rootScope.shippingMethod = input;
};
My input watches $rootScope.shippingMethod, so it will change accordingly
I have a filter working on the multi select but when I try what I saw on the following link it doesn't work:
https://docs.angularjs.org/api/ng/filter/orderBy
How do I get the sort to change by clicking on the glyphicon?
<div>
<label>Available</label>
<label style="float: right; position: relative; left: 141px;">Assigned</label><br />
<input type="text" ng-model="filterText" style="width: 50px; position: relative; left:-36px;"/>
<button style="position: relative; left: -30px;">Filter</button>
<div style="position: relative; top: 0px; left: 311px; float: left;">
<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
<span class="glyphicon glyphicon-sort-by-attributes"></span>
</div>
<br />
<select id="available-groups" multiple>
<option value="{{group._id}}" ng-repeat="group in rbacGroups | filter:filterText">{{group.name}}</option>
</select>
<button id="addGroup" style="position: relative; top: -72px; left: 21px;">Add »</button><br />
<button id="removeGroup" style="position: relative; top: -72px; left: 375px;">« Remove</button>
<br />
<select id="assigned-groups" ng-model="cgroups" multiple required="required">
</select>
</div>
Change
ng-repeat="group in rbacGroups | filter:filterText"
to
ng-repeat="group in rbacGroups | filter:filterText | orderBy:'name':reverse"
and also change
<a href="" ng-click="reverse=!reverse;order('name', reverse)">...
<a href="" ng-click="reverse=!reverse;order('name', reverse)">...
to
<a href="" ng-click="reverse=false">...
<a href="" ng-click="reverse=true">...