I am for last 2 days i am stuck in this error in rdlc. I have gone through most of the pages showing solution for this but still I didn't got the solution. I am passing parametes from main report to sub report also checked weather type of parameter is correct in both reports, I have also added the following codes
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
rptViewer.LocalReport.EnableHyperlinks = true;
}
rptViewer.LocalReport.SubreportProcessing += new
SubreportProcessingEventHandler(SetSubDataSource);
this.rptViewer.LocalReport.Refresh();
}
public void SetSubDataSource(object sender, SubreportProcessingEventArgs e)
{
e.DataSources.Add(new ReportDataSource("testDs", "test_Ds"));
}
where testDs is my dataset for Subreport and test_Ds is the DataSource for the subreport I am not quite sure on the last part whether it is correct or wrong. Please help me out
<form id="form1" runat="server">
<div style="width: 100%; height: 100%; padding: 05px 0px 5px 100px;">
<rsweb:ReportViewer ID="rptViewer" runat="server" SizeToReportContent="True" EnableHyperlinks="True" HyperlinkTarget="_blank" BackColor="#33ccff" BorderColor="Tomato"></rsweb:ReportViewer>
</div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
this is what i added in aspx page
Related
I am using Selenium webdriver using Cucumber.
I have clicked a button which open up a popup box, containing few web elements within it. I need to perform few validations in this pop up box. But once the overlay popup is displayed, I am not able to validate it using isDisplayed.
In the console, it display a Error message - java.lang.NullPointerException but I am not passing any value in any variable to validate this popup box.
My script is as below:
public static void Popupbox() {
searchbox = (Application_Pagexpath.popupboxheader).isDisplayed();
try{
Thread.sleep(100);
}catch(InterruptedException e){
e.printStackTrace(); }
if(searchbox = True) {
System.out.println("Popup is displayed"); }
}
The xpaths I am using are correct and these work fine in the firebug. Can you help me understand why I am seeing the Null pointer exception error and why Selenium is not able to validate this overlay popup.
The HTML for the overlay popup is as below:
div id="_paymentHistoryPortlet_WAR_EBillingWebportlet_:paybillHtyForm:dvAdvSearchOverlay" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-shadow ebillingAdvFltrOverlay ui-draggable ui-overlay-visible" style="width: auto; height: auto; left: 227.7px; top: 0px; visibility: visible; z-index: 1001;" role="dialog" aria-labelledby="_paymentHistoryPortlet_WAR_EBillingWebportlet_:paybillHtyForm:dvAdvSearchOverlay_title" aria-hidden="false" aria-live="polite"
div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top"
div class="ui-dialog-content ui-widget-content" style="height: auto;"
I just created my fist dropdown, so far so good. the dropdown opens. Below the dropdown button is text and images in a container.
When i click the dropdown button, the list is behind the text and images that is in the container. How do I bring the dropdown list to the foreground?
<td bgcolor="white" height="50">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"><FONT face="Verdana" color=#026991 size=2><b>Onze diensten</b></button>
<div id="myDropdown" class="dropdown-content">
<b>Link 1</b>
<b>Link 2</b>
<b>Link 3</b>
<b>Link 4</b>
<b>Link 5</b>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.contains('show');
}
}
}
}
</script>
CSS:
/* Dropdown Button */
.dropbtn {
background-color: white;
color: #026991;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: white;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: #026991;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: white}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
Try changing your HTML like this. `
<td bgcolor="white" height="50">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"><FONT face="Verdana" color=#026991 size=2><b>Onze diensten</b></button>
<div id="myDropdown" class="dropdown-content">
<select>
<option href="#"><b>Link 1</b></option>
<option href="#"><b>Link 2</b></option>
<option href="#"><b>Link 3</b></option>
<option href="#"><b>Link 4</b></option>
<option href="#"><b>Link 5</b></option>
</select>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.contains('show');
}
}
}
}
</script>
`
And also note that in the code you have posted here. You haven't mentioned where your CSS is. you can add that by
<link rel="stylesheet" href="styles.css">
.
Ok. After reading your comments I understood what are your requirements clearly. Then I did a little bit research on "Expand dropdown programmatically in html" . Then I read following stackoverflow question and answersQ1 , Q2. Most of the contributors to those answers have mentioned that there is no way to do that in HTML. Provided code examples were also not working. (Complaints can be seen on comments also). Then I came up with the method below to fulfill your two requirements. Though it uses buttons to show dropdown , it works as a normal HTML dropdown. The only problem is that you have to keep enough space below the button so that Expansion does not affect other html elements in the design.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
var val=document.getElementById("btn1").value;
if(val=="0"){
document.getElementById("btn1").value=1;
a
jQuery('#content').toggle('show');
}
else{
document.getElementById("btn1").value=0;
jQuery('#content').toggle('hide');
document.getElementById("btn1").value=0;
}
});
});
</script>
</head>
<body>
<div name="drop-down">
<button id="btn1" value="1">Show/Hide</button>
<div id="content" hidden>
<button id="btn11" value="0">Link1</button>
</br>
<button id="btn12" value="0">Link2</button>
</br>
<button id="btn13" value="0">Link3</button>
</br>
<button id="btn14" value="0">Link4</button>
</br>
</div>
</div>
<p id="demo"></p>
</body>
</html>
I have a solution for you that is in CSS3.
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 4;
}
"z-index" is basically what layer that one thing is.
I am creating a Pinterest like layout in ASP.NET webform and I followed following two tutorials
Creating Pinetrest like Layout in ASP.NET
How to use Masonry
However, I made changes in the first tutorial based on second and I am getting below output
Clearly, this isn't what I was looking. The gap between two rows and columns is high.
Below is my code:
<
style type="text/css">
body
{
background-color:#EEEEEE;
}
#imgLoad
{
position:fixed;
bottom:0;
left:40%;
display:none;
}
.item {
width: 220px;
margin: 10px;
float: left;
background-color:honeydew;
}
</style>
<div id="container" class="transitions-enabled infinite-scroll clearfix">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="item">
<img src="<%# Eval("Url") %>" />
<p><%# Eval("Description") %></p>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
How do I fix it?
I believe this is related to the height, may be the row height of repeater control takes the highest among the column.
I did tried to do it with ASp.NET MVC
Controller
IEnumerable<Product> model = ProductRepository.GetData(1, 25);
return View(model);
View
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style type="text/css">
.item {
width: 220px;
margin: 5px;
float: left;
background-color:honeydew;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/Mansory.js" type="text/javascript"></script>
<script type="text/javascript">
var $container = $('#container');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector: '.item',
columnWidth: 100,
isAnimated: false
});
});
</script>
#foreach (var item in Model) {
<div class="item">
<img src="#(item.Url)" />
#Html.DisplayFor(modelItem => item.Description)
</div>
}
but same result
EDIT 1
I have changed my script to
<script type="text/javascript">
$(function () {
var $container = $('#container');
$container.masonry({
itemSelector: '.item',
columnWidth: 240,
isAnimated: false
});
});
</script>
and code to
#foreach (var item in Model) {
<div id="container">
<div class="item">
<img src="#(item.Url)" />
#Html.DisplayFor(modelItem => item.Description)
</div>
</div>
}
but same result
Ok, a few things:
You have spelled "Masonry" wrong when initializing the script
Put a div with Id "container" around your items list
In stead of using $container.imagesLoaded make the whole javascript section run when page is loaded
Like this:
$(function(){
var $container = $('#container');
$container.masonry({
itemSelector: '.item',
columnWidth: 240,
isAnimated: false
});
});
Then it should work.
This is small library which implements Pinterest layout. Filling the grid goes from left to right. Count of columns can be customized in config for each resolution. Columns adaptive changes on resize. Image can be at up or down of pin.
https://github.com/yury-egorenkov/pins-grid
My application has an address field, which I want an autocomplete (updates as user types, displays below the entry field) for using the Google Places Autocomplete API. Now, I've seen gems which autocomplete words based on fields in a model, which wont work for me, since I can't store all the addresses on google places locally.
I've also tried a google_places_autocomplete gem which returns a list of suggestions when given an input string to autocomplete, but I don't know how to dynamically update the list as the input changes and present it in a nice format.
Can someone please give me an overview of which gems I should use and how I should go about doing this? I can display autocomplete suggestions using predefined addresses with the google_places_autcomplete gem which should mean I don't need to manually parse JSON.
you can do it directly on the view via Google Places javascript library.
Check out this example:
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Address Form</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
function initialize() {
// Create the autocomplete object, restricting the search
// to geographical location types.
autocomplete = new google.maps.places.Autocomplete(
/** #type {HTMLInputElement} */(document.getElementById('autocomplete')),
{ types: ['geocode'] });
// When the user selects an address from the dropdown,
// populate the address fields in the form.
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInAddress();
});
}
// [START region_fillform]
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
// [END region_fillform]
// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,
geolocation));
});
}
}
// [END region_geolocation]
</script>
<style>
#locationField, #controls {
position: relative;
width: 480px;
}
#autocomplete {
position: absolute;
top: 0px;
left: 0px;
width: 99%;
}
.label {
text-align: right;
font-weight: bold;
width: 100px;
color: #303030;
}
#address {
border: 1px solid #000090;
background-color: #f0f0ff;
width: 480px;
padding-right: 2px;
}
#address td {
font-size: 10pt;
}
.field {
width: 99%;
}
.slimField {
width: 80px;
}
.wideField {
width: 200px;
}
#locationField {
height: 20px;
margin-bottom: 2px;
}
</style>
</head>
<body onload="initialize()">
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address"
onFocus="geolocate()" type="text"></input>
</div>
<table id="address">
<tr>
<td class="label">Street address</td>
<td class="slimField"><input class="field" id="street_number"
disabled="true"></input></td>
<td class="wideField" colspan="2"><input class="field" id="route"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">City</td>
<td class="wideField" colspan="3"><input class="field" id="locality"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">State</td>
<td class="slimField"><input class="field"
id="administrative_area_level_1" disabled="true"></input></td>
<td class="label">Zip code</td>
<td class="wideField"><input class="field" id="postal_code"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">Country</td>
<td class="wideField" colspan="3"><input class="field"
id="country" disabled="true"></input></td>
</tr>
</table>
</body>
</html>
Source, with other examples:
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
I have like 10 aspx pages (junior_class_students1.aspx-...10.aspx). They all have the same master page in the back (class_students.master). Everytime i load a page i want the master page background-color to change, to the one that i can specify per page.
so ...students1.aspx then .master
...students2.aspx then .master
...students3.aspx then .master
how can this be achieved?
Keep in mind that content holders can go anywhere in the page. It's possible to do something like this:
<div style="background-color:<asp:ContentPlaceHolder id="divColor" runat="server" />"></div>
And then in your page have this:
<asp:Content ID="divColorContent" ContentPlaceHolderID="divColor" Runat="Server">green</asp:Content>
CSS classes.
You could place a div that fills the body inside on body and contentplaceholder.
Master Page
<body>
<asp:ContentPlaceHolder id="cph" runat="server" />
</body>
That div could have a uniuqe ID per page.
Cntent page
<asp:Content id="cnt" ContentPlaceHolderID="cph">
<div id="Page1" class="container">
<!--Page Content-->
</div>
</asp:Content>
Then CSS could be something like:
div.container
{
width: 100%;
height: 100%;
}
div#Page1
{
background-color: green;
}
div#Page2
{
background-color: blue;
}
...