Sharepoint How to show popup when click on gridview? - c#

I using Gridview control on sharepoint. I'm Bind data to column Name of Gridview. And now, I want to click direct on row of column Name, program will display detail popup window of this row.
Thanks !

I dont know if I understand you right but you could try opening a ModalDialog directing to a custom .aspx Page to Display your Information
http://sqldev-samir.blogspot.de/2012/08/open-modal-dialog-in-serverside-code-in.html

Here is client-side code to open a dialog box that will point to a page which contains the detail (editform.aspx, in this example). This code also causes a postback so the grid gets updated with the changes the user makes on EditForm.aspx.
function CloseCallback(result, target)
{
eval(<%=Page.ClientScript.GetPostBackEventReference(new PostBackOptions(Button1))%>);
}
function OpenDialog(url)
{
var options = {
url: url,
title: '',
allowMaximize: true,
showClose: true,
width: 700,
height: 800,
dialogReturnValueCallback: CloseCallback
};
var dlg = SP.UI.ModalDialog.showModalDialog(options);
}
And here is the server-side code to add the hyperlink column to the grid (this happens to be a RadGrid instead of an SPGridView server control). This column will display a hyperlink that points to the above JavaScript function and when clicked opens EditForm.aspx with the data from the selected row item.
GridColumn fldEditLink = new GridHyperLinkColumn() { UniqueName = "Edit", Text = "Edit/View",DataNavigateUrlFields = new string[] { "ID" }, DataNavigateUrlFormatString =String.Format("javascript:OpenDialog('{0}/Lists/Events/EditForm.aspx?ID={{0}}');", web.Url) };

Related

Asp.net Gridview Fixed Header in Ajax Popup Window

I need some help with a Asp.net Gridview. My users need to click a button and have an Ajax Modal Popup window display with a Gridview that has Fixed Headers. I have tried this many times but no success. I have been able to use Java to make the headers fixed in a Gridview, but it does not work when displaying in a Ajax modal popup window. The header row duplicates on the Gridview. Again, thank everyone for the help.
Can anyone post some code using Asp.net/C#/Ajax.
function BindControlEvents() {
/*Code to copy the gridview header with style*/
var gridHeader = $('#<%=GridView1.ClientID%>').clone(true);
/*Code to remove first ror which is header row*/
$(gridHeader).find("tr:gt(0)").remove();
$('#<%=GridView1.ClientID%> tr th').each(function (i) {
/* Here Set Width of each th from gridview to new table th */
$("th:nth-child(" + (i + 1) + ")", gridHeader).css('width', ($(this).width()).toString() + "px");
});
//Initial bind
$(document).ready(function () {
BindControlEvents();
});
//Re-bind for callbacks
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
BindControlEvents();
});
$("#controlHead").append(gridHeader);
$('#controlHead').css('position', 'absolute');
$('#controlHead').css('top', $('#<%=GridView1.ClientID%>').offset().top);
};

Tab out of asp.net auto complete textbox after user selects an item (using enter or mouse click)

I am using asp.net auto complete textbox and everything is working fine. I just need to tab out of that textbox after user selects an item (either by using enter or mouse click on one of the items)
Try This
$('input').autocomplete({
autoFocus: true,
source: ["test","some text"],
delay: 0,
select: function(event, ui) { if (event.keyCode == 13) {
$(this).next("input").focus().select();
} }
});
http://jsfiddle.net/YbPVX/5/

Best way to pass values from popup page to parent page

I have a main page for customer in which i need to select location for the customer . to pick a location we have desined a popup page which has a grid which displays all locations . once user pics the loction that particular location should be returned back to the main page .
Location object contains feilds - LocId,LocName,LocState,LocCountry,PinCode .
The entire location object should be returned to the main page not a single value .
My code for opening location is
<asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="../Content/Images/search.png" Height="21px" ToolTip="Search Location" Width="21px"
OnClientClick="ShowLocation();" />
function ShowLocation() {
window.showModalDialog('../StandardLookups/Location.aspx', '_blank', 'dialogWidth:820px; dialogHeight:400px; dialogLeft:250px; dialogTop:250px;status:no; scroll:no; help:no; resizable:no,edge: Raised,doPostBackAfterCloseCallback: false,postBackElementId: null');
}
Code in popup window once the row is selected by the user
protected void btnSelect_Click(object sender, EventArgs e)
{
List<object> locationValues = gvLocationLookup.GetSelectedFieldValues(new string[] { "LocId", "LocName", "LocState","LocCountry","PinCode" });
var locationValue = (object[])locationValues[0];
var location= new Location
{
LocId = (int?)locationValue[0],
LocName = (string)locationValue[1],
LocState = (string)locationValue[2]
LocCountry = (string)locationValue[3]
PinCode = (string)locationValue[4]
};
Session["SELECTED_LOCATION"] = location;
Response.Write("<script> window.opener.location.reload(false); window.close();</" + "script>");
Response.End();
}
Currently i use sessions values to move values . Is there any better approaches ?
You can check here what method suits to your needs.
http://msdn.microsoft.com/en-us/library/6c3yckfw%28v=vs.100%29.aspx
I've created a system like this before, using only client side code (javascript, no C#).
The requirement was that, when filling in a form, a specific value (e.g. a location) could be selected in a popup.
Once the value was clicked in the popup, the parent page receives this information through javascript, and the popup closes itself.
Note that the parent page must have the needed fields to be filled. In my case it is an autocomplete textbox (=FieldName) and a linked HiddenField (=FieldName_key), which holds the unique key to the text in the textbox.
function confirmSelection(code, key)
{
try {
window.opener.document.getElementById('<%= FieldName %>').value = code;
window.opener.document.getElementById('<%= FieldName %>_key').value = key;
window.close();
}
catch (e) {window.close();}
}
An additional benefit of this client-side script (opposed to the C# script) is that you don't have to reload the parent page, which can disturb your user in his/her work.

tinyMce activeeditor is null on postback

I am using tinymce editor to a textarea with exact id. It is working fine on pageload.
But when I am clicking asp button 'Save' whick post backs to save the data in DB the active editor becomes null and does not retains its value.
How to overcome this problem?
My tinyMce init code in pageload is
tinyMCE.init({
mode: "exact",
elements : "divLabTemplateTree",
encoding: "xml",
convert_urls: false,
theme: "advanced",
width:"300",
height:"400",
skin : "o2k7",
plugins: "spellchecker,pagebreak,style,layer,table,advhr,advimage,advlink,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,paste,directionality,fullscreen,visualchars,nonbreaking,xhtmlxtras",
extended_valid_elements: "iframe[src|width|height|name|align]",
theme_advanced_buttons1: "spellchecker,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect,|,print,fullscreen",
theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,media,advhr,|",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_path_location: "bottom",
theme_advanced_resizing: true,
theme_advanced_resize_horizontal: false,
dom_loaded : 1,
theme_advanced_styles: "Link to Image: lightbox;Image Right Border: rightbordered;Image Left Border: leftbordered;Darker Text: darker",
setup: function (ed) {
ed.onSaveContent.add(function (i, o) {
o.content = o.content.replace(/&#39/g, "&apos");
});
ed.onInit.add(function(ed) {
tinyMCE.execCommand("mceAddControl", true, "divLabTemplateTree");
});
}
});
I am setting its value
if(tinyMCE.activeEditor != null)
{
tinyMCE.activeEditor.setContent("bbbbbbbbbbbbbbb");
}
When a page gets initialized tinyMCE.activeEditor is null till the moment when a user explicitly clicks into the editor.
It is recommended to use tinymce.get('your_editor_id') here. Your editor is equals your textarea id for which the editor gets initialized. If this textarea (or other html source elmenent) got no id then content is used as default.

Textbox onchange event

So I have a text box, where I add an onchange event of markAsException.
My javascript is -
function markAsException(recordID) {
//alert("Exception");
//mark exception column
document.getElementById("ctl00_cpMain_lblScrollException_" + recordID).innerText = "Exception";
document.getElementById("ctl00_cpMain_lblScrollException_" + recordID).style.color = "#FF0000";
document.getElementById("ctl00_cpMain_tdScrollException_" + recordID).style.backgroundColor = "#99CCFF";
//enable comments ddl and remove blank (first item)
document.getElementById("ctl00_cpMain_ddlCommentId_" + recordID).disabled = false;
document.getElementById("ctl00_cpMain_ddlCommentId_" + recordID).focus();
document.getElementById("ctl00_cpMain_ddlCommentId_" + recordID).options[0] = null;
}
What I want to do is, when a user changes the value in a textbox, to mark a column as "Exception", and then focus a drop down list where they have to chose the reason for the exception.
This is what happens.. If I am on that text box and change it, then tab, it tabs to the drop down list.
However, if I change the value and then simply click in another text box on the form, I don't focus the drop down list.
How would I accomplish that?
I would suggest using JQuery's change() function.
The advantage is that it will be more stable across different browsers.
Something like:
$('#<%= TextBox1.ClientID %>').change(function(){
// extract the recordID from the textbox - perhaps with an attribute?
markAsException(recordID);
});
My comment was getting longer so I'm expanding:
Take a look at the JQuery documentation for setting this up as the page finishes loading. If tb is the ID of your textbox your selector would be
$('#<%= tb.ClientID %>')
I would suggest you replace your code and use
tb.Attributes.Add("recordID", recordId.ToString());
This will add the ID you need onto the textbox tag. Once you're in the function I outlined above you can use the following selector to get the recordID in javascript
var recordID = $('#<%= TextBox1.ClientID %>').attr('recordID');
All together
$(document.ready(function(){
$('#<%= tb.ClientID %>').change(function(){
var recordID = $('#<%= tb.ClientID %>').attr('recordID');
if(recordID){
markAsException(recordID);
}
});
});

Categories