Questions on UI for ASP.NET AJAX Forum

1 answer

267 views

JQuery to Disable RadComboBox on CheckBox click

I have a table that has a column of RadComboBox controls and a column of CheckBox controls so that each ComboBox has a CheckBox next to it. When the checkbox next to a ComboBox is checked/unchecked, I want to use JQuery to disable/enable the corresponding ComboBox. Each CheckBox has a "check-all" class. I am having trouble with the syntax for doing this, but I was able to get close using examples I found. The code below successfully enables and disables all ComboBox controls on the page (because of the "each" function). However, I just want to find the corresponding ComboBox next to the CheckBox, then disable it and I want to do this with only one function.

$('.check-all').click(function () {

var checkbox = $(this).find('input:checkbox:first')

$('.RadComboBox').each(function () {

var combo = this.control;

if (checkbox.is(':checked')) {

combo.disable();

}

else {

combo.enable();

}

});

Here is another working example where I specify the CheckBox and the ComboBox specifically. But, I am trying to do this with a single function because I have 30 ComboBoxes and don't want to have to copy and maintain the below code 30 times.

$('#<%= cbxOne.ClientID %>').click(function () {

var combo = $find("<%= cmbOne.ClientID %>");

if ($(this).is(':checked')) { combo.disable(); }

else { combo.enable(); }

})

ComboBox

answered on 27 Jun 2013

1 answer

100 views

TabStrip PostBack Problem

Hi,
I have a TabStrip Control,where i am loading Usercontrols dynamically.
Here TabStrip is loading the usercontrol,But when i click the Button inside usercontrol,it is not firing.
If i remove the RadAjaxManager,it is working perfectly.
How to accomplish this,without having a postback.
(Here i have added Calculator.ascx usercontrol,u can add dummy usercontrol for map.)
)

Here is the Code (Design Page)
-------------------------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm5.aspx.cs" Inherits="TestApp.WebApp.DUMMY.WebForm5" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
<title>ASP.NET TabStrip Demo - Dynamic PageView Creation via AJAX</title>
<%-- <link href="styles.css" rel="stylesheet" type="text/css" />--%>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" EnableRoundedCorners="false" />
<telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadTabStrip1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadTabStrip1"></telerik:AjaxUpdatedControl>
<telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="LoadingPanel1"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="RadMultiPage1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadMultiPage1"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>

<script type="text/javascript">
/* <![CDATA[
// function onTabSelecting(sender, args) {
//
// if (args.get_tab().get_pageViewID()) {
// args.get_tab().set_postBack(true);
// }
// }
/* ]]> */
</script>
<div class="exampleWrapper">
<telerik:RadTabStrip ID="RadTabStrip1" SelectedIndex="0" AutoPostBack="true"
runat="server" MultiPageID="RadMultiPage1" Width="900" Align="Justify"
OnTabClick="RadTabStrip1_TabClick"> <%--OnClientTabSelecting="onTabSelecting"--%>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" OnPageViewCreated="RadMultiPage1_PageViewCreated">
</telerik:RadMultiPage>
</div>
</form>
</body>
</html>

CodeBehind
--------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;
using Telerik.Web.UI;

namespace TestApp.WebApp.DUMMY
{
public partial class WebForm5 : System.Web.UI.Page
{

protected void Page_Init(object sender, System.EventArgs e)
{
if (!Page.IsPostBack)
{
AddTab("Map");
AddPageView(RadTabStrip1.FindTabByText("Map"));
AddTab("Calculator");
// AddTab("RadHTMLChart");
}
}

private void AddTab(string tabName)
{
RadTab tab = new RadTab();
tab.Text = tabName;
tab.Width = Unit.Pixel(200);
RadTabStrip1.Tabs.Add(tab);
}

protected void RadMultiPage1_PageViewCreated(object sender, RadMultiPageEventArgs e)
{
//string userControlName = e.PageView.ID + "CS.ascx";

if (e.PageView.ID == "Map")
{
string userControlName = "~/Controls/Map.ascx";//e.PageView.ID + "CS.ascx";
Control userControl = Page.LoadControl(userControlName);
userControl.ID = e.PageView.ID + "_userControl";

e.PageView.Controls.Add(userControl);
}

if (e.PageView.ID == "Calculator")
{
string userControlName = "~/Controls/Calculator.ascx";//e.PageView.ID + "CS.ascx";
Control userControl = Page.LoadControl(userControlName);
userControl.ID = e.PageView.ID + "_userControl";

e.PageView.Controls.Add(userControl);
}

}

private void AddPageView(RadTab tab)
{
RadPageView pageView = new RadPageView();
pageView.ID = tab.Text;
RadMultiPage1.PageViews.Add(pageView);
tab.PageViewID = pageView.ID;
}

protected void RadTabStrip1_TabClick(object sender, RadTabStripEventArgs e)
{
AddPageView(e.Tab);
e.Tab.PageView.Selected = true;
}

}
}

UserControl
-----------------------
Calculator.ascx
------------------
<script type="text/javascript" language="JavaScript">
function get_round(X) { return Math.round(X * 100) / 100 }

function showpay() {
if ((document.getElementById('<%=loan.ClientID%>').value == "") || (document.getElementById('<%=months.ClientID%>').value == "") || (document.getElementById('<%=rate.ClientID%>').value == "")) {
document.getElementById('<%=pay.ClientID%>').value = "Incomplete data";
document.getElementById('<%=tot_amount.ClientID%>').value = "Incomplete data";
document.getElementById('<%=tot_interest.ClientID%>').value = "Incomplete data";
document.getElementById('<%=yearly_interest.ClientID%>').value = "Incomplete data";
document.getElementById('<%=interest_pa.ClientID%>').value = "Incomplete data";
document.getElementById('<%=interest_pm.ClientID%>').value = "Incomplete data";

}
else {

var princ = document.getElementById('<%=loan.ClientID%>').value;
var term = document.getElementById('<%=months.ClientID%>').value;
var intr = document.getElementById('<%=rate.ClientID%>').value / 1200;
var yrs = document.getElementById('<%=months.ClientID%>').value / 12;

document.getElementById('<%=pay.ClientID%>').value = get_round(princ * intr / (1 - (Math.pow(1 / (1 + intr), term))));
document.getElementById('<%=tot_amount.ClientID%>').value = get_round(document.getElementById('<%=pay.ClientID%>').value * term);
document.getElementById('<%=tot_interest.ClientID%>').value = get_round(document.getElementById('<%=tot_amount.ClientID%>').value / yrs);
document.getElementById('<%=yearly_interest.ClientID%>').value = get_round(document.getElementById('<%=tot_interest.ClientID%>').value / yrs);
document.getElementById('<%=interest_pa.ClientID%>').value = get_round(document.getElementById('<%=yearly_interest.ClientID%>').value / princ * 100);
document.getElementById('<%=interest_pm.ClientID%>').value = get_round((document.getElementById('<%=yearly_interest.ClientID%>').value / princ * 100) / 12);

}
}
</script>
<div id="Property_form">
<div class="EMICALCdiv">
<fieldset>
<h2>
EMI Calculator
</h2>
<table align="center" class="EMICCALCtblnew">
<tbody>
<tr>
<td width="20%">
<span class="label">Loan Amount<font color="#FF0000">*</font> </span></p>
</td>
<td style="margin-left: 5px" width="20%">
<asp:TextBox ID="loan" runat="server" Width="200px" CssClass="propertydropdown"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<p class="label">
Loan Tenure (Months)<font color="#FF0000" face="Verdana" size="2">*</font></p>
</td>
<td>
<asp:TextBox ID="months" runat="server" Width="200px" CssClass="propertydropdown"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<p class="label">
Interest Rate (Reducing)<font color="#FF0000" face="Verdana" size="2">*</font></p>
</td>
<td>
<asp:TextBox ID="rate" runat="server" Width="200px" CssClass="propertydropdown"></asp:TextBox>
</td>
<td>
%
</td>
</tr>
<tr>
<td>
<p class="label">
Monthly Payment (EMI)</p>
</td>
<td>
<p align="center">
<input type="button" id="button" name="button" value="Click" class="normallink" onclick="showpay()" />
<%-- <asp:Button ID="button" runat="server" Text="Click" OnClientClick="return showpay();" />--%>
</p>
</td>
</tr>
<tr>
<td>
<span class="label">Calculated Monthly EMI </span>
</td>
<td>
<asp:TextBox ID="pay" runat="server" Width="200px" CssClass="propertydropdown"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<span class="label">Total Amount with Interest </span>
</td>
<td>
<asp:TextBox ID="tot_amount" runat="server" Width="200px" CssClass="propertydropdown"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<span class="label">Flat Interest Rate PA </span>
</td>
<td width="109">
<asp:TextBox ID="interest_pa" runat="server" Width="200px" CssClass="propertydropdown"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<span class="label">Flat Interest Rate PM </span>
</td>
<td>
<asp:TextBox ID="interest_pm" runat="server" Width="200px" CssClass="propertydropdown"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<span class="label">Total Interest Amount </span>
</td>
<td width="109">
<asp:TextBox ID="tot_interest" runat="server" Width="200px" CssClass="propertydropdown"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<span class="label">Yearly Interest Amount </span>
</td>
<td>
<asp:TextBox ID="yearly_interest" runat="server" Width="200px" CssClass="propertydropdown"></asp:TextBox>
</td>
</tr>
</tbody>
</table>
</fieldset>

</div>
</div>

Thanks,
Prasanth

TabStrip

answered on 27 Jun 2013

1 answer

148 views

On Edit Click, Grid Disappears

When I click the edit button of my grid, the grid disappears. I have read about advanced data binding using the NeedDataSource event, but I do not think this is applicable in my case.

I have it going to the database to get 2 other objects first, (using if/else blocks to go down further when there are no returned errors), and in the last if block, its using those 2 objects to go to the database to retrieve my final data set. I have to do it this way because the dataset will be dynamic based on values from the first 2 objects. When I get this back, I want to use some of the variables from the first 2 objects (if a field is editable, max field length etc), to update the columns in the gridview to readonly or their length etc. Then after the user edits the fields, it will make the changes to the DataSet (which is the grids DataSource) and when they are done making all changes (not just to one row), I want to send the entire DataSet to the database to a stored proc that will perform the updates as needed.

Is there anyway to make this happen? Can anyone point me in the right direction?

Grid

answered on 27 Jun 2013

2 answers

50 views

Urgent: Please help to delete attachment in post

Urgent....

Please help to delete the attachment in following post

http://www.telerik.com/community/forums/aspnet-ajax/scheduler/scheduler-skin-problem.aspx

General Discussions

answered on 27 Jun 2013

1 answer

59 views

Resource grouping demo for manual mode

Hi
I m using radscheduler and i want the grouping of the resources with ResoucePopulationMode="Manual".I m using the WCF service with radscheduler.I m facing the issue of "Unable to get value of the property 'get_visibleRangeStart': object is null or undefined".Can anybody help me to remove th issue.

Thanks
Gaurav Rana

Scheduler

answered on 27 Jun 2013

1 answer

61 views

Sections in Telerik RadGrid.

Hi,

We are using Telerik RadGrid version ASP.NET AJAX Q3 2009 SP2 with Visual Studio 2008 and IE 8. I have to display a two-level read-only grid. First level grid will have certain rows and columns. When each row is expanded, the inner / detail level grid should display data in three sections. Please refer to the attached screenshot for reference. All sections / values are read-only. Each section has a different background color and the section name should be displayed in BOLD. Can you explain how to achieve this functionality ?

Your help is very much appreciated.

Thanks
Bhanu.

Grid

answered on 27 Jun 2013

4 answers

107 views

<br/> in RadAlert causes left&right border to disappear

Hi,

I'm using a RadAlert to display a text like this: "Test <br/> Test <br/>". The line breaks cause the left and right border of the window to disappear. This is only the case when using the RadAlert server-side.

windowManager.RadAlert("Test <br/> Test <br/> Test", null, null, "Title", string.Empty);

This will work:

windowManager.RadAlert("Test Test Test", null, null, "Title", string.Empty);

Using this text client-side doesn't cause any problems (but the generated code differs from the server-side radalert - there is an additional div around the message).

windowManager.radalert("Test <br/> Test <br/> Test", null, null, "Title");

How can I add line breaks server-side without having any layout problems?

Window

answered on 27 Jun 2013

5 answers

163 views

RadSearchBoxes inside RadTabStrip not render starting from 2nd tab

Hello,
I have a render problem with RadSearchbox. (or RadTabStrip)
On my page, I have a RadTabStrip including 3 tab pages and each page have one RadSearchBoxe.
Tab page 1 was selected by default.

Problem is on first load of form, RadSearchbox from second tab page was not rendered.
It's default search button is displaying outside (right hand side) of the control. Please see the attachment.
If page was post back from second page (eg. search from that searchbox), the radsearchbox from 2nd page was corrected
and the one from first tab page went wrong.

I don't know this is caused by RadSearchbox or RadTabStrip.

Please help.
I don't want to do any postback from tab changes.

Thanks in advanced.

SearchBox

answered on 27 Jun 2013

2 answers

168 views

RadImageTile

hi ,
i am using telerik 2013 Q3 , i can't use javascript in NavigateURL of RadImageTile . have y a way to do it ? thnak you .

function openRadWindow(Page) {

var oWnd = radopen(Page, Page + "1");

oWnd.setSize(315, 250);

oWnd.Center();

}

<telerik:RadImageTile Name="Sofia" Shape="Wide"

NavigateUrl='javascript:openRadWindow("..\Shared/Form/FormReport.aspx?report=Rep1"); return false;' Target="_blank" Width="300" Font-Bold="True" ForeColor="White" ToolTip='Cliquez ici pour afficher le rapport' Selected="False" Font-Italic="True" Font-Size="X-Large">

<Title Text="MyText" ></Title>

<PeekTemplateSettings AnimationDuration="900" ShowInterval="8000" CloseDelay="7000"

Animation="Slide" Easing="easeInQuint" ShowPeekTemplateOnMouseOver="true" HidePeekTemplateOnMouseOut="true" />

</telerik:RadImageTile>

Ajax

answered on 27 Jun 2013

5 answers

302 views

remember password

I have a login form with an email RadTextBox and a password RadTextBox. When I log in, FireFox asks me if I want to remember my password. I click on "Remember" and when I go back to the log in page, only the email RadTextBox is filled in automatically. The password RadTextBox is empty. How do I make the password fill in automatically?

Thanks,

Input

answered on 27 Jun 2013