I am using SQL Server Reporting service for reports and displaying it with Report viewer control.
It is displaying the report on left side of the page. I want it to be center aligned.
I tried Following things but it didn't worked out.
Wrapping Report viewer control in div or table and make it center aligned.
Zoom mode of Report viewer Control.
So please give me some solution for making it center aligned.
Try like this:
<div align="center">
<rsweb:ReportViewer ID="ReportViewer1" runat="server" DocumentMapWidth="100%"
Font-Names="Verdana" Font-Size="8pt" PromptAreaCollapsed="True"
ShowToolBar="False" Width="1100px" Height="100%">
</rsweb:ReportViewer>
</div>
OR With JQUERY:
$('#ReportViewer1_fixedTable tbody tr').attr("align", "center");
OR Server-Side:
ReportPageSettings rst = rptVwr.LocalReport.GetDefaultPageSettings();
if (rptVwr.ParentForm.Width > rst.PaperSize.Width)
{
int vPad = (rptVwr.ParentForm.Width - rst.PaperSize.Width) / 2;
rptVwr.Padding = new Padding(vPad, 1, vPad, 1);
}
[Adjustment with heigh and width]
Hope its helpful.
Related
I'm working on an intranet with VS2019 and ASP .Net. Somewhere along the way a problem started where RDLC reports expand vertically beyond the designated size of the ReportViewer control. For example;
<asp:UpdatePanel ID="pnlPrint" runat="server">
<ContentTemplate>
<div>
<rsweb:ReportViewer ID="rvData" runat="server" Width="1000" Height="200px"></rsweb:ReportViewer>
</div>
</ContentTemplate>
</asp:UpdatePanel>
and I load the report with this:
ReportDataSource localDataSource;
rvData.Reset();
rvData.Visible = true;
rvData.ShowPrintButton = true;
rvData.ShowZoomControl = true;
rvData.ShowToolBar = true;
rvData.ShowExportControls = true;
rvData.ProcessingMode = ProcessingMode.Local;
rvData.LocalReport.ReportPath = Server.MapPath("~/Report/rptSafetyStockList.rdlc");
localDataSource = new ReportDataSource("DataSet1", (DataTable)theTable);
rvData.LocalReport.DataSources.Clear();
rvData.LocalReport.DataSources.Add(localDataSource);
rvData.LocalReport.SetParameters(new ReportParameter("PrintDate",
DateTime.Now.ToShortDateString() + ", " + DateTime.Now.ToShortTimeString()));
Before the report is loaded, the ReportViewer control is 1000x200 but after the report is loaded, it's vertical height is significantly longer and over flows controls below it.
Is anyone experiencing this? I think this came along with a Chrome update and the release of Edge. This intranet has some code dating back six or eight years and into the Win7 days.
<table>
<tr>
<td>
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</td>
<td>
<asp:GridView ID="GridView2" runat="server">
</asp:GridView>
</td>
</tr>
</table>
It is not working for me. Can someone please suggest a bootstrap class or anything that help? Thank you in advance
When we first start out, often we try and use a table layout and then dump things inside.
DON'T!!!
Just use a div, float it left. Put your grid or controls or whatever inside.
Want to then put more stuff to the right?
Drop in another div, float left.
So, if I wanted two grids, all side by side?
Then two divs, float left
you get this:
Or with markup, you get this:
And say you THEN want a combo box to the right of both?
drop in another div, float left again.
To start a new line, do this:
So, lets load up the two grids.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
LoadGrid();
}
public void LoadGrid()
{
using (SqlCommand cmdSQL =
new SqlCommand("SELECT ID, HotelName, City, Province FROM tblHotels ORDER BY HotelName",
new SqlConnection(Properties.Settings.Default.TEST4)))
{
cmdSQL.Connection.Open();
GridView1.DataSource = cmdSQL.ExecuteReader();
GridView1.DataBind();
cmdSQL.Connection.Close();
cmdSQL.CommandText = ("SELECT * FROM People ORDER BY FirstName");
cmdSQL.Connection.Open();
GridView2.DataSource = cmdSQL.ExecuteReader();
GridView2.DataBind();
}
}
Output:
And really nice? lets add say a top title to each of the grids.
we have this markup now:
<div style="float:left">
<h2>Hotel List</h2>
<asp:GridView ID="GridView1" runat="server" CssClass="table table-hover"></asp:GridView>
</div>
<div style="float:left;margin-left:25px">
<h2>People Booked</h2>
<asp:GridView ID="GridView2" runat="server" CssClass="table table-hover" ></asp:GridView>
</div>
and output now is
And doing the above in fact winds up with a "responsive" bootstrap page.
And you can add a "width" to each div, or to the grid if you want some sizing.
So, just remember:
I don't suggest the old "table" idea to get things to line up.
Drop a div, float left.
Now, you want a combo box, another grid (as per aobve)
Drop a div, float left.
Start a new line? div clear:both
Thus in 30 seconds, you can layout pages that take others 2 months of hard learning to layout. This simple trick? I been able to build any kind of web site I ever needed, and I don't even know web development.
Code
<rsweb:ReportViewer ID="ReportViewer1" Width="1140px"
ShowToolBar="true" Height="500px" runat="server">
</rsweb:ReportViewer>
I am geeting the following toolbar with no images of icons
Toolbar image
I need the foolwing toolbar guys please have a look.
desired toolbar
I'm implementing drag & drop with a Telerik RadListView (ASP.NET controls) and when I perform the drap and drop I don't get any data in the EventArgs of the server event (ItemDrop) that tell me where it was dropped i.e. from the DestinationHtmlElement inside the RadListViewItemDragDropEventArgs.
This is my control markup:
<telerik:RadListView ID="ListViewGallery" runat="server"
OnItemDrop="ListViewGallery_ItemDrop"
AllowPaging="true"
OnNeedDataSource="ListViewGallery_NeedDataSource"
AllowReorder="true"
DataKeyNames="FileId">
<ClientSettings AllowItemsDragDrop="true"></ClientSettings>
<ItemTemplate>
<div class="rlvI productItemWrapper">
<div style="width: 100px; height: 100px; background; background: url('<%#Eval("Photo") %>') no-repeat center center; background-size: contain;">
<telerik:RadListViewItemDragHandle ID="RadListViewItemDragHandle1" runat="server" ToolTip="Drag to organize" CssClass="move-item" />
</div>
</div>
</ItemTemplate>
<LayoutTemplate>
<div class="RadListView RadListViewFloated">
<div class="rlvFloated rlvAutoScroll">
<div id="itemPlaceholder" runat="server">
</div>
</div>
<telerik:RadDataPager ID="RadDataPager1" runat="server" PageSize="20">
<Fields>
<telerik:RadDataPagerButtonField FieldType="Numeric"></telerik:RadDataPagerButtonField>
</Fields>
</telerik:RadDataPager>
</div>
</LayoutTemplate>
</telerik:RadListView>
On the server side I just have this event handler:
protected void ListViewGallery_ItemDrop(object sender, RadListViewItemDragDropEventArgs e)
{
}
I thought it might be to do with not assigning the data correctly but I have made sure the DataKeyNames property of the list view is set.
Thanks in advance.
EDIT: I've just realised I have been missing a part of this. I want to drag it into itself to change the order of the items. The demo has the drop outside of the list.
OK so I figured it out.
To achieve this and to work out any css quirks I did the following:
I included a container inside the element with a class of rlvI (which you need to do for the drag and drop to work as per the Telerik website - see link in original post);
Inside this container I had to include a transparent image to take up the entire space and I floated this so as to remove it form the normal flow - I'm sure I could do this better but it is largely irrelevant for this exercise. You just need something inside it to drop "onto";
This internal image needs a unique Id so when it drops the event tells you where it was dropped;
Now the dropping works and I get the DestinationHtmlElement as the image client id of the one I dropped onto. Using this and the index of where it came from (from the DataItem.DataItemIndex of the event args) I can re order my list like so:
protected void ListViewGallery_ItemDrop(object sender, RadListViewItemDragDropEventArgs e)
{
if (e.DestinationHtmlElement.IndexOf("img-drop-zone") < 0)
{
return;
}
int newIndex = int.Parse(e.DestinationHtmlElement.Split('-').Last());
int oldIndex = e.DraggedItem.DataItemIndex;
ImagesList = MediaItem.MoveItem(ImagesList, (short)oldIndex, (short)newIndex);
ListViewGallery.Rebind();
}
The MoveItem method of MediaItem was fairly simple to write. If anyone is interested I can add it here but it essentially just re-adjusts the order property of the List items to reflect the move.
I'm making an admin panel and I have DataGridView on each page.
At the moment, it is not showing x &y gridLines and column width is arbitrary. I've used ItemStyle width 10%, but still doesn't really do the trick.
Here is my source code
<td class="auto-style9" colspan="2">
<div style= "Overflow:scroll; overflow-x: scroll; max-height: 220px; width: auto">
<asp:GridView ID="GridViewUpPer" runat="server" AutoGenerateColumns="False" Font-Names="Arial" Font-Size="Small" HorizontalAlign="Center">
<Columns>
<asp:BoundField DataField="SubCatID" HeaderText="Sub category ID">
<ItemStyle Width="10%" />
</asp:BoundField>
Here is my design
x scroll is not appearing and my gridView is not showing the entire columns. I only can change heard text color not the text color of data. I'm using table and div.
I have 15 of GV looking like this..... Can anyone help me to design a good looking gridView?? Without using java coz I'm new to programming and I don't know that script language...... Thanks~
C#, VS 2012, web application