I have a gridview that contains two(2) ASPxComboBox the value of the second Combo box is base on the value of the first combo box. DevExpress demos and sample are a bit complicated and time consuming so I think of a workaround that when the selected item of combo box is exchange the value will store in a label. And I will get the value of label to store in dropdown. But I don't know how to pass the value of label in server side. Any help would be much appreciated. Thank you!
Here's my code.
FrontEnd
<asp:Label ID="LblProduct" runat="server" Text="Label"></asp:Label>
<dx:ASPxGridView ID="ASPxGridView2" OnRowDataBound="ASPxGridView2_RowDataBound" ClientInstanceName="GridV" runat="server" AutoGenerateColumns="False" DataSourceID="forprod" KeyFieldName = "ppdtl_no">
<columns>
<dx:GridViewDataTextColumn FieldName="fld_product" Name="Dd_product" ShowInCustomizationForm="true" VisibleIndex="3">
<SettingsHeaderFilter>
<DateRangePickerSettings EditFormatString="" />
</SettingsHeaderFilter>
<EditItemTemplate>
<dx:ASPxComboBox ID="ASPxComboBoxProduct" runat="server" DataSourceID="pp_prod" TextField="pp_ppname" ValueField="pp_ppcode">
<ClientSideEvents SelectedIndexChanged="function(s, e) { OnProductChanged(s); }"></ClientSideEvents>
</dx:ASPxComboBox>
</EditItemTemplate>
</dx:GridViewDataTextColumn>
<dx:GridViewDataComboBoxColumn FieldName="fld_type" Name="dd_type" ShowInCustomizationForm="true" VisibleIndex="4">
<SettingsHeaderFilter>
<DateRangePickerSettings EditFormatString="" />
</SettingsHeaderFilter>
<EditItemTemplate>
<dx:ASPxComboBox ID="ASPxComboBoxType" runat="server" DataSourceID="pp_type" TextField="pp_codetype" ValueField="pp_codetype">
</dx:ASPxComboBox>
</EditItemTemplate>
</dx:GridViewDataComboBoxColumn>
</columns>
</ASPxGridView>
JavaScript
function OnProductChanged(s, e) {
var selected_index = s.lastSuccessValue;
var aa = document.getElementById('LblProduct').innerText = selected_index;
}
onload = OnProductChanged;
You need to use the ClientID property of any element you run at server level in your selector. To achieve this, you have to write the JavaScript inside the file with your label, and then use <%= LblProduct.ClientID %>.
<script type="text/javascript">
document.getElementById('<%= LblProduct.ClientID %>');
</script>
Look at your project during runtime with Inspect - you will see the ID after compilation is not LblProduct, but something similar to ProjectName_PageName_ContentPlaceHolderName_LblProduct.
You could also just copy-paste that, though it's not open to change.
Related
I have an ASPX page where I set data with JS but I am having a bad time trying to get this data from VB.
This is a simplified version of what I have...
ASPX:
<body onload="DoStuff();">
<script>
function DoStuff() {
var myvalue = document.getElementById('lblValue');
myvalue.textContent = "blah";
console.log (myvalue.textContent); // just to be sure that the value IS there
}
</script>
<div style="display:block">
<asp:label id="lblText" visible="true" runat="server">Text: </asp:label><asp:label id="lblValue" runat="server" visible="true" ></asp:label><br /><br />
<asp:label id="lblMsg" visible="true" runat="server" >Message: </asp:label><asp:label id="lblMsgValue" runat="server" visible="true" >Click button...</asp:label><br /><br />
<asp:Button id="btnGo" Text="Go" OnClick="btnGo_Click" runat="server"/>
</div>
</body>
ASPX.VB:
Protected Sub btnGo_Click(sender As Object, e As EventArgs)
lblMsgValue.Text = "The value is *" & lblValue.Text & "*"
End Sub
I am always getting nothing as output. Any idea?
How interesting. I had NEVER noticed that a label set client side does NOT persist.
Note that if you use code behind, set a label.Text, then the label DOES persist and survive a round trip. However, setting the label in JS? Well, you see the browser udpate instant, but when you post back, you lose that text.
This means you need to use say a text box - they DO persist, and even when changed client side.
So, for example this code:
<asp:Button ID="Button2" runat="server"
Text="Js Code" Width="114px"
OnClientClick="setlabel();return false" />
<br />
<asp:Label ID="Label1" runat="server" Text="a" ClientIDMode="Static" ViewStateMode="Enabled"></asp:Label>
<br />
<asp:TextBox ID="TextBox1" runat="server" ClientIDMode="Static"></asp:TextBox>
<script>
function setlabel() {
vlable = document.getElementById("Label1");
vlable.innerHTML = 'Hello how are you';
vtextBox = document.getElementById("TextBox1")
vtextBox.value = "Js setup text box"
}
</script>
So, after we run the above button (js), then both the text box, and the label will update and you see the results in the browser.
However, now drop in another button like this:
<asp:Button ID="Button1" runat="server" Height="26px" Text="Set Lable" Width="129px" />
And code behind:
Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
Debug.Print(Label1.Text)
Debug.Print("Text box = " & TextBox1.Text)
End Sub
Output (after running client side js button).
a
Text box = Js setup text box
So we see the Text="a" of the label, while it did change in the browser, when we post back, it does not survive WHEN changed client side.
As noted, if code behind changes a label - it does persist, and does survive around trips. But the label does not.
However, a text box, or hidden field and most controls that show/have the ability to hold data or a value will survive - labels are just not one of those controls.
I'm struggling to find a way to solve this.
I have a gridview and the first column of it is a DropDownList defined in an Itemtemplate:
<asp:GridView ID="gvXYZ" runat="server" DataKeyNames="Serial, XYZValue">
<Columns>
<asp:TemplateField HeaderText="Status">
<ItemTemplate>
<asp:DropDownList ID="ddlStat" runat="server" OnSelectedIndexChanged="ddlStat_SelectedIndexChanged"><asp:ListItem> </asp:ListItem><asp:ListItem> </asp:ListItem><asp:ListItem>OK</asp:ListItem><asp:ListItem>NG</asp:ListItem></asp:DropDownList>
</ItemTemplate>
<FooterStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:TemplateField>
</Columns>
</asp:GridView>
The user is presented with an empty choice, OK or NG as possible selections.
How can I trigger either JavaScript or VB side to run a function when the user makes any selection in any of the DDL in the grid?
In order to complete what asked, the user has to have either OK or NG selected.
I'm trying to tie the Save button to the fact that the grid has been completed.
I know I can run JavaScript on a HTML dropdown so I tried to create a function to do it and from an article I found I tried to run a VB method from a javascript function:
function ddlStat_SelectedIndexChanged() {
var someValueToPass = 'Hello server';
__doPostBack('CustomPostBack', someValueToPass);
}
the script never runs, the postback does not occur and the VB side code:
Protected Sub ddlStat_SelectedIndexChanged(sender As Object, e As EventArgs)
Dim x As Integer
For x = 1 To 10 : x = x + 1 : Next
End Sub
is never triggered either.
I thought to do this on the VB side because I think I can more easily access properties of the grid, like the number of rows so I can check the DDL in each one of them.
Thank you for this and ask questions if I wasn't clear.
Setting AutoPostback property of the drop down should raise a post back call to the server side. JS function can be called using the HTML event onchange
<asp:DropDownList ID="MyDropDown" runat="server" AutoPostBack="True"
OnSelectedIndexChanged="SelectedChange" onchange="YourChangeFun(this);">
</asp:DropDownList>
Javascript:
<script type="text/javascript">
function YourChangeFun(ddl)
{
alert(ddl.selectedIndex);
}
</script>
I have a RadNumericTextBox in a DetailsViewon a ASP.Net Web Page. I am trying to access this in JavaScript (jQuery). I have successfully got the RadNumericTextBox as a variable in javaScript and when I inspect the page this variable contains all the properties including the value of the RNTB.
However I get undefined for the result of get_value(). That is according to the literature for Telerik the right way to get the value. I have also tried val, value, and Text. None of them work.
Here is the javaScript (jQuery) I am using
<script type="text/javascript">
function addZerosToBSB(sender) {
var BSB = $("#ctl00_XXXXXX_XXXXXXXWizard_XXXXXX_BSB");
alert(BSB.value);//undefined
alert(BSB.val);
alert(BSB.get_value()); // this is what telerik literature says to do but it is undefined
......
Here is the DetailsView
<asp:DetailsView runat="server" ID="XXXXXXXXXX" DataSourceID="XXXXXXX" Width="100%" DefaultMode="Edit" AutoGenerateRows="False" DataKeyNames="XXXXXXXXXX">
<FieldHeaderStyle Width="30%"></FieldHeaderStyle>
<Fields>
<asp:TemplateField HeaderText="BSB">
<EditItemTemplate>
<telerik:RadNumericTextBox runat="server" ID="BSB" NumberFormat-GroupSeparator="" NumberFormat-DecimalDigits="0" Text='<%# (Eval("BSB") %>' ></telerik:RadNumericTextBox>
</EditItemTemplate>
</asp:TemplateField>
.........
I have tried BSB.text in the javaScript and this is what it returns
ƒ (a){return S(this,function(a){return void 0===a?
r.text(this):this.empty().each(function()
{1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||
(this.textContent=a)})},null,a,arguments.length)}
My question is how can I get the value of the RadNumericTextBox in javaScript and then how can I set it?
In jQuery you have to use BSB.val()
For my web app, I tried to populate dropdownlist (DDL) based on what client click on the calendar extender ( I have this declared in codebehind vb.net to load it from database) using AsyncPostBackTrigger (because I dont want the page to autopostback). I have the button to fire the date selected and it did worked to populate the DDL except not really the way I wanted it to. Instead of updating it in the existing DDL, it creates a new DDL besides the existing ones. I tried looking for solution but did not managed to find any. Anyone can help me figure out why this happens and how to fix this?
Here's my asp.net & javascript code
<asp:Label ID="label16" runat = "server" Text="Select the date"></asp:Label></td>
<td id="Td29" style="width:290px;" runat="server">
<asp:TextBox ID="tbPostingDt" runat="server" style ="width:174px;"></asp:TextBox>
<asp:Button ID="ClickBtn" runat="server" Text="Click" style="display:none" OnClick="ClickBtn_Click" />
<asp:ImageButton ID="CalendarBtnPostingDt" runat="server" ImageUrl="~/Images/Calendar_scheduleHS.png" AlternateText="Click to display calendar"/>
<cc1:CalendarExtender ID="calPost" runat="server" PopupButtonID="CalendarBtnPostingDt"
TargetControlID="tbPostingDt" OnClientDateSelectionChanged="dateSelectionChanged" Format="dd-MMM-yyyy" Enabled="True"></cc1:CalendarExtender></td>
<asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="label18" runat = "server" Text="Post Cycle No"></asp:Label></td>
<td id="Td33" style="width:290px;" runat="server">
<asp:DropDownList ID = "ddlPostCycleNo" runat = "server" style ="width:180px;">
<asp:ListItem>ALL</asp:ListItem>
</asp:DropDownList> </td>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ClickBtn" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
function dateSelectionChanged(sender, args) {
var PostingDt = document.getElementById('<%= tbPostingDt.ClientID%>').value.trim();
var clickButton = document.getElementById("<%= ClickBtn.ClientID %>");
clickButton.click();
}
nevermind I figured it out already. I used the ontextChanged for the textbox when user select the date from calendar, and removed OnClientDateSelectionChanged, triggers and dummy button. I keep the UpdatePanel and it works just the way I wanted.
im stuck with Javascript in Asp.net...
I made a TextBox named tbValidFrom and another named tbValidTo.
I also made two ModalPopups.
Then i try to open the ModalPopupExtenders when the TextBoxes get focus:
<script type="text/javascript">
$('#tbValidTo').focus(function () {
$find('ModalPopupExtenderNV1').show();
})
$('#tbValidFrom').focus(function () {
$find('ModalPopupExtenderNV2').show();
})
</script>
but it doesnt finds tbValidTo or ModalPopUpExtender ?
Runtime-Error in Microsoft JScript: Object expected
Here is one of the two ModalPopupExtenders and TextBoxes:
<asp:TextBox ID="tbValidFrom" runat="server"></asp:TextBox>
<asp:UpdatePanel ID="UpdatePanelNV2" runat="server" RenderMode="Inline" UpdateMode="Conditional">
<ContentTemplate>
<cc1:ModalPopupExtender ID="ModalPopupExtenderNV2" runat="server" TargetControlID="HiddenField6"
PopupControlID="PanelNewVersion" BackgroundCssClass="modalBackground" BehaviorID="ModalPopupExtenderNV2"
Enabled="True" />
<asp:HiddenField ID="HiddenField6" runat="server" />
</ContentTemplate
</asp:UpdatePanel>
The same as above is with the other ModalPopupExtender and TextBox...
Help would be really nice.
Thanks
Edit: Yes i use a masterpage!
Fails where it is marked yellow.
your jQuery syntax is wrong.
change your script to:
<script type="text/javascript">
$('#tbValidTo').focus(function () {
$(this).find('#<%=ModalPopupExtenderNV1.ClientID%>').show();
});
$('#tbValidFrom').focus(function () {
$(this).find('#<%=ModalPopupExtenderNV2.ClientID%>').show();
})
</script>
elements that has runat="server" will eventually end with a different ID than you entered in the aspx file.
i used the <%= %> to get the 'final' id.
hope that helps
Seeing that markup there is two chances for the issues.
With the ModalPopupExtender.
Where you have given the panel "PanelNewVersion" . Seems like its missing in the markup.
In the Javascript code. If you want to hide that Popup, give the name of the panel. NOt the name of the ModalPopupextender.
Also you have given an update panel there in page, so you can easily handle the modalpopup in any srever side event of your textbox.
Otherwise, if you want to use the Modal popup ijn client side, use jQuery Modalpopup. That will the better option.
ASP.NET Can modify the ID's of elements, if you use a Masterpage the element id's will be modified to something like the following : ctl001_ContentPlaceHolder1_tbValidFrom
To get around this ASP.NET modification of your elements you can use ASP.NET Inline Expressions to get the rendered ID from the object.
See the answer to the following question for more information on ASP.NET Inline Expressions
You can look at changing the Client ID Mode (The way ASP.NET Modifies IDs when the page is rendered) here :
ASP.NET Client ID Modes
EDIT :
The AjaxControlToolkit's ModalPopupExtender is not rendered on the page as a html element, therefore you cannot find this item using the ClientID of the ModalPopupExtender.
You must use the BehaviourID to call the show function on.
The below code should work correctly :
$('#<%= tbValidTo.ClientID %>').focus(function () {
$find('ModalPopupExtenderNV1').show();
})
$('#<%= tbValidFrom.ClientID %>').focus(function () {
$find('ModalPopupExtenderNV2').show();
});
This will find the textbox object using the ASP.NET Inline expressions to find the client ID and will then find the behaviour ID and execute the Show method.
Example Markup :
<script type="text/javascript">
$(document).ready(function() {
$('#<%= tbValidFrom.ClientID %>').focus(function () {
$find('ModalPopupExtenderNV2').show();
});
});
</script>
<asp:TextBox ID="tbValidFrom" runat="server"></asp:TextBox>
<asp:UpdatePanel ID="UpdatePanelNV2" runat="server" RenderMode="Inline" UpdateMode="Conditional">
<ContentTemplate>
<cc1:modalpopupextender id="ModalPopupExtenderNV2" runat="server" targetcontrolid="HiddenField6"
popupcontrolid="PanelNewVersion" backgroundcssclass="modalBackground" behaviorid="ModalPopupExtenderNV2"
enabled="True" />
<asp:HiddenField ID="HiddenField6" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel ID="PanelNewVersion" runat="server">
testing panel
</asp:Panel>