Issue related to inbuilt javascript function of Telerik controls - html

I have asp.net webapplication having some telerik controls.
i have a RadTextBox(txtSearch) and RadButton(btnSearch) on .aspx page.
i have written following validation for empty Textbox:
$('#btnSearch').click(function () {
if ($('#txtSearch_text').val() == '') {
$('#txtSearch_text').addClass('validation');
return false;
}
else {
$('#txtSearch_text').removeClass('validation');
}
});
in validation class i have set Border-left:2px solid red
now problem is that when i click on btnSearch it sets validation class to txtSearch textbox, but when i use mouseover on txtSearch textbox class name suddenly changed to someother from inbuilt javascript function of Telerik. in this Javascript function of telerik TextBox, it changes class name of textbox to another class.
and this execution of change class occurs after executing custom javascript function.
so i want to execute customer javascript function after executing inbuilt functions of telerik. how to do it?
Thanks

You can define invalid states for RadInputs. RadTextbox by itself cannot be invalid because you can put anything in a textbox (unlike a numeric textbox, for example), yet here is a starting point:
<telerik:RadTextBox ID="RadTextBox1" runat="server">
<InvalidStyle BackColor="Red" />
</telerik:RadTextBox>
<asp:RequiredFieldValidator ID="TextBoxRequiredFieldValidator" runat="server" Display="Dynamic"
ControlToValidate="RadTextBox1" ErrorMessage="The textbox can not be empty!">
</asp:RequiredFieldValidator>
<telerik:RadButton ID="RadButton1" runat="server" OnClientClicked="test" Text="submit"
AutoPostBack="false" />
<script type="text/javascript">
function test() {
var tb = $find('RadTextBox1');
if (tb.get_value() == "") {
$find('RadTextBox1')._invalidate();
$find('RadTextBox1').updateCssClass();
}
}
</script>
Tampering directly with the HTML of complex controls may get you nowhere because they will try to update/fix their state according to the logic they have.

Related

How to Pass Text Box Value to Query String Using HyperLink Field In Client Side Using Asp.Net

Iam developing application in asp.net c#, in that i have a requirement to pass text box value through query string without using server side code,
in that iam trying some code below, but its not working for me.
<asp:HyperLink ID="hlnkHistory" runat="server" Text="History" ForeColor="Green" ImageUrl="~/images/History2.png" Font-Bold="true" Target="_blank" NavigateUrl="~/WebFormReports/History.aspx?SerialNo=<%#Eval('txtSerialNo.ClientID')%>" ToolTip="View History"></asp:HyperLink>
When iam assign value directly like the below code its working fine.
<asp:HyperLink ID="hlnkHistory" runat="server" Text="History" ForeColor="Green" ImageUrl="~/images/History2.png" Font-Bold="true" Target="_blank" NavigateUrl="~/WebFormReports/History.aspx?SerialNo=1" ToolTip="View History"></asp:HyperLink>
Note: i need not server side code to pass value
like
protected void lnkNavigate_Click(object sender, EventsArgs e)
{
Response.Redirect("MyLocation.aspx?value=" + myTextBox.Text, false);
}
if it is not possible means please tell me is there any another option to pass text box value to query string like a href & link button
any help would be appreciated.. thanks in advance..
If you want to still use the asp:HyperLink then you can use this snippet.
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:HyperLink ID="hlnkHistory" runat="server" Text="History" ForeColor="Green" ImageUrl="~/images/History2.png" Font-Bold="true" Target="_blank" NavigateUrl="~/WebFormReports/History.aspx?SerialNo=" ToolTip="View History" onclick="setHyperlink()"></asp:HyperLink>
<script type="text/javascript">
function setHyperlink() {
var value_hyperlink = $("#<%=hlnkHistory.ClientID %>").attr("href");
var value_textbox = $("#<%=TextBox1.ClientID %>").val();
$("#<%=hlnkHistory.ClientID %>").attr("href", value_hyperlink + value_textbox);
}
</script>
If you don't need that hyperlink, you can use a somewhat simpler javascript function.
location.href = "~/WebFormReports/History.aspx?SerialNo=" + $("#<%=TextBox1.ClientID %>").val();

How to access Input type="Checkbox" control inside <dx:ASPxGridView/>(Dev Express) at server side(c#)

I have a dx:ASPxGridView (Dev express gridview) which contains HTML checkboxes - input type="checkbox" control.
Problem is how can i access these HTML checkboxes at server side, so that i can check those checkboxes according to condition.
Please suggest me how can i access these HTML checkboxes on server side.
Code image can be found here
Thanks
Girish Rawat
First, to access a HTML element on a server, you need to mark it with the runat="server" attribute.
To access your checkbox, handle the ASPxGridView.HtmlDataCellPrepared event. In the event handler, you can get your input by using the ASPxGridView.FindRowCellTemplateControl method. You will also need to set ID for the input.
<dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False" OnDataBinding="ASPxGridView1_DataBinding" OnHtmlDataCellPrepared="ASPxGridView1_HtmlDataCellPrepared" KeyFieldName="ID">
<Columns>
<dx:GridViewDataCheckColumn VisibleIndex="0">
<DataItemTemplate>
<input id="check" type="checkbox" runat="server" />
</DataItemTemplate>
</dx:GridViewDataCheckColumn>
</Columns>
<Styles AdaptiveDetailButtonWidth="22"></Styles>
</dx:ASPxGridView>
protected void ASPxGridView1_HtmlDataCellPrepared(object sender, ASPxGridViewTableDataCellEventArgs e) {
HtmlInputCheckBox check = (HtmlInputCheckBox)ASPxGridView1.FindRowCellTemplateControl(e.VisibleIndex, e.DataColumn, "check");
check.Checked = GetValue((int)e.KeyValue);
}
public bool GetValue(int id) {
// your logic
return id % 2 == 0;
}

unable to get checked property of htmlinoutcheckbox on server side(code behind)

I have created a html input check-boxes dynamically from code behind and after rendering the check-boxes on to aspx page I'm unable to get the checked property of those check-boxes on button click event. week is the enum with alldays of a week. Here the sample code.
HtmlInputCheckBox chkbx = new HtmlInputCheckBox();
chkbx.Attributes.Add("id", ((week)i).ToString());
chkbx.Attributes.Add("runat", "server");
chkbx.Attributes.Add("name", ((week)i).ToString());
chkbx.Attributes.Add("value", "checked");
HtmlGenericControl label = new HtmlGenericControl("label");
label.Attributes.Add("for", ((week)i).ToString());
if (i == 1 || i == 7)
{
label.Attributes.Add("class", "dow disabled");
label.Attributes.Add("disabled", "true");
}
else
{
label.Attributes.Add("class", "dow");
chkbx.Checked = true;
}
label.InnerText = ((week)i).ToString().Substring(0,2);
_dowcontrol.Controls.Add(chkbx);
_dowcontrol.Controls.Add(label);
ASPX page
<body>
<form id="form1" runat="server" method = "post">
<t2:mycontrol ID="SampleControl" runat="server" >
</t2:mycontrol>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</form>
</body>
ASPX.CS page
What should be inside button click?
Tried
Request.Form["***"], FindControl("***")
In order for your dynamically created controls to interact with viewstate, events and other stages in the page life-cycle, they need to be created in the Init event. Creating these controls later in the life-cycle will exclude them from taking part in post value binding, viewstate binding, etc. Also note that you must recreate the controls on EVERY postback.
protected void Page_Init(object sender, EventArgs e)
{
// Do any dynamic control re/creation here.
}

Is there a numeric UpDown control for ASP.NET?

Is there a way I can use a numeric updown in ASP.NET without using JavaScript?
And if not, is there an alternative?
I was trying to do the same thing, and it turns out the asp textbox has an option for it. what worked for me was this:
<asp:TextBox TextMode="Number" runat="server" min="0" max="20" step="1"/>
this gave me a textbox which, when mouse hovers over it or is given focus, shows the up-down controls, and only allows numbers from min to max.
it works the same as
<input type="number" min="0" max="20" step="1" />
Please look into the Ajax Control Toolkit
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/NumericUpDown/NumericUpDown.aspx
<ajaxToolkit:NumericUpDownExtender ID="NUD1" runat="server"
TargetControlID="TextBox1"
Width="100"
RefValues="January;February;March;April"
TargetButtonDownID="Button1"
TargetButtonUpID="Button2"
ServiceDownPath="WebService1.asmx"
ServiceDownMethod="PrevValue"
ServiceUpPath="WebService1.asmx"
ServiceUpMethod="NextValue"
Tag="1" />
Also consider adding the reference with NuGet by using PM> Install-Package AjaxControlToolkit
I think the following html can answer your question:
<head runat="server">
<title>Numeric Up Down</title>
<script type="text/jscript">
function Load() {
/*numericUpDown1.value = or*/ document.getElementById("numericUpDown1").value = parseFloat(document.getElementById("<%=NumericUpDown1.ClientID%>").value);
}
function Change() {
document.getElementById("<%=NumericUpDown1.ClientID%>").value = document.getElementById("numericUpDown1").value; //or numericUpDown1.value
}
</script>
</head>
<body onload="Load()">
<form id="form1" runat="server">
<div>
<input type="number" id="numericUpDown1" onchange="Change()" />
<asp:HiddenField ID="NumericUpDown1" runat="server" />
</div>
</form>
</body>
And then on the asp server side code in C# or Visual Basic, you can treat that HiddenField as NumericUpDown, but note that his value is string, and not decimal, like System.Windows.Forms.NumericUpDown control, or float, or double, or int, so you will have to Parse it to one of these types for what you need the most.
If you want to style the numeric up down, then in javascript it is simple. Just set document.getElementById("numericUpDown1").style, but if you want to do it through the asp server side code in C# or Visual Basic, then the html must be different:
<head runat="server">
<title>Numeric Up Down</title>
<script type="text/jscript">
function Change() {
document.getElementById("<%=NumericUpDown1.ClientID%>").value = document.getElementById("numericUpDown1").value; //or numericUpDown1.value
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<% this.Response.Write(string.Format("<input type='number' id='numericUpDown1' value='{0}' onchange='Change()' style='{1}' />", this.NumericUpDown1.Value, this.numericUpDown1Style)); %>
<asp:HiddenField ID="NumericUpDown1" runat="server" />
</div>
</form>
</body>
numericUpDown1Style is a protected field whose type is string defined in the asp server side code in C# or Visual Basic.
If you want to give it a class and not to style it, then the html must be:
<head runat="server">
<title>Numeric Up Down</title>
<script type="text/jscript">
function Change() {
document.getElementById("<%=NumericUpDown1.ClientID%>").value = document.getElementById("numericUpDown1").value; //or numericUpDown1.value
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<% this.Response.Write(string.Format("<input type='number' id='numericUpDown1' value='{0}' onchange='Change()' class='{1}' />", this.NumericUpDown1.Value, this.numericUpDown1CssClass)); %>
<asp:HiddenField ID="NumericUpDown1" runat="server" />
</div>
</form>
</body>
numericUpDown1CssClass is a protected field whose type is string defined in the asp server side code in C# or Visual Basic.
If you want to style it and give it a class, then html is like html #2 or html #3, but the only change is in the following line:
<% this.Response.Write(string.Format("<input type='number' id='numericUpDown1' value='{0}' onchange='Change()' style='{1}' class='{2}' />", this.NumericUpDown1.Value, this.numericUpDown1Style, this.numericUpDown1CssClass)); %>
I think you know what is numericUpDown1Style and numericUpDown1CssClass from #2 and #3
RECOMMENDED TIP:
If your website contains a lot of numeric up down controls that are used in your asp server side code, and this is disadvantageous to create all of them this way, then you can add new "Web User Control" item to your website and name it "NumericUpDown". Then in its source html you can copy the html #1 or html #2 or html #3 or html #4 that I posted above (depends on if you want to style the numeric up down or not, or give it a class or not, or both or not) with some removes and changes, because it is not "WebForm", but "Web User Control"
and in the asp server side code make the following properties (They are in C#, but if you use Visual Basic, I don't think it will be a problem for you to translate the code):
public decimal Value
{
get
{
return decimal.Parse(this.HiddenField.Value);
}
set
{
this.HiddenField.Value = value.ToString();
}
}
//Like the System.Windows.Forms.NumericUpDown.Value, but if you dislike 'decimal', and you want other type, then you can change the return type and the type Parse.
//Note that the ID of the HiddenField is simply "HiddenField", and not "NumericUpDown1", so make sure in the Source html to rename "NumericUpDown1" to "HiddenField", but probably you would like a different ID, so if you gave it different ID, then ensure that in the code you refer this HiddenField with the ID you chose, and not "HiddenField" or "NumericUpDown1".
//The following properties are for only if you want to style your Numeric Up Down:
protected string style;
public string Style
{
get
{
return this.style;
}
set
{
this.style = value;
}
}
//If you chose, copied, pasted and changed html #2 or html #4, then don't forget to replace this.numericUpDown1Style to this.Style in the source html of the Web User Control.
//Optional
public Unit Width
{
get
{
int startIndex = this.style.IndexOf("width") + 6;
if (index != -1)
{
int endIndex = this.style.IndexOf(';', startIndex);
return Unit.Parse(this.style.Substring(startIndex, endIndex - startIndex));
}
return Unit.Empty;
}
set
{
if (this.style.Contains("width"))
{
this.style = this.style.Replace("width:" + this.Width.ToString() + ';', "width:" + value.ToString() + ';');
}
else
{
this.style += "width:" + value.ToString() + ';';
}
}
}
//The same you can do with the Height property.
//You can replace all the style code with the CssClass code instead, or just add it:
protected string cssClass;
public string CssClass
{
get
{
return this.cssClass;
}
set
{
this.cssClass = value;
}
}
//If you chose, copied, pasted and changed html #3 or html #4, then don't forget to replace this.numericUpDown1CssClass to this.CssClass in the source html of the Web User Control.
If you style the NumericUpDown, so know also that in every ASP.NET control, you can type after their ID .Style["style"] = "value".
If you want to be able to do this with NumericUpDown too, then change the type of the protected field style from string to MyStyle
There is the definition of MyStyle:
public class MyStyle
{
internal string style;
public string this[string style]
{
get
{
int startIndex = this.style.IndexOf(style) + style.Length + 1;
int endIndex = this.style.IndexOf(';', startIndex);
return this.style.Substring(startIndex, endIndex - startIndex)
}
set
{
this.style = this.style.Replace(style + ':' + this[style] + ';', style + ':' + value + ';')
}
}
}
Add this class to the Code of the Web User Control, and change the Style property:
public string Styles
{
get
{
return this.style.style;
}
set
{
this.style.style = value;
}
}
and then add the property:
public MyStyle Style
{
get
{
return this.style;
}
}
and change the line from:
protected string style;
to:
protected readonly MyStyle style = new MyStyle();
Don't forget in the source html of Web User Control, to replace this.Style to this.Styles.
NOTE: I didn't had patience to test the code by myself, so it might not work, so you'll have to fix it by yourself.
At least you understood my idea.
After the fixes, you can edit my answer and replace the wrong code with your fixed code.
I will appreciate it very much!
This Web User Control is the ASP NumericUpDown you wanted!
If you are stuck on .NET 4.0 and you want to use the native HTML5 input type "number" (rather than the NumericUpDown from Ajax Control Toolkit) you can use a combination of the ASP TextBox control with extra "type" tag:
<asp:TextBox runat="server" ID="txtMyTextBox" type="number" min="0" max="10" step="1"/>
If you want to prevent any text input, you could even add a FilteredTextBoxExtender from Ajax Control Toolkit:
<ajaxToolkit:FilteredTextBoxExtender runat="server" TargetControlID="txtMyTextBox" FilterType="Numbers" />

ZK - Invoking ZScript function of an included sub page

Say, I have a zul page (page1.zul) like so:
<zk>
<textbox id="textbox1" ></textbox>
<button label="Display" onClick="display()" ></button>
<include id="include1" ></include>
<zscript>
display() {
include1.setSrc("page2.zul");
java.lang.Class[] argTypes = new java.lang.Class[]{String.class};
org.zkoss.xel.Function fn = include1.getChildPage().getZScriptFunction("doDisplay", argTypes);
fn.invoke(null, textbox1.value);
}
</zscript>
</zk>
But, I get the error - "Attempt to invoke method getZScriptFunction on null value". So, include1.getChildPage() is returning a null value i.e. I am not able to retrieve "page2" using getChildPage() and I am not sure how to go about it.
My second page is shown below:(page2.zul)
<zk>
<label id="label1" ></label>
<zscript>
doDisplay(String value) {
label1.setValue(value);
}
</zscript>
</zk>
If I enter something in the textbox and click the "Display" button, I want to set the value of label in a different page(i.e page2) to the value in the textbox. The idea is to pass value of a component from one page to a zscript function of another included page.
You can do this instead of Passing value.
in Page2.zul
<zk>
<label id="label1" ></label>
<zscript>
doDisplay(String value) {
Textbox textbox=(Textbox)((Include)label1.getSpaceOwner()).getSpaceOwner().getFellowIfAny("textbox1");
label1.setValue(textbox.getValue());
}
</zscript>
</zk>
You can change file1 as follows:
<zk>
<textbox id="textbox1" ></textbox>
<button label="Display" onClick="display()" ></button>
<!-- <include id="include1" ></include> -->
<div id="include"></div>
<zscript>
display() {
include.appendChild(Executions.createComponents("page2.zul", include, null));
}
</zscript>
</zk>
My suggestion is to use EventQueue instead to prevent the coupling of the two zul file.
More details, please reference to the sample code.
http://zkfiddle.org/sample/379s7ev/3-A-sample-for-using-Event-queue-to-talk-with-other-include