I'm writing a report in ASP.NET using Reporting Services. I want to hide the Toolbar of the ReportViewer and have my own "Next Page" and "Previous Page" buttons. Is there a way to programmatically navigate through ReportViewer pages? Does it have methods such as "NextPage" and "PreviousPage"?
If you hide the toolbar and have your own controls for page navigation you could set the ReportViewer's CurrentPage property in your code.
I just thought I'd add to this as I've been doing similar things and have built a little set of JavaScript (using JQuery) functions where you can pass the ReportViewerID and it'll allow you to add next, previous, first last and so on to your own custom toolbar buttons. Just hide the toolbar using the ReportViewer_HideToolbar function on document ready. Thought it was worth sharing as I couldn't find anything on this when searching for hours yesterday. Even if it's just a starting point for someone, atleast it's that bit closer and of help :-)
p.s. I'm using ReportViewer 10, others may be different and not work.
function ReportViewer_FirstPage(ReportViewerID) {
var ReportViewer = $("span[id$='" + ReportViewerID + "_ReportViewer'")
ReportViewer.find("input[title='First Page']").first().click()
}
function ReportViewer_NextPage(ReportViewerID) {
var ReportViewer = $("span[id$='" + ReportViewerID + "_ReportViewer'")
ReportViewer.find("input[title='Next Page']").first().click()
}
function ReportViewer_PreviousPage(ReportViewerID) {
var ReportViewer = $("span[id$='" + ReportViewerID + "_ReportViewer'")
ReportViewer.find("input[title='Previous Page']").first().click()
}
function ReportViewer_LastPage(ReportViewerID) {
var ReportViewer = $("span[id$='" + ReportViewerID + "_ReportViewer'")
ReportViewer.find("input[title='Last Page']").first().click()
}
var tReportViewerLastFindText = ""
function ReportViewer_Set_SearchText(ReportViewerID, tText) {
var ReportViewer = $("div[id$='MainPlaceHolder_" + ReportViewerID + "'")
ReportViewer.find("input[title='Find Text in Report']").val(tText)
var m_reportViewer = $find($(ReportViewer).attr('id'))
if (tReportViewerLastFindText != tText) {
m_reportViewer.find(tText)
tReportViewerLastFindText = tText
} else {
m_reportViewer.findNext()
}
}
function ReportViewer_Set_PageNumber(ReportViewerID, tPageNumber) {
var ReportViewer = $("span[id$='" + ReportViewerID + "_ReportViewer'")
var CurrentPage = ReportViewer.find("input[title='Current Page']")
$(CurrentPage).val(tPageNumber)
__doPostBack(CurrentPage.attr("name"), '')
}
function ReportViewer_Print(ReportViewerID) {
var ReportViewer = $("div[id$='MainPlaceHolder_" + ReportViewerID + "'")
var m_reportViewer = $find($(ReportViewer).attr('id'))
m_reportViewer.invokePrintDialog()
}
function ReportViewer_HideToolbar(ReportViewerID) {
var ReportViewer = $("span[id$='" + ReportViewerID + "_ReportViewer'")
$(ReportViewer).find("div[style$='toolbar_bk.png);']").hide()
}
Regards
Liam
Related
I am trying to understand how sorting works in Table widgets works when loading a page. For most of my pages using the Table widget, the page loads sorted by the first column.
I do see the below code in the onAttach event for the Table panel in a page. I am wondering if this is the code that sets the sorting when a page loads.
// GENERATED CODE: modify at your own risk
window._am = window._am || {};
if (!window._am.TableState) {
window._am.TableState = {};
window._am.inFlight = false;
}
if (!window._am.sortTableBy) {
window._am.sortTableBy = function(datasource, field, fieldHeader, tableState) {
if (!field) {
throw "Can't sort the table because specified field was not found.";
}
tableState.inFlight = true;
if (tableState.sortByField === field.name) {
tableState.ascending = !tableState.ascending;
} else {
if (tableState.fieldHeader) {
tableState.fieldHeader.text = tableState.fieldHeaderText;
tableState.fieldHeader.ariaLabel = "";
}
tableState.sortByField = field.name;
tableState.ascending = true;
tableState.fieldHeader = fieldHeader;
tableState.fieldHeaderText = fieldHeader.text;
}
datasource.query.clearSorting();
var sortDirection = tableState.ascending ? "ascending" : "descending";
datasource.query.sorting[field.name]["_" + sortDirection]();
datasource.query.pageIndex = 1;
datasource.load(function() {
tableState.inFlight = false;
fieldHeader.text = fieldHeader.text.replace(/ (\u25B2|\u25BC)/g, "");
if (tableState.sortByField === field.name) {
fieldHeader.ariaLabel = fieldHeader.text + " sort " + sortDirection;
fieldHeader.text = fieldHeader.text + (tableState.ascending ? " \u25B2" : " \u25BC");
app.accessibility.announce(fieldHeader.ariaLabel);
}
});
};
}
Sorting is set on your datasource.
Click the model (top left) that your table is using.
Click Datasources and expand your Datasource (there will only be one, unless you have created additional ones).
Once you choose the field you want the table to use for sorting, you can choose "Ascending" or "Descending".
The problem is with adding new records from a separate create form. The new records always appear at the end of the list , until a subsequent 'load' is performed.
I have a web form which load 100 000 of data from the database.I Have 50 dropdown which is populated with respect to selectedindex change of dropdown .so to bind dropdown i am using ajax code .
I have written nearly about 200 line of ajax code in a separate js file.I am using 3 tier artitecture .I am not returning dataset from the bal class, am returning generic class to bind gridview.also i have created a class to bind the gridview.Also I am not using any update panel.
Is this approach will improve my performance.??
But there is a problem for me,i have to write code in js file to bind dropdown like this.
function GetAppStoreLnk(id) {
var txtnameid = document.getElementById(id);
CreateXmlHttp();
var requestUrl = "Default2.aspx?id="+txtnameid+"";
if (XmlHttp) {
XmlHttp.onreadystatechange = function() { getschemename(txtnameid) };
XmlHttp.open("GET", requestUrl, true);
XmlHttp.send(null);
}
}
function getschemename(id)
{
// To make sure receiving response data from server is completed
if(XmlHttp.readyState == 4) {
// To make sure valid response is received from the server, 200 means response received is OK
if(XmlHttp.status == 200) {
var strData = XmlHttp.responseText;
if(strData != "") {
var arrscheme = strData.split("|");
id.length = 0;
for(i=0; i<arrscheme.length-1; i++) {
var strscheme = arrscheme[i];
var arrschnm = strscheme.split("~");
id.options[i] = new Option();
id.options[i].value = arrschnm[0];
id.options[i].text = arrschnm[1];
}
} else {
id.length = 0;
id.options[0] = new Option();
id.options[0].value = "";
id.options[0].text = "Scheme Name is not available";
}
document.body.style.cursor = "auto";
}
else {
id.length = 0;
id.options[0] = new Option();
id.options[0].value = "";
id.options[0].text = "server is not ready";
document.body.style.cursor = "auto";
}
}
}
but if i make class to bind the dropdown this will reduce my js file code line .How will i find the ID of the dropdown in the different page ie Default2.aspx .
Please help me .
How will i find the ID of the dropdown in the different page ie Default2.aspx .??Also i want dont want to use usercontrol or masterpage.
I don't understand your question. You are trying to access the Asp.net drop down in page Default.aspx in the page Default2.aspx right?
Could you please clarify your requirement?
I have an AutoCompleteExtender from the Ajax Control Toolkit. I need to have a heading in the dropdown list that shows how many items found, but it should not be selectable as an item.
I have tried this using jQuery, but even when I just add as a div, it is still selected as an item into the text box when I click on it:
function clientPopulated(sender, e) {
var completionList = $find("AutoCompleteEx").get_completionList();
var completionListNodes = completionList.childNodes;
for (i = 0; i < completionListNodes.length; i++) {
completionListNodes[i].title = completionListNodes[i]._value.split(':')[2];
}
var resultsHeader;
if(completionListNodes.length==1000)
resultsHeader = 'Max count of 1000 reached.<br/>Please refine your search.';
else if(completionListNodes.length>0)
resultsHeader = completionListNodes.length + ' hits.';
else
resultsHeader = msg_NoObjectsFound ;
jQuery(completionListNodes[0]).before('<div>' + resultsHeader + '</div>');
}
Add OnClientItemSelected and OnClientShowing events handlers and try script below:
function itemSelected(sender, args) {
if (args.get_value() == null) {
sender._element.value = "";
}
}
function clientShowing() {
var extender = $find("AutoCompleteEx");
var optionsCount = extender.get_completionSetCount();
var message = "";
if (optionsCount == 1000) {
message = 'Max count of 1000 reached.<br/>Please refine your search.';
}
else if (optionsCount > 0) {
message = optionsCount + " hits."
}
else {
message = "oops."
}
jQuery(extender.get_completionList()).prepend("<li style='background-color:#ccc !important;'>" + message + "</li>");
}
Added:
you even can do this without OnClientItemSelected handler:
function clientShowing() {
var extender = $find("AutoCompleteEx");
var oldSetText = extender._setText;
extender._setText = function (item) {
if (item.rel == "header") {
extender._element.value = "";
return;
}
oldSetText.call(extender, item);
};
var optionsCount = extender.get_completionSetCount();
var message = "";
if (optionsCount == 1000) {
message = 'Max count of 1000 reached.<br/>Please refine your search.';
}
else if (optionsCount > 0) {
message = optionsCount + " hits."
}
else {
message = "oops."
}
jQuery(extender.get_completionList()).prepend("<li rel='header' style='background-color:#ccc !important;'>" + message + "</li>");
}
We can give a better answer if you post the output html of your autocomplete control. Anyway if its a dropdown control;
jQuery(completionListNodes[0]).before('
<option value="-99" disabled="disabled">your message here</option>'
);
The answer by Yuriy helped me in solving it so I give him credit although his sollution needed some changes to work.
First of all, the clientShowing event (mapped by setting OnClientShowing = "clientShowing" in the AutoExtender control) is executed on initialization. Here we override the _setText method to make sure nothing happens when clicking on the header element. I have used the overriding idea from Yuriy's answer that really did the trick for me. I only changed to check on css class instead of a ref attribute value.
function clientShowing(sender, e) {
var extender = sender;
var oldSetText = extender._setText;
extender._setText = function (item) {
if (jQuery(item).hasClass('listHeader')) {
// Do nothing. The original version sets the item text to the search
// textbox here, but I just want to keep the current search text.
return;
}
// Call the original version of the _setText method
oldSetText.call(extender, item);
};
}
So then we need to add the header element to the top of the list. This has to be done in the clientPopulated event (mapped by setting OnClientPopulated = "clientPopulated" in the AutoExtender control). This event is executed each time the search results have been finished populated, so here we have the correct search count available.
function clientPopulated(sender, e) {
var extender = sender;
var completionList = extender.get_completionList();
var completionListCount = completionList.childNodes.length;
var maxCount = extender.get_completionSetCount();
var resultsHeader;
if(completionListCount == maxCount)
resultsHeader = 'Max count of ' + maxCount + ' reached.<br/>'
+ 'Please refine your search.';
else if(completionListCount > 0)
resultsHeader = completionListCount + ' hits.';
else
resultsHeader = 'No objects found';
jQuery(completionList).prepend(
'<li class="listHeader">' + resultsHeader + '</li>');
}
I have also created a new css class to display this properly. I have used !important to make sure this overrides the mousover style added from the AutoExtender control.
.listHeader
{
background-color : #fafffa !important;
color : #061069 !important;
cursor : default !important;
}
I am using calender control in asp.net 2.0, and after clicking on button its opening in another form. I am using the following JS code to open the window:
function openwindow(txtvalueID) {
leftVal = (3500 - screen.width) / 2;
topVal = (800 - screen.height) / 2;
if (txtvalueID == 'ctl00$CPH1$txtHireDate') {
var txtid = '<%=txtHireDate.ClientID %>';
}
else {
var txtid = '<%=txtTermDate.ClientID %>';
}
var frmid = '<%=Page.Form.ClientID %>';
var qs = "formname=" + frmid + "." + txtid;
window.open('/Calender.aspx?' + qs, 'calendar_window', 'fullscreen=no,toolbar=no,status=no,menubar=no,scrollbars=no,resizable=no,directories=no,location=no,width=230,height=240,left=' + leftVal + ',top=' + topVal + ',screenX=400,screenY=400')
}
function isNumeric(keyCode) {
return ((keyCode >= 48 && keyCode <= 57) || keyCode == 8)
}
In this line txtvalueID == 'ctl00$CPH1$txtHireDate' is wrong. I am referring to the control id, but the control id keeps changing.. Why?
You shouldn't explicitly refer to the ID directly, but instead do:
if (txtvalueID == '<%=txtHireDate.ClientID %>') {
In the first if line, that will help with the ID changing issue.
HTH.
I am using ASP.NET with C# 2.0 and Visual Studio 2005. I am using a Master page and content pages. I have a treeview menu in the master page and when a user selects any menu item I redirect to that content page.
My problem is that after a user navigates to the content page all the treenodes refresh and the structure is collapsed. I want the selected treenode to stay expanded.
Can anybody help me out?
Are you using the treeview inside any UpdatePanel? Actually UpdatePanel does not support TreeView. I however managed the same using a lot of additional codes. You can see most of them on http://www.geekays.net/post/Using-TreeView-inside-AJAX-UpdatePanel.aspx and another post on the same site: http://www.geekays.net/post/TreeView-control-postbacks-on-check-and-uncheck-of-the-nodes-Checkbox.aspx
I added javascripts like the following also to scroll to a tree node that was selected, but the success was poor:
function scrollSelectedTviewNodeToDisplay(){
try{
var inpSelectedNode = document.getElementById("ctl00_contRMSMaster_TViewDeviceHeirarchy_SelectedNode");
var divTree = document.getElementById("ctl00_contRMSMaster_TViewDeviceHeirarchy");
if (inpSelectedNode.value != "")
{
var objScroll = document.getElementById(inpSelectedNode.value);
//my treeview is contained in a scrollable div element
var posY =findPosY(objScroll);
//alert(posY);
if (divTree){
divTree.scrollTop = posY;
//alert(divTree.nodeType);
}
//this works as well bu, but there is not as much control over the y position
//document.all(inpSelectedNode.value).scrollIntoView(true);
}
}
catch(oException)
{
//alert(document.getElementById("ctl00_contRMSMaster_divTree"));
}
}
function findPosX(obj){
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj){
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}