Develop Reference

Finding the Client ID for a RadGrid inside a RadLightBoxItem tag in a RadLightBox

I'm trying to fetch the ClientID for a RadGrid control from client side using JavaScript so that I'll be able to bind data to this from the client side.
The RadGrid is present within the RadLightBox and needs to be populated on a button click event. The markup for LightBox looks something like this.
<telerik:RadLightBox ID="RadLightBox1" runat="server">
<Items>
<telerik:RadLightBoxItem runat="server">
<ItemTemplate>
<telerik:RadGrid runat="server" ID="lightbox_radgrid" AutoGenerateColumns="false">
<MasterTableView>
<Columns>
<%-- Columns not shown here --%>
</Columns>
</MasterTableView>
<ClientSettings>
<ClientEvents OnCommand="window_radgrid_OnCommand" />
</ClientSettings>
<GroupingSettings CaseSensitive="false" ShowUnGroupButton="true" />
</telerik:RadGrid>
</ItemTemplate>
</telerik:RadLightBoxItem>
</Items>
</telerik:RadLightBox>
This is the partial Javascript Code that I have written. I am able to find upto the RadLIghtBoxItem element but unable to fetch the RadGrid and it's clientID. This method is to be executed on success of a call to a web service to return the data.
function onSucessCallThis(result, userContext, methodName) {
var radWindow = $find('<%= lightbox.ClientID %>');
var LightBoxItems = radWindow.get_items();
console.log(LightBoxItems);
console.log(LightBoxItems.get_count());
var item = LightBoxItems.getItem(0);
console.log(item); //Able to fetch LightBoxItem
var radGrid = item.FindControl("lightbox_radgrid"); //Doesn't work
}
I'm not sure if this is the right way to have a radGrid inside a radLightBox. There isn't many examples of this online.

I think it will be easier for you to use a RadWindow's ContentTemplate. Something like:
<telerik:RadWindow ID="RadWindow1" runat="server" Modal="true">
<ContentTemplate>
<telerik:RadGrid ID="RadGrid1" runat="server"></telerik:RadGrid>
</ContentTemplate>
</telerik:RadWindow>
<script>
function onSucessCallThis(result, userContext, methodName) {
var wnd = $find("<%=RadWindow1.ClientID%>");
if (!wnd.isVisible()) {
wnd.show();
}
var grid = $find("<%=RadGrid1.ClientID%>");
var mtv = grid.get_masterTableView();
mtv.set_dataSource(result);
mtv.dataBind();
}
</script>
If you want to keep using a lightbox, review the Get Client-side Reference to a Control Object article. The gist is that you can easily loop through the DOM, for example:
<telerik:RadLightBox ID="RadLightBox1" runat="server">
<Items>
<telerik:RadLightBoxItem runat="server">
<ItemTemplate>
<telerik:RadGrid CssClass="gridInLightbox" runat="server" ID="lightbox_radgrid" AutoGenerateColumns="false">
</telerik:RadGrid>
</ItemTemplate>
</telerik:RadLightBoxItem>
</Items>
</telerik:RadLightBox>
<script>
function onSucessCallThis(result, userContext, methodName) {
var lightbox = $find('<%= RadLightBox1.ClientID %>');
//item objects do not refer the DOM so we can use the lightbox as a parent for the traversal
var radGrid = $telerik.$(".gridInLightbox", lightbox.get_element())[0].control;//of course, add defensive checks
alert(radGrid);
var mtv = radGrid.get_masterTableView();
mtv.set_dataSource(result);
mtv.dataBind();
}
</script>

why file path of uploaded file is undefined ?

I have ajax Async File Upload Control in asp.net, inside update panel. I have called javascript function on it to get filename of uploaded file but it always give Undefined text. Why ?
<asp:AsyncFileUpload ID="FileUpload1" OnClientUploadComplete="uploadComplete" ClientIDMode="AutoID" UploaderStyle="Modern" runat="server"/>
asp:HiddenField ID="HdnFieldEmployeePicture" runat="server" />
<asp:HiddenField ClientIDMode="Static" ID="HdnFieldHasFileUploaded" runat="server" />
<asp:HiddenField ClientIDMode="Static" ID="UploadedFilePath" runat="server" />
calling this function:
<script type="text/javascript">
function uploadComplete(sender, args) {
var myHidden = document.getElementById('<%= HdnFieldHasFileUploaded.ClientID %>');
myHidden.value = '1';
var fu1 = args.get_fileName();
UploadedFilePath.value = fu1.value;
}
</script>
fu1 is always UNDEFINED, why ?

Calling server side event in asp.net from java script

Surely will be marked as duplicate one but after tons of question and example i couldn't solve my problem.
What i want?
Calling server side event handler in asp.net from client side java script it is not going on server side. I checked it by setting breakpoint, the page flicks but server side method is not called.
My click event on code behind is
protected void btninsert_Click(object sender, EventArgs e)
{
// my code
}
aspx file
<asp:Button ID="btninsert" runat="server" ValidationGroup="form" CssClass="btn"
OnClientClick="DoPost()" Text="Save" />
Javascript method is
function DoPost() {
function DoPost() {
var chk = document.getElementById('<%= chkstatus.ClientID %>');
if (chk.checked)
__doPostBack('<%= btninsert.ClientID %>', 'OnClick');
return true;
//return false;
}
}
I also tried this
__doPostBack('btninsert', 'OnClick'); and __doPostBack('btninsert', ''); and $('btnSubmit').trigger('click'); with no success.
What am i doing wrong?
Edit: If i uses OnClick event then it is going in the server side event irrespective of the if condition in the DoPost method.

Ahh it was simple. Thanks to all answers.
Solution:
Use OnClick attribute for server side event and OnClientclick for client event for validation.
OnClientClick javascript method will return true and false which decides whether serverside onclick event will fire or not.
Code will be somthing like this
<script type="text/javascript">
function DoPost() {
var chk = document.getElementById('<%= chkstatus.ClientID %>');
if (chk.checked) {
var c = confirm("are you sure?");
if (c == true) {
return true;
} else
{ return false; }
}
return true;
}
</script>
And the Button tag
<asp:Button ID="btninsert" runat="server" ValidationGroup="form" CssClass="btn"
OnClientClick="return DoPost();" OnClick="btninsert_Click" Text="Save" />

it can work!!
if you call __doPostBack('btninsert', ''), add below to Page_Load
protected void Page_Load(object sender, EventArgs e)
{
if ( Request["__EVENTTARGET"] == "btninsert" ) {
btninsert_Click(sender, e);
}
}

<asp:Button ID="btninsert" runat="server" ValidationGroup="form" CssClass="btn" OnClick="btninsert_Click" OnClientClick="DoPost()" Text="Save" />
Add OnClick="btninsert_Click", because without this information, asp.net has no way know which event handler to run for the "Click" event. In case you want to control whether to post back by client side script. You can do something like this:
<asp:Button ID="btninsert" runat="server" ValidationGroup="form" CssClass="btn" OnClick="btninsert_Click" OnClientClick="return DoPost()" Text="Save" />
function DoPost() {
__doPostBack('<%= btninsert.ClientID %>', 'OnClick');
return true;
//return false;
}
Note the OnClientClick="return DoPost()"

<asp:Button ID="btninsert" runat="server" ValidationGroup="form" CssClass="btn"
OnClientClick="return DoPost();" Text="Save" />
modify your line like this

You can try Ajax, by using Webmethod. I used this in my project and it works fine! You may see the question, solutions and code here: http://www.codeproject.com/Questions/416748/How-to-Call-WebMethod-of-Csharp-from-JQuery

Use ASP link button instead of ASP BUTTON. Button control is not called from javascript because it type is submit while link button type is button.
For example i have added two asp control
<asp:LinkButton ID="lbtest" runat="server" Text="Link Button"></asp:LinkButton>
<asp:Button runat="server" ID="btnbutton" Text="Button" />
and execute the page
When we view the source of running page its look like this
<a id="lbtest" href="javascript:__doPostBack('lbtest','')">Link Button</a>
<input type="submit" name="btnbutton" value="Button" id="btnbutton" />

passing clientID to javascript and extracting a value, clarification

Forgive the noob question, but I'm trying to get my head wrapped around this. I have some controls that are inside of an in a listview that are used to submit some information. I'm running a test pattern here to do this, but I'm getting object undefined errors. All of the articles I've seen about this are kind of vague. In this example, I'm trying to pass the id of a textbox, then pull the value from that in javascript. Can you tell me what I'm doing wrong?
<form id="form1" runat="server">
<asp:ScriptManager runat="server" />
<script type="text/javascript">
function ClientIDS(id) {
var info = document.getElementById(id).value;
alert(info);
return false;
}
</script>
<asp:ListView runat="server" ID="lsvTest">
<ItemTemplate>
<asp:TextBox runat="server" ID="txtTextBox" />
<asp:Button runat="server" ID="btnSubmit" Text='<%#Eval("Name") %>' OnClientClick="ClientIDS('<%=txtTextBox.ClientID %>')" />
</ItemTemplate>
</asp:ListView>
</form>
Thanks

if you are want to doing using jquery than try this
just replace in button onclientclick with this one
OnClientClick="ClientIDS(this);"
and than find your previous input text in to asp:listview
function ClientIDS(obj) {
var txt = $(obj).prevAll('input[id*="txtTextBox"]:first');
alert($(txt).val());
return false;
}

You can't have inline code in a property for a server control.
Generally I would do this in the codefile.
for (int j = 0; j < this.lsvTest.Items.Count; j++)
{
var btnSubmit = (Button)this.lsvTest.Items[j].FindControl("btnSubmit");
var txtTextBox = (TextBox)this.lsvTest.Items[j].FindControl("txtTextBox");
btnSubmit.Attributes["onclick"] = string.Format("ClientIDS('{0}')", txtTextBox.ClientID);
}

Java Script Code
<script type="text/javascript">
function ClientIDS(Btnid) {
var textBoxID = Btnid.id.replace('btnSubmit', 'txtTextBox');
var info = document.getElementById(textBoxID).value;
alert(info);
return false;
}
</script>
HTML Code
<asp:ListView runat="server" ID="lsvTest">
<ItemTemplate>
<asp:TextBox runat="server" ID="txtTextBox" />
<asp:Button runat="server" ID="btnSubmit" Text='<%#Eval("Name") %>' OnClientClick="ClientIDS(this)" />
</ItemTemplate>
</asp:ListView>

first of all, you're using javascript to do what you're jQuery library should be doing.
For example:
var info = document.getElementById(id).value;
// is easier as
var info = $("#"+id).val();
Secondly, it's been awhile, but i dont think you can put your asp script text in the form like that

You can use ItemDataBound event for the repeater to make this. See the following code
protected void lsvTest_ItemDataBound(object sender, ListViewItemEventArgs e)
{
string txtbox = e.Item.FindControl("txtTextBox").ClientID;
Button btn = e.Item.FindControl("btnSubmit") as Button;
btn.OnClientClick = string.Format("ClientIDS('{0}')", txtbox);
}

How can I recall a javascript function after updatepanel update

<asp:UpdatePanel ID="UpdatePanel2" runat="server"
OnLoad="UpdatePanel2_Load" UpdateMode="Conditional">
<ContentTemplate>
<script type="text/javascript">
myFunction();
</script>
<asp:Label ID="Label1" runat="server" Text="1" Width="18px"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
C#:
if(condition)
{
UpdatePanel2.Update();
}
protected void UpdatePanel2_Load(object sender, EventArgs e)
{
Label1.Text += 1;
}
the Label1's value is changing but it doesn't call myFunction(). I want to call it one more time after the some condition but not using setTimeout to auto call, some ideas?

When the UpdatePanel updates the DOM and rewrites script blocks into the DOM, they are not re-executed. You need to get on the client-side event that fires after the UpdatePanel is finished and re-execute your JS blocks:
<script type="text/javascript">
function handleEndRequest(sender, args)
{
var panel = document.getElementById(sender._postBackSettings.panelID);
var scripts = panel.getElementsByTagName('script');
for(var i=0;i<scripts.length;i++) {
eval(scripts[i].innerHTML);
}
}
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(handleEndRequest);
</script>

I have made it works by refreshing the whole page