I need to create a report using Report viewer. unfortunately, I haven't worked on Report viewer before. My SQL query accepts 3 parameters to fetch the data from SQL server. Query would be:
Select col1,col2,col3 from table1 where area='ddlselectedarea' and start_date='01-01-2016' and end_date='31-01-2016'
My UI would be:
<section id="content" class="has-btn-bar-btm-fixed"><!-- content -->
<form runat="server" class="form-horizontal custom-form row">
<div class="cost-transfer-block"><!-- cost-transfer-block -->
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-lg-10">
<h2>Dump by item</h2>
<div class="col-md-6">
<div class="form-group">
<asp:label runat="server" Text="From Site" ID="lblFromSite" class="control-label col-sm-3 col-md-3 col-lg-3" ></asp:label>
<div class="col-sm-9">
<div class="input-group">
<select class="form-control">
<asp:DropDownList ID="DdlFromsite" runat="server" ></asp:DropDownList>
</select>
<span class="input-group-addon"> </span>
</div>
</div>
</div>
</div>
<div class="col-md-6 cst-brd-left">
<div class="form-group">
<asp:label runat="server" Text="From Date" ID="lblFromDate" class="control-label col-sm-3 col-md-3 col-lg-3" ></asp:label>
<div class="col-sm-9 transferdate">
<div class="input-group date">
<input type="date" class="form-control" id="" placeholder="Select Date" >
<span class="input-group-addon"><img src="images/icon-add-on-2-date.png" alt="" /></span>
</div>
</div>
</div>
<div class="form-group">
<asp:label runat="server" Text="To Date" ID="lblToDate" class="control-label col-sm-3 col-md-3 col-lg-3" >To Date</asp:label>
<div class="col-sm-9 transferdate">
<div class="input-group date">
<input type="date" class="form-control" id="" placeholder="Select Date" >
<span class="input-group-addon"><img src="images/icon-add-on-2-date.png" alt="" /></span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2">
</div>
</div>
</div>
</div>
<!-- /cost-transfer-block -->
<%--<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<rsweb:ReportViewer ID="ReportViewer1" runat="server"></rsweb:ReportViewer>--%>
<div class="gray-btn-row clearfix">
<div class="btns-group">
<asp:button runat="server" Text="Enter" ID="btnEnter" class="btn btn-dark-blue"></asp:button>
</div>
</div>
</form>
</section>
Please guide me in designing a report using the reportviewer
The report viewer is a totally new component which needed to be designed using Report viewer or report viewer wizard. You can add any of them from the Add new items pane and bind a data table to that component.
I hope this helps others
Related
I have built a form in HTML 5 that is in a modal window and wrapped in Bootstrap and the layout is perfect. I have the need to use another modal window, however instead of the form being built in HTML 5 I need to place and iframe in the modal and display and asp form. I have wrapped everything identically in Bootstrap, but for some reason the label next to my form control displays on top and not next to. I'm stumped, I have played with CSS for two days now trying to figure out why. Thoughts?
HTML CODE FOR FORM THAT LAYS OUT PERFECT
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content" style="width:100%">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Observation Form</h4>
</div>
<div class="modal-body">
<form class="well form-horizontal" action=javascript:createNewObservation() method="post" id="observationForm">
<fieldset>
<!-- Form Name -->
<!-- Enter Building -->
<div class="form-group">
<label class="col-md-3 control-label">Building</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<select id="formBuilding" name="formBuilding" class="form-control selectpicker" required></select>
</div>
</div>
</div>
IMAGE FOR PERFECT LAYOUT
ASP CODE WRAPPED IN IFRAME THAT IS DISPLAYING IN MODAL
<form id="form1" runat="server" class="well form-horizontal">
<fieldset>
<legend>File Upload Form</legend>
<div class="form-group">
<label class="col-md-3 control-label">Choose File</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<asp:FileUpload class="form-control" ID="FileUpload1" runat="server" style="width:50%" />
</div>
</div>
</div>
<asp:HiddenField ID="site" runat="server" />
<asp:HiddenField ID="dateobserved" runat="server" />
<asp:HiddenField ID="guid" runat="server" />
<asp:HiddenField ID="username" runat="server" />
<asp:Button class="btn btn-primary pull-right" ID="Button1" runat="server" OnClick="Button1_Click" Text="Upload" />
</fieldset>
</form>
IMAGE FOR INCORRECT LAYOUT
To me it seems like you need to set a width to the iframe 'cause the modal size isn't changing. Try set width to 100% for the iframe
I have the below form that uses Bootstrap.
Everything seems to be working fine, until some of the fields have validation errors. When that happens, I make the feedback DIVs visible, which shifts the grid alignment.
I'm not sure what's causing this as my column sizes add up to under 12 per form-row, so they shouldn't be shifting to the next row. Any ideas would be great.
Thanks in advance.
Normal Layout
Shifted Layout (when there are validation errors)
Markup
<div class="account-options account-options-banking-details row" id="divBankingDetails" runat="server">
<hr />
<h1>Banking Details</h1>
<div class="account-options-banking-controls col-xs-10">
<div class="form-row">
<div class="form-group col-xs-5">
<label for="txtBankName">Bank Name</label>
<input type="text" class="form-control inputfield" id="txtBankName" runat="server">
<div class="invalid-feedback" id="divBankNameFeedback" runat="server" visible="false">
Required
</div>
</div>
<div class="form-group col-xs-5">
<label for="txtAccountType">Account Type</label>
<select class="form-control inputfield custom-select" ID="cboAccountType" runat="server">
<option Value="0">Choose...</option>
<option Value="1">Checking</option>
<option Value="2">Savings</option>
</select>
<div class="invalid-feedback" id="divAccountTypeFeedback" runat="server" visible="false">
Required
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-5">
<label for="txtBankAccountNumber">Bank Account Number</label>
<input class="form-control inputfield acct-number" name="BankAccountNumber" id="txtBankAccountNumber" runat="server">
<span toggle=".acct-number" class="fa fa-fw fa-eye field-icon toggle-account-number"></span>
<div class="invalid-feedback" id="divBankAccountNumberFeedback" runat="server" visible="false">
Required
</div>
</div>
<div class="form-group col-xs-5">
<label for="txtReenterBankAccountNumber">Re-enter Bank Account Number</label>
<input type="text" class="form-control inputfield" id="txtReenterBankAccountNumber" runat="server">
<div class="invalid-feedback" id="divReenterBankAccountNumberFeedback" runat="server" visible="false">
Required
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-5">
<label for="txtRoutingNumber">Routing Number</label>
<input type="text" class="form-control inputfield" id="txtRoutingNumber" runat="server">
<div class="invalid-feedback" id="divRoutingNumberFeedback" runat="server" visible="false">
Required
</div>
</div>
</div>
</div>
</div>
You should use .row instead of .form-row. .form-row is for Bootstrap 4
I am designing the form using Bootstrap. I wanted to remove the space between send inquiry to and company name.
I am getting the output as
Send inquiry to: companyname
countryname
I want the result as
Send Inquiry to:companyname
countryname
Code:
<div class="formmain">
<fieldset class="scheduler-border">
<legend class="scheduler-border">INQUIRY DETAILS</legend>
<div class="row">
<div class="form-group">
<%--<label class="control-label input-label" for="Send Inquiry">Send inquiry to:</label>--%>
<%-- <label class="control-label col-sm-2" for="Send Inquiry">Send inquiry to:</label>--%>
<%--<h3>Send inquiry to:</h3>--%>
<label class="control-label col-sm-2" for="usr">Send inquiry to:</label>
<div class="col-sm-10">
<asp:Label ID="lbCompanyname" runat="server" Text=""></asp:Label>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-sm-2 col-sm-offset-2">
<asp:Label ID="lbcountry" runat="server" Text=""></asp:Label>
</div>
</div>
</div>
</fieldset>
</div>
I know this is a basic question. I am new to Bootstrap. I tried by putting Padding Property but it didn't work for me.
Try this:
<label class="control-label col-sm-2" for="usr">Send inquiry to:</label>
<div style="display:inline-block; vertical-align:top">
<asp:Label ID="lbCompanyname" runat="server" Text=""></asp:Label><br />
<asp:Label ID="lbcountry" runat="server" Text=""></asp:Label>
</div>
I have a bootstrap form like the one below.
I want to make the width of that column to be 9 so in the left 3 I can add a button to the top-right of the textarea.
The form HTML is:
<div class="form-group">
<label>Compose Message</label>
<textarea class="form-control" rows="5" value="" />
</div>
I have tried using <div class="col-md-9"> and <div class="col-md-3"> but no success.
Any clue?
This should do the trick:
<div class="row">
<div class="col-md-9">
<div class="form-group">
<label>Compose Message</label>
<textarea class="form-control" rows="5" value="" />
</div>
</div>
<div class="col-md-3">
<button class="btn">Button</button>
</div>
</div>
I am trying to figure out how to line these two labels and inputs together. Will someone please tell me where I may be going wrong? I just want them to be lined up next to each other.
<div class="row">
<div class="col-lg-12">
<label for="gender_<cfoutput>#Add#</cfoutput>">Sex:</label>
<div class="form-group">
<div class="col-xs-4">
<cfinclude template="../ddl/gender.cfm">
</div>
</div>
</div>
<div class="col-lg-12">
<label for="driverlicense_<cfoutput>#Add#</cfoutput>" class="labelspace">Driver license number:</label><cfinclude template="../includes/tooltip.cfm">
<div class="form-group">
<div class="col-lg-1">
<cfoutput>
<cfinclude template="../ddl/dlstates.cfm"> <!--- If you need to re-insert into HTML and not use as include, then you have to correct the file location i.e(../../../) --->
</div>
<div class="col-lg-3">
<input type="text" class="form-control input-sm" name="driverlicense_#Add#" id="driverlicense_#Add#" validateat="onSubmit" validate="noblanks" maxlength="50" required="yes" value="#session.checkout.info["driverlicense_" & Add]#" />
</cfoutput>
<span id="result_<cfoutput>#Add#</cfoutput>"></span>
</div>
</div>
</div>
</div>
How do I put the Driver License Number on the same line as sex?
EDIT
Changing it to col-lg-6 puts them on the same line but they still end up looking like this? I am trying to have them not look so awful.
EDIT 2
<div class="row">
<div class="col-lg-5">
<label for="gender_<cfoutput>#Add#</cfoutput>">Sex:</label>
<div class="form-group">
<div class="col-lg-10">
<cfinclude template="../ddl/gender.cfm">
</div>
</div>
</div>
<div class="col-lg-7">
<label for="driverlicense_<cfoutput>#Add#</cfoutput>" class="labelspace">Driver license number:</label><cfinclude template="../includes/tooltip.cfm">
<div class="form-group">
<div class="col-lg-2">
<cfoutput>
<cfinclude template="../ddl/dlstates.cfm"> <!--- If you need to re-insert into HTML and not use as include, then you have to correct the file location i.e(../../../) --->
</div>
<div class="col-lg-5">
<input type="text" class="form-control input-sm" name="driverlicense_#Add#" id="driverlicense_#Add#" validateat="onSubmit" validate="noblanks" maxlength="50" required="yes" value="#session.checkout.info["driverlicense_" & Add]#" />
</cfoutput>
<span id="result_<cfoutput>#Add#</cfoutput>"></span>
</div>
</div>
</div>
</div>
How do I remove Driver license number more to the left to make it look better?
You should use col-lg-6 classes instead of col-lg-12 to enable these two elements to take 6-6 column. So they can fit into the very same row.
UPDATE:
<div class="row">
<div class="col-lg-4">
<label for="gender_<cfoutput>#Add#</cfoutput>">Sex:</label>
<div class="form-group">
<div class="col-xs-4">
<cfinclude template="../ddl/gender.cfm">
</div>
</div>
</div>
<div class="col-lg-8">
<label for="driverlicense_<cfoutput>#Add#</cfoutput>" class="labelspace">Driver license number:</label><cfinclude template="../includes/tooltip.cfm">
<div class="form-group">
<div class="col-lg-4">
<cfoutput>
<cfinclude template="../ddl/dlstates.cfm"> <!--- If you need to re-insert into HTML and not use as include, then you have to correct the file location i.e(../../../) --->
</div>
<div class="col-lg-4">
<input type="text" class="form-control input-sm" name="driverlicense_#Add#" id="driverlicense_#Add#" validateat="onSubmit" validate="noblanks" maxlength="50" required="yes" value="#session.checkout.info["driverlicense_" & Add]#" />
</cfoutput>
<span id="result_<cfoutput>#Add#</cfoutput>"></span>
</div>
</div>
</div>
They are both 12 columns wide. Try make them 6, hence half the size.