Questions on UI for ASP.NET AJAX Forum

1 answer

57 views

Hierarachical grid expanded when loaded

How can I make a hierarchical grid (grid with header, details information) fully expanded when the page is loaded?

Grid

answered on 25 Oct 2011

4 answers

227 views

Rad Combo Box And How Take It's Focus Off

hi my dear friends:
i have two radcombobox on my page and i am controling their focus by jquery...
also i have some code on their OnClientFocus , therefore focus and blur are so important ...
my aspx and jquery code are like this : (without RadComboBox -> OnClientFocus )

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="Darman.WebForm4" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server"> 
        
                <title></title> 
        
                    <script src="../JQuery/jquery-1.4.1.js" language="javascript" type="text/javascript"></script> 
        
                <script type="text/javascript"> 
        
                    $(function() { 
        
                    $('input[id$=RadComboBox1_Input]').focus(); 
        
                    $('input[id$=RadComboBox1_Input]').select(); 
        
                    $('input[id$=RadComboBox1_Input]').bind('keyup', function(e) { 
        
                            var code = (e.keyCode ? e.keyCode : e.which); 
        
                            if (code == 13) { 
        
                                $('input[id$=RadComboBox1_Input]').blur(); 
        
                                $('input[id$=RadComboBox2_Input').focus(); 
        
                                $('input[id$=RadComboBox2_Input]').select(); 
        
                            } 
        
                        }); 
        
                        $('input[id$=RadComboBox2_Input]').bind('keyup', function(e) { 
        
                            var code = (e.keyCode ? e.keyCode : e.which); 
        
                            if (code == 38) { 
        
                                $('input[id$=RadComboBox2_Input]').blur(); 
        
                                $('input[id$=RadComboBox1_Input').focus(); 
        
                                $('input[id$=RadComboBox1_Input]').select(); 
        
                            } 
        
                        }); 
        
                    }); 
        
                        </script> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
                </telerik:RadScriptManager> 
        
                <div> 
        
                    <telerik:RadComboBox ID="RadComboBox1" runat="server" Skin="Outlook"> 
        
                        <Items> 
        
                            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem1"  
        
                                Value="RadComboBoxItem1" /> 
        
                            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem2"  
        
                                Value="RadComboBoxItem2" /> 
        
                            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem3"  
        
                                Value="RadComboBoxItem3" /> 
        
                            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem4"  
        
                                Value="RadComboBoxItem4" /> 
        
                        </Items> 
        
                    </telerik:RadComboBox> 
        
                    <telerik:RadComboBox ID="RadComboBox2" runat="server" Skin="Office2007"> 
        
                        <Items> 
        
                            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem1"  
        
                                Value="RadComboBoxItem1" /> 
        
                            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem2"  
        
                                Value="RadComboBoxItem2" /> 
        
                            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem3"  
        
                                Value="RadComboBoxItem3" /> 
        
                            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem4"  
        
                                Value="RadComboBoxItem4" /> 
        
                        </Items> 
        
                    </telerik:RadComboBox> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

it seems that radcombo box can not foreget it's focus and stick with that , therefore when i play with 2 buttons (enter=13 and upper key=38 as you see in the upper code - Jquery) For Changing Their Focus so RadComboBox OnClientFocus does not fire until i click on my page and Click On the RadComboBox Again...
These Lines do not work:
1-$('input[id$=RadComboBox1_Input]').blur();
2-$('input[id$=RadComboBox2_Input]').blur();
how can i take focus off from radcombo box and destroy it's highlight?
thanks a lot

ComboBox

answered on 25 Oct 2011

4 answers

134 views

[Solved] Pager is not displayed

I have RadGrid control on my page, when I look at it in design view it shows the pager. When I compile the project I see no pager at the bottom of the grid.

Here is my code for the grid.

<telerik:RadGrid ID="rgResults" runat="server" Skin="WebBlue" AllowPaging="true"
            AllowSorting="true" PageSize="20" ShowFooter="true" GridLines="None"
            AutoGenerateColumns="false" onpageindexchanged="rgResults_PageIndexChanged"
            onpagesizechanged="rgResults_PageSizeChanged" EnableViewState="true"
            onsortcommand="rgResults_SortCommand">
            <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true" ShowPagerText="false" />
            <MasterTableView>
                <Columns>
                    <telerik:GridBoundColumn DataField="U_Prefix" HeaderText="Prefix" UniqueName="U_Prefix" SortExpression="U_Prefix"></telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="CardCode" HeaderText="Card Code" UniqueName="CardCode" SortExpression="CardCode"></telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="U_LastName" HeaderText="Last Name" UniqueName="U_LastName" SortExpression="U_LastName"></telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="U_FirstName" HeaderText="First Name" UniqueName="U_FirstName" SortExpression="U_FirstName"></telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Phone1" HeaderText="Phone 1" UniqueName="Phone1" SortExpression="Phone1"></telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Phone2" HeaderText="Phone 2" UniqueName="Phone2" SortExpression="Phone2"></telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="E_Mail" HeaderText="Email" UniqueName="E_Mail" SortExpression="E_Mail"></telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Frozenfor" HeaderText="On Hold" UniqueName="Frozenfor" SortExpression="Forzenfor"></telerik:GridBoundColumn>
                    <telerik:GridHyperLinkColumn DataNavigateUrlFields="CardCode" Text="Edit" DataNavigateUrlFormatString="Customer.aspx?cc={0}"></telerik:GridHyperLinkColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>

Grid

answered on 25 Oct 2011

1 answer

263 views

How to display Session Timeout based on Inactivity time set in WebConfig File.

Folks, Environment VS 2010 with RadControls for ASP.NET AJAX Q2 2011 SP1. I am using below Telerik Demo for Session Time out.

http://demos.telerik.com/aspnet-ajax/notification/examples/sessiontimeout/defaultcs.aspx

This above approach is based on preset timeout value within the .aspx page. But I would prefer to show the Session timout inactivity alert based in value set in my Web Config file (here is 20 minutes).

My webconfig file...

<system.web>

.......

<sessionState

mode="InProc" stateConnectionString="tcpip=127.0.0.1:42424"
sqlConnectionString="data source=127.0.0.1;Trusted_Connection=yes"
cookieless="false" timeout="20"

/>

.......

</system.web>

If possible, will very much appreciate if any sample code is provided for this solution. Thanks a lot.

GC_0620

Notification

answered on 25 Oct 2011

1 answer

53 views

RadTreeView Skin Propert

hi

I am using the latest version of radtreeview i have problem with this skin propery ,i set the skin property to for example "Telerik" it shows the tree in correct form but , from where treeview reads the skin , i have not copy skins any where , or pleasse explain how I should set the skin path of Rad TreeView .this is my tree view below

                   <telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableScriptCombine="False" />
                        <telerik:RadTreeView ID="TreePicGroup" runat="server" Skin="Telerik" DataFieldID="ID"
                            DataFieldParentID="ParentID" DataTextField="Title" CheckBoxes="true"
                            OnNodeClick="treeRole_NodeClick" onnodedrop="treeRole_NodeDrop"
                            EnableDragAndDrop="True" >
                        </telerik:RadTreeView>

Thanks

TreeView

answered on 25 Oct 2011

1 answer

120 views

[Solved] RadTreeView Skin Propert

hi

I am using the latest version of radtreeview i have problem with this skin propery ,i set the skin property to for example "Telerik" it shows the tree in correct form but , from where treeview reads the skin , i have not copy skins any where , or pleasse explain how I should set the skin path of Rad TreeView .this is my tree view below

                   <telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableScriptCombine="False" />
                        <telerik:RadTreeView ID="TreePicGroup" runat="server" Skin="Telerik" DataFieldID="ID"
                            DataFieldParentID="ParentID" DataTextField="Title" CheckBoxes="true"
                            OnNodeClick="treeRole_NodeClick" onnodedrop="treeRole_NodeDrop"
                            EnableDragAndDrop="True" >
                        </telerik:RadTreeView>

Thanks

TreeView

answered on 25 Oct 2011

4 answers

133 views

Clearing Custom Text Box when Node Unchecked

I've created a usercontrol that allows users to select "interests" using a RadTreeView so that it can expand and display a hierachy.

In the node template I added in a text box for users to type in a free response if they choose certain fields. It's all working beautifually, with one gotcha. If a user unchecks the box, the text is still display until

1) the refresh the page
2) I databind the tree

Each of those are not overly desirable solutions, 1) being confusing to the user, 2) loses the state of any expanded nodes.

As the textboxes are created dynamically, they don't have ID's that I could reference with a FindControl and clear them when the appropriate check box is unclicked.

Any thoughts?

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Engage20.ascx.cs" Inherits="edu.yale.som.engage.Engage20" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<style type="text/css">

.rootNode

{

font-size: 13px;

font-weight: bold;

}

div[class='rtTop rtSelected'] div.rtIn,

div[class='rtMid rtSelected'] div.rtIn,

div[class='rtBot rtSelected'] div.rtIn

{

color: black !important;

background-color: transparent !important;

background-image: none !important;

border-color: transparent !important;

}

</style>

<script type="text/javascript">

function TreeView_OnClientLoad() {

var $ = $telerik.$;

$(".rtTemplate").bind("keydown", function (e) {

if (e.keyCode == 32)

e.stopPropagation();

});

}

function OnClientNodeChecked(sender, eventArgs) {

var node = eventArgs.get_node();

if (node.get_allowEdit() && node.get_checked()) {

node.select();

}

</script>

<table border="0" width="100%"><tr><td>

<telerik:RadTreeView ID="EngageTree" runat="server" CheckBoxes="true" DataFieldID="TagID"

DataFieldParentID="ParentID" DataTextField="Name" DataSourceID="TagDataSource"

Skin="Vista" OnNodeCheck="OnNodeChecked" DataValueField="TagID" EnableViewState="true" OnClientLoad="TreeView_OnClientLoad" OnClientNodeChecked="OnClientNodeChecked">

<DataBindings>

<telerik:RadTreeNodeBinding Depth="0" CheckableField="Checkable" TextField="Name" Expanded="False"

CssClass="rootNode" CheckedField="Checked" AllowEditField="IncludeTextBox" CategoryField="UserResponse"/>

<telerik:RadTreeNodeBinding CheckedField="Checked" AllowEditField="IncludeTextBox" CheckableField="Checkable" CategoryField="UserResponse"/>

</DataBindings>

<NodeTemplate>

<%# DataBinder.Eval(Container, "Text") %> <asp:TextBox

Text='<%# DataBinder.Eval(Container, "Category") %>' ToolTip='<%# DataBinder.Eval(Container, "Value") %>' runat="server" Visible='<%# DataBinder.Eval(Container, "AllowEdit").ToString() == "True" %>' AutoPostBack="true" OnTextChanged="textBox_OnTextChanged" />

</NodeTemplate>

</telerik:RadTreeView></td>

<td>

<asp:Panel ID="EngageTextResponses" runat="server">

</asp:Panel>

</td>

</tr></table>

<asp:SqlDataSource ID="TagDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:edu_yale_som_engage_connectionString %>"

SelectCommand="SELECT Tags.TagID, Tags.ParentID, Tags.Name, Tags.Description, Tags.Checkable, Tags.IncludeTextBox, Tags.TypeID, Tags.AssociatedAction, Tags.Position, UserTags.PersonID, UserTags.UserResponse, Tags.IncludeTextBox,

CASE When PersonID IS NULL Then 'false' Else 'true' END As Checked

FROM Tags LEFT OUTER JOIN (SELECT RecordID, TagID, PersonID, DateStamp, UserResponse

FROM UserTags AS UserTags_1

WHERE (PersonID = @PersonID)) AS UserTags ON Tags.TagID = UserTags.TagID

WHERE (Tags.TypeID = @TypeID) Order By Position ASC, Tags.Name ASC">

<SelectParameters>

<asp:ControlParameter ControlID="HiddenFieldPersonID" PropertyName="Value" Name="PersonID" />

<asp:ControlParameter ControlID="HiddenFieldTypeID" PropertyName="Value" Name="TypeID" />

</SelectParameters>

</asp:SqlDataSource>

<asp:HiddenField ID="HiddenFieldPersonID" runat="server" />

<asp:HiddenField ID="HiddenFieldTypeID" runat="server" />

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Configuration;

using System.Data.SqlClient;

namespace edu.yale.som.engage

{

public partial class Engage20 : System.Web.UI.UserControl

{

public edu.yale.som.sitefinity.shared.Common commonCode = null;

private String connectionStringName = null;

SqlConnection dbConn = null;

public int personID;

private String _TagTypeID = null;

public string TagTypeID

{

get

{

return ViewState["_TagTypeID"] as String;

}

set

{

try

{

//check if page is being accessed in the admin

if (commonCode.IsPageInAdmin(this))

{

//check if the users is an admin

if (!Page.User.IsInRole("Admins"))

{

throw new Exception("Unauthorized access attempt!");

}

ViewState["_TagTypeID"] = value;

}

catch (Exception e)

{

throw new Exception("Error in edu.yale.som.engage.Engage20.SetTagTypeID()" + e.Message);

}

protected void Page_Load(object sender, EventArgs e)

{

//check to see if property is set.

if (TagTypeID == null || TagTypeID == string.Empty || TagTypeID == "")

{

throw new Exception("Tag Type not set");

}

try

{

// Retrieve the Person ID for the current user

personID = commonCode.getPersonID(commonCode.RealmNameStripper(Page.User.Identity.Name, HttpContext.Current), commonCode.getSessionAuthenticationImplementationID(HttpContext.Current));

//set PersonID and TagTypeID values into the front end controls for the DataSource to use.

HiddenFieldPersonID.Value = personID.ToString();

HiddenFieldTypeID.Value = TagTypeID;

}

catch (Exception ex)

{

throw new Exception("Error in edu.yale.som.engage.Engage20.Page_Load(): " + ex.Message);

}

public Engage20()

{

try

{

// Initalize the common object

commonCode = new edu.yale.som.sitefinity.shared.Common();

// Initialize the connection string name for connecting to Engage

if (ConfigurationManager.ConnectionStrings["edu_yale_som_engage_connectionString"] == null || ConfigurationManager.ConnectionStrings["edu_yale_som_engage_connectionString"].ToString() == string.Empty)

{

throw new Exception("Invalid database connection string.");

}

connectionStringName = ConfigurationManager.ConnectionStrings["edu_yale_som_engage_connectionString"].ToString();

}

catch (Exception ex)

{

throw new Exception("Error in edu.yale.som.engage.Engage20 constructor: " + ex.Message);

}

protected void OnNodeChecked(object sender, Telerik.Web.UI.RadTreeNodeEventArgs e)

{

dbConn = new SqlConnection(connectionStringName);

if (e.Node.Checked)

{

try

{

// Open the database connection

dbConn.Open();

string t = e.Node.Value.ToString();

string InsQuery = "IF NOT EXISTS (SELECT * FROM UserTags WHERE tagID = " + @t + " AND personID = " + @personID + ") INSERT into UserTags(TagID, PersonID) VALUES(" + @t + "," + @personID + ")";

SqlCommand dbCmd = new SqlCommand(InsQuery, dbConn);

dbCmd.ExecuteNonQuery();

}

catch (Exception ex)

{

throw new Exception("Error Inserting User Tags edu.yale.som.engage.Engage20.OnNodeChecked() '" + ex.Message);

}

finally

{

if (dbConn != null)

{

dbConn.Close();

}

else

{

try

{

// Open the database connection

dbConn.Open();

string t = e.Node.Value.ToString();

string Query = "DELETE FROM UserTags WHERE tagID = " + @t + " AND personID = " + @personID;

SqlCommand dbCmd = new SqlCommand(Query, dbConn);

dbCmd.ExecuteNonQuery();

/*

if (e.Node.AllowEdit){

EngageTree.DataBind();

}

*/

}

catch (Exception ex)

{

throw new Exception("Error Deleting User Tags edu.yale.som.engage.Engage20.textBox_OnTextChanged() '" + ex.Message);

}

finally

{

if (dbConn != null)

{

dbConn.Close();

}

protected void textBox_OnTextChanged(object sender, EventArgs e)

{

TextBox box = (TextBox)sender;

string InsQuery = null;

string t = string.Empty;

try

{

// Open the database connection

dbConn = new SqlConnection(connectionStringName);

dbConn.Open();

t = box.ToolTip.ToString();

InsQuery = "IF EXISTS (SELECT * FROM UserTags WHERE tagID = " + @t + " AND personID =" + @personID + ") UPDATE UserTags SET UserResponse = '" + box.Text + "' WHERE tagID = " + @t + " AND personID =" + @personID + " ELSE INSERT into UserTags(TagID, PersonID, UserResponse) VALUES(" + @t + "," + @personID + ",'" + box.Text + "' )";

SqlCommand dbCmd = new SqlCommand(InsQuery, dbConn);

dbCmd.ExecuteNonQuery();

}

catch (Exception ex)

{

throw new Exception("Error Inserting User Tags edu.yale.som.engage.Engage20.OnTextChanged() " + ex.Message);

}

finally

{

if (dbConn != null)

{

dbConn.Close();

}

TreeView

answered on 25 Oct 2011

1 answer

154 views

Chrome, Safari: copy \ paste text from editor to editor add some strange formatting

Hello,

We found some strange problem with copy \ paste functionality which can be reproduced on your demo in Chrome and Safari browsers.

Steps to reproduce:
1. Open editor in Chrome.
2. Write some text like "Test copy paste".
3. Copy this text (you can use Ctrl+C or browser Copy).
4. Paste this text in to editor. Text is paste with some additional formatting like:

<div style="padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px; background-image: none; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; text-align: left; word-wrap: break-word;">Test copy paste</div>

Could this problem be resolved in some way? Because we support these browsers and our users can do very often such actions.

I used Google Chrome 14.0 to reproduce this bug.

Kind regards,
Anna

Editor

answered on 25 Oct 2011

5 answers

269 views

[Solved] Exclude specific controls from AutoTooltipify

We recently implemented AutoTooltipify. Looks great but then we realised that sometimes we would want to exclude certain controls. Namely, tooltips within tooltips. So two questions:

1. Has anyone looked at the inner working of AutoTooltipify and come up with a nice way of excluding specific controls/regions? I know we could manually add controls using TargetControls, however, if 99% of controls are auto, it's easier to exclude one or two that we don't want. I imagine performance would be better too.

2. We have an autotooltip that opens on mouse over and closes on mouse out (of tooltip). The problem is that we have objects inside the tooltip that also have tooltips. Moving the mouse over those inner objects displays a tooltip in the top left of the screen and closes the outer tooltip. Presumably the controls don't know where to render the inner tooltip and the outer tooltip is no longer "active" so it closes. Any suggestions on how we have inner tooltips in the correct position AND don't close the outer tooltip? Perhaps there should be a property in addition to AutoTooltipify that disables inner tooltips?

Enjoy the challenge! :)

Grant.

ToolTip

answered on 25 Oct 2011

2 answers

319 views

Show Loading Panel without AJAX

I have some JScript that does some client side stuff and while it is doing that I want to show the RadLoadingPannel that is shown when AJAXing goes on on the page.

I added the following two functions which I would have thought would achieve this but it does nothing,

    
                            var radLoadingPanelContent = null;  
        
                            var currentUpdatedControl = null;  
        
                            function showLoadingGraphic() {  
        
                                radLoadingPanelContent = $find("<%=radLoadingPanelContent.ClientID %>");  
        
                                currentUpdatedControl = "<%=divMainContent.ClientID %>";  
        
                                radLoadingPanelContent.show(currentUpdatedControl);  
        
                            }  
        
                            function hideLoadingGraphic() {  
        
                                if (radLoadingPanelContent != null) {  
        
                                    radLoadingPanelContent.hide(currentUpdatedControl);  
        
                                }  
        
                                radLoadingPanelContent = null;  
        
                                currentUpdatedControl = null;  
        
                            }

You will notice they are completely separate from AJAX events (which is what I want).

I just want a client-side way to indicate to the user that something is loading without using AJAX (because it's so dam slow).

The following works but looks very messy,

    
                            function showLoadingGraphic() {  
        
                                radLoadingPanelContent = document.getElementById("<%=radLoadingPanelContent.ClientID %>");  
        
                                radLoadingPanelContent.style.display = "block";  
        
                            }  
        
                            function hideLoadingGraphic() {  
        
                                radLoadingPanelContent = document.getElementById("<%=radLoadingPanelContent.ClientID %>");  
        
                                radLoadingPanelContent.style.display = "none";  
        
                            }

Ajax

answered on 25 Oct 2011