I want to list some records from the table in a ASP.NET page. For each record, I want to display some data and at the same time, provide a button for them to click. I want to show a “CLICK TO VIEW BUTTON” If they click on the button, I want to have a box slide down (using jQuery) to display the other details for the record. An example of what I am looking for can be found here.
Sample of drop down
I would prefer to have one function to handle the details. I would like the box to appear right underneath each record and not at the bottom of the page. Is there a way to do this using jQuery? I was looking at the wrap, append but was not sure on how to go about implementing this.
Put the box in your ASP markup, but hide it:
Show details
<div id="details123" style="display: none"></div>
Now implement a function to show/load:
function showDetails(recordId) {
var detailsDiv = $("#details" + recordId);
// load stuff -- replace this with whatever is
// appropriate for your app
$.getJSON("/myapp/someJSONfunction?recordId=" + recordId,
null,
// this will be run if successful
function(data) {
if (data.value) {
detailsDiv.text(data.value).slideDown();
}
}
});
}
Related
I'm trying to customize a survey I'm building on Qualtrics so that certain items in the Table of Contents are disabled. Basically I want you to be able to use the TOC to navigate to previous pages, but not to be able to click on subsequent pages. This is not something I can customize just using the Qualtrics menu.
I'm trying to add Javascript to each block to enable this feature, but can't get it to work. I looked into the html elements on my page and under a div labeled "ToC Sidebar", each element of my ToC is there with a unique id (e.g. "FL_34"), and there's an 'onclick' function under this element to go to link's page. I just want to set this to false. Apologies if this is obvious, I'm new to Qualtrics and Javascript.
Here's what I have right now, any thoughts?
Qualtrics.SurveyEngine.addOnload(function()
{
$("FL_34").onclick = false;
});
That's not the correct way to disable the onclick. What you would do is use: $("FL_34").removeAttribute("onclick");
However, you really don't want to it do that way at all because you don't want to worry about the specific id's, you don't want to display links that don't work, and you don't want to add a script to every page. Instead add this script that hides all the incomplete blocks to the header (Look&Feel/Advanced/Header(edit)/Source):
<script type="text/javascript">
Qualtrics.SurveyEngine.addOnload(function()
{
if($('Toc')) {
$('Toc').select('.Incomplete').invoke('hide');
}
});
</script>
For this to work, you have to set Page Transition to "none".
I have a sub grid on a new entity called Issues, the sub grid is for another new entity called Cost Detail.
I have them both loaded into my solution called Issue, and have opened issue in the ribbon workbench.
What I want to do is when you are on the Issue form and can see the sub-grid I want to be able to hide the + button which is displayed. However when I have hidden this button in the ribbon workbench it also hides the add new button in the 'Associated View' therefore no records can be added.
How do I do it so that only the + button on the sub grid is hidden and not the other view?
EDIT:
In order to hide the add button, you either need to take away create privileges to the role that the user is in or you could do a hack(unsupported) like this:
function hideAddButton(){
var addButton = $('#NameOfGrid_addImageButton');
if(addButton.size())
addButton.hide();
else
setTimeout(hideAddButton, 1000);//checks every second to see if the button exists yet
}
and call the hideAddButton function on form load
There is one answer that I found. If you have a field that unique for that entity, then you can do it with a simple javascript code.
Here is steps that you must follow in ribbon workbench:
Right click the button and customise button.
Add an enable rule, in Steps section add an Custom Javascript Rule, that contains your library and function name, please make sure that default is true.
This must be in your javascirpt library :
function hideAddNew(){
if(Xrm.Page.getAttribute("yourField")){
return false;
}
else {
return true;
}
}
Add a command that contains the enable rule we created.
Add the command to button.
That's it. I test it, it is working.
I have got a jqgrid, and i would like to put a link in it to open up more details on the row in a modal window.
Everything i have read about modal windows uses a div that gets shown when you click the link, but i want to pass an id so i can just get the info i need. I know i could do it with a new window quite easly but i would like to use a modal window if poss.
Any ideas how i could do this. I'm using asp.net if thats going to be relevent.
Cheers
Luke
I'd suggest using the jQuery UI Dialog plugin for custom modal windows. You can find demonstration and documentation here:
http://jqueryui.com/demos/dialog/
In theory, to do what you're asking for, you could follow these steps:
Add a “dialog” div tag to your page.
Build the link into your data feed. If you’re using a XML data type make sure you use a CDATA flag to encapsulate your link so that they XML may be parsed correctly.
< cell>< ![CDATA[< a href=”javascript:showDialog(‘551’)”>text]]>< /cell>
In this instance, since we know the actual id at the time the link is create, I pre-populated the id (e.g. 551) in the function. This could also be retrieved from jqGrid API with the selrow property. It’s your call. If you use a JSON data type, the idea would similar. You wouldn’t have to worry about the CDATA qualifier.
Create a local function (e.g. showDialog (id)) to correspond to your link.
Add code in the showDialog function to populate and open the modal dialog. Using an AJAX call to gather specific data for this record, create the dialog content and populate the dialog using the jQuery .html method.
function showDialog (id) {
$.ajax({
url: "feed.aspx?id=" + id,
success: function(data) {
var content = // TODO: create dialog layout here
$("#dialog").html(content);
$("#dialog").dialog({
title: 'Record Details',
modal: true,
closeOnEscape: true,
width: 300,
height: 200,
buttons: false,
position: "center",
});
$("#dialog").dialog("open");
}
});
}
This is just one way to skin the cat. You should be able to use more of a jQuery approach with the link creation. If desired, rather than building the specific link the data feed, you could add jQuery click event bindings to handle the request. It’s your call. You could also add the dialog div dynamically to your page using jQuery rather than just placing it manually like I described above. It might be a little more elegant looking but would achieve the same goal.
I am attempting this late. May be you have an answer. Thought this will help others.
The #dialog code can be done as suggested by gurun8. This needs to be wired to the jqgrid. There is a onSelectRow event which triggers whenever a row is selected in jqgrid. Refer documentation. I usually add autoOpen: false, to the dialog constructor.
You need to add the onselectrow event to the grid (jqgrid function as shown below) and you can pass the id to the function. This id is the unique identifier in the jqgrid. Make sure there are no syntax errors, add comma wherever appropriate.
$s("#list").jqGrid({
...
onSelectRow: function(id){
console.log("row is selected"+id);
$url = "your_url/";
$s('#dialog').load($url);
$s('#dialog').dialog('open');
}
...
});
i have a dynamically created gridview button that fires off a modal popup when clicked. I do this onclientside like so:
function openModal(btnId, v) {
deptdata(v);
// __doPostBack('<%=DropDownList1.ClientID %>', '');
btn = document.getElementById(btnId);
btn.click();
}
function deptdata(v) {
document.getElementById('<%=vendor.ClientID%>').value = v;
}
This is how the function is called in the code.
btnedit.OnClientClick = String.Format("openModal('{0}','" & GridView1.Rows(i).Cells(0).Text & "');return false;", hidden.ClientID)
I set the value of a hidden field(Vendor) but I need that value for what's in the modal popup. I have a dropdown list that depends on that newly set variable. The variable is set depending on what row was clicked. So i need to somehow just reload that popup. I have an Update Panel but I can't get that Panel to reload. I've tried __doPostback and it didn't help. any ideas how to update the panel or the dropdown in the panel using javascript?
It's not very clear from your description and the limited code you provide what it is exactly that you are trying to do and what is failing. However, the following might give you some ideas. If you provide more detail and code someone might be able to give you a better answer.
ScriptManager1.RegisterAsyncPostBackControl(Button1);
to trigger an update panel post back from js make sure you use UniqueID, not ClientID, thats a common gotcha that prevents the async postback from working.
__doPostBack("<%=Button1.UniqueID %>", "");
Personally, I have all but given up on UpdatePanels, I only use them in the most trivial cases. I prefer to have my js call an ASP.Net JSON webservice and have the on completed function render any needed changes to the html. It's more flexible, lighter and infinitely faster for pages with large grids or a lot of controls.
Using the viewer control for display of SQL Reporting Services reports on web page (Microsoft.ReportViewer.WebForms), can you move the View Report button? It defaults to the very right side of the report, which means you have to scroll all the way across before the button is visible. Not a problem for reports that fit the window width, but on very wide reports that is quickly an issue.
No, you cannot reposition the view report button in the ReportViewer control.
However, you could create your own custom report viewing control. The control would be comprised of fields for report parameters and a button to generate the report. When a user clicks the button you could generate the report in the background. You could display the report as a PDF, HTML, etc.
It's kind of a hack, but you can move it in JavaScript. Just see what HTML the ReportViewer generates, and write the appropriate JavaScript code to move the button. I used JavaScript to hide the button (because we wanted our own View Report button). Any JavaScript code that manipulates the generated ReportViewer's HTML must come after the ReportViewer control in the .aspx page. Here's my code for hiding the button, to give you an idea of what you'd do:
function getRepViewBtn() {
return document.getElementsByName("ReportViewer1$ctl00$ctl00")[0];
}
function hideViewReportButton() { // call this where needed
var btn = getRepViewBtn();
btn.style.display = 'none';
}
The reason the button is pushed over to the right is that the td for the parameters has width="100%". I'm solving this problem with the following jquery. It simply changes the width of the parameters td to 1. Browsers will expand the width on their own to the width of the contents of the element. Hope this helps.
<script type="text/javascript">
$(document).ready(function() {
$("#<%= ReportViewer1.ClientID %> td:first").attr("width", "1");
});
</script>
Since I was searching for this answer just yesterday, I thought I'd post what I came up with to solve our problem. Our reports were coming back wide, and we wanted the "view reports" button to exist on the left side of the control so there was no need to scroll to get to the button. I did need to go into the source of the rendered file to find the ID names of the button and the target table.
I wrote a simple cut and paste javascript function to pull the button from its original position and essentially drop it into the next row in the containing table below the date pickers.
function moveButton() {
document.getElementById('ParameterTable_ctl00_MainContent_MyReports_ctl04').appendChild(document.getElementById('ctl00_MainContent_MyReports_ctl04_ctl00'));
}
This function gets called on the report viewer load event.
ScriptManager.RegisterStartupScript(Me, Me.GetType(), "moveButton", "moveButton();", True)
To adjust the position, I used the CSS ID.
#ctl00_MainContent_MyReports_ctl04_ctl00 {
margin: 0px 0px 0px 50px;
}
I had the same problem and ended up using an extension on Travis Collins answer; As well as changing the table column width I also align the "View Report" button left so that it appears neearer to rest of the controls.
<script type="text/javascript">
$(document).ready(function() {
$("#_ctl0_MainContent_reportViewer_fixedTable tr:first td:first-child").attr("width", "1");
$("#_ctl0_MainContent_reportViewer_fixedTable tr:first td:last-child").attr("align", "left");
});
</script>
You may need to tweak the JQuery selector depending on the element naming assigned to your existing control.