Questions on UI for ASP.NET AJAX Forum

3 answers

109 views

Is is possible to save both the Text and Value to separate database fields using a GridDropDownColumn?

I have grid that contains a GridDropDownColumn (data from a different table). This uses a different value in the ListValueField than it does in the ListTextField. The reason is because I need a less descriptive value for use as a QueryString later on. I need to keep the descriptive text as well on the database for the record. How can I save both values in my database using the single GridDropDownColumn? Do I need to use code behind? If so, what event needs to be used?

Thanks!

Grid

answered on 04 Jun 2012

1 answer

153 views

[Solved] Hide the icon column for RadMenu items

I'm trying to create a fly-out or "mega-menu", and I'd like to hide the icon "column" to the left of each menu item. I found this article: http://www.telerik.com/community/forums/aspnet-ajax/menu/hide-the-icon-column-for-radmenu-items.aspx, but it didn't have any effect.

Perhaps this technique is obsolete? Or perhaps I'm just doing something bone-headed? I'm a Telerik newbie working on the trial period evaluation, so I need all the help I can get.

Anyone have any ideas?

-BillyB

Menu

answered on 04 Jun 2012

1 answer

104 views

RadTreeview checkbox selection/unselection?

Hi,
i am using RadTreeveiw in my project, as a part of Section 508 i enabled the checkboxes, as a result of which we can go to the nodes using tabs, upto here it is fine.

now my problem is i am not interested to check or uncheck the checkboxes. is there any property to do that?

even if he clicks also i am not interested to check it?
thank you,
Mohinder Goswami.

TreeView

answered on 04 Jun 2012

8 answers

229 views

[Solved] c.parentNode is null

I have a page that contains a RadWindow with RadPageViews. When the window is loaded it dynamically creates a pageview and adds a user control that contains a RadEditor control. Everything loads fine however it is throwing a javascript error "c.parentNode is null" after the page is saved.

After doing some debugging it looks like it is occuring when the dispose method is called for the RadEditor. Any help is appreciated.
On Load: c.parentNode = ctl00_ContentPlaceHolder1_RadWindow1_C_PageComponent1_RadEditor1Center

Protected Sub RadMultiPage1_PageViewCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadMultiPageEventArgs) Handles RadMultiPage1.PageViewCreated

Dim pageComponent As PageComponent = LoadControl("Editor.ascx")

pageComponent.BindData()

e.PageView.Controls.Add(pageComponent)

End Sub

Editor

answered on 03 Jun 2012

0 answers

131 views

RadToolBar button issue

Hi Team,
I am facing issue with RadToolBar button. I am trying to open ModalPopup extender on specific RadToolBar button but unable to do it.How I can do It. I want to handle it on JavaScript. Please find my code.
PopUp open when i click on any place on RadToolBar.Please provide me solution.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Web.UI;

namespace GridPopUpTest

{

public partial class ParentForm : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ParentForm.aspx.cs" Inherits="GridPopUpTest.ParentForm" %>

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

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!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>

<link href="Styles/Site.css" rel="stylesheet" type="text/css" />

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<script type="text/javascript">

function OnClientButtonClicking(sender, eventArgs) {

var button = eventArgs.get_item();

alert(button.get_text());

if (eventArgs.get_item().get_value() == "NoPopUp") {

//eventArgs.set_cancel(true);

HideModalPopup();

}

if (eventArgs.get_item().get_value() == "PopUp") {

//eventArgs.set_cancel(true);

ShowModalPopup();

}

function ShowModalPopup() {

$find("ModalBehaviour1").show();

}

function HideModalPopup() {

$find("ModalBehaviour1").hide();

}

function JobsRowSelected(sender, args) {

var id = args.get_id();

var inputCheckBox = $get(id).getElementsByTagName("input")[0];

if (!inputCheckBox) {

args.set_cancel(true);

}

if (inputCheckBox.checked == true) {

inputCheckBox.checked = false;

}

else {

inputCheckBox.checked = true;

}

</script>

<div>

<telerik:RadToolBar ID="RadToolBar1" runat="server" OnClientButtonClicking="OnClientButtonClicking">

<Items>

<telerik:RadToolBarButton Text="NoPopUp" Value="NoPopUp" ></telerik:RadToolBarButton>

<telerik:RadToolBarButton Text="OpenpopUp" Value="PopUp"></telerik:RadToolBarButton>

</Items>

</telerik:RadToolBar>

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

<table>

<tr>

<td>Name</td>

<td><asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>

</tr>

<tr>

<td><asp:Button ID="btnOk" Text="Ok" runat="server" /></td>

<td><asp:Button ID="btnCancel" Text="Cancel" runat="server" /></td>

</tr>

</table>

</asp:Panel>

<cc1:modalpopupextender id="ModalPopupExtender1" runat="server" BehaviorID="ModalBehaviour1"

cancelcontrolid="btnCancel" okcontrolid="btnOk" BackgroundCssClass="ModalPopupBG"

targetcontrolid="RadToolBar1" popupcontrolid="pnldtls" DropShadow="false">

</cc1:modalpopupextender>

</div>

</form>

</body>

</html>

Ajax

asked on 03 Jun 2012

0 answers

73 views

Problem with PageSizeChanged and PageIndexChanged events when creating grid on server

Hi,

I created a grid on server side (following your tutorials), and I have a problem with PageSizeChanged and PageIndexChanged events of the grid.

The events are gettign fired, but the problem is that inside the event GridReport_PageSizeChanged, when I try to get the new value (e.NewPageSize), the value still contains the old one (before the change).
For example, If the initial value is 10, and I change to 20, e.NewPageSize returns 10.
The same happens when the event GridReport_PageIndexChanged is fired when I change the page size from textbox and not from the buttons. e.NewPageIndex property contains the old value. (If I use the number buttons to change the page index it works fine).

Is there any solution? how can I make things work correctly?

Thanks!

Grid

asked on 03 Jun 2012

0 answers

181 views

Client-Side Binding

In trying out the the ListView / Appending Data demo. The demo works well inside an asp.net solution. However, when we attempt to port this into a dotnetnuke module using its Telerik.dll - 2012.1.411.35 - The scripting fails with this error "Unable to get value of the property 'get_dataSource': object is null or undefined Home.aspx, line 756 character 21" With experimenting Setting "currentItemCount = 0" and the script fails at ' listView.set_virtualItemCount(listViewData._totalCount);'

Any suggestions are appreciated,
Cheers.

<div>          
         <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
       <script type="text/javascript"   >
           var listView,
               $,
                autoLoadInterval,
                isMouseOver,
                animationDuration = 500,
                updateInterval = 4000;

            function pageLoad() {
                $ = $telerik.$;

                listView = $find("RadListViewDataBinding");
                listView1 = $find("RadListView1");

//append 4 items initially
appendListViewData(4);

//append 3 more items every time the more results button is clicked
$("#more").click(function () { appendListViewData(3); });

//toggle auto-load on click
$("#autoLoad").click(toggleAutoLoad);

                $("#scrollArea") //prevent auto-loading if mouse is over scroll area
                    .mouseenter(function () { isMouseOver = true; })
                    .mouseleave(function () { isMouseOver = false; })
            }

            function appendListViewData(itemCount) {

                //YouTube search videos feed URL
                var youtubeFeedUrlFormat = "https://gdata.youtube.com/feeds/api/videos?author=telerikinc&alt=json-in-script&start-index={0}&max-results={1}",

currentItemCount = listView1.get_dataSource() ? listView.get_dataSource().length : 0,
startIndex = currentItemCount + 1;

                //jQuery.ajax reference: http://api.jquery.com/jQuery.ajax/
                $.ajax({
                    type: "GET",
                    url: String.format(youtubeFeedUrlFormat, startIndex, itemCount),
                    contentType: "application/json; charset=utf-8",
                    dataType: "jsonp",
                    success: onYouTubeRequestSuccess,
                    error: function () { throw new Error(arguments[1]); }
                });
            }

function onYouTubeRequestSuccess(result) {

                var listViewData = mapListViewData(result);

                listView.set_virtualItemCount(listViewData._totalCount);

                animateScrollContainer(listViewData.length, function () {
                    listView.appendData(listViewData);
                });
            }

            function animateScrollContainer(appendedItemCount, callback) {
                var scrollArea = $("#scrollArea")[0],
                    $items = $("#itemContainer"),
                    singleItemHeight = 102,
                    addedHeight = appendedItemCount * singleItemHeight;

                //jQuery.animate referece: http://api.jquery.com/animate/
                $items.css("height", $items.height() + "px")
                    .animate({ height: "+=" + addedHeight + "px" },
                    {
                        duration: animationDuration,
                        step: function () {
                            scrollArea.scrollTop = scrollArea.scrollHeight;
                        },
                        complete: function () {
                            callback();
                            $items.css("height", "");
                            scrollArea.scrollTop = scrollArea.scrollHeight;
                        }
                    });
            }

            function mapListViewData(result) {
                var data = [],
                    items = result.feed.entry;

                for (var i = 0; i < items.length; i++) {
                    var item = items[i];
                    data[data.length] = {
                        title: item.title.$t,
                        description: formatDescription(item.content.$t),
                        link: item.link[0].href,
                        author: item.author[0].name.$t,
                        published: new Date(item.published.$t.split("T")[0].replace(/-/gi, "/")),
                        views: item.yt$statistics.viewCount,
                        thumb: item.media$group.media$thumbnail[2].url,
                        duration: formatThumbTime(item.media$group.media$content[0].duration)
                    };

                    //prefetch thumbnail image
                    (new Image()).src = data[data.length - 1].thumb;
                }
                data._totalCount = result.feed.openSearch$totalResults.$t;

return data;
}

            function formatDescription(description) {
                //split the text into words and take the first 25.
                return description.split(" ").splice(0, 25).join(" ") + " <b>...</b>";
            }

            function formatThumbTime(time) {
                var mins = Math.floor(time / 60),
                    secs = time % 60,
                    hours = Math.floor(mins / 60);

                return hours ?
                    hours + ":" + mins + ":" + secs :
                    mins + ":" + secs;
            }

            function updateButtonsVisiblity() {
                var itemCount = listView.get_dataSource().length,
                    totalCount = listView.get_virtualItemCount();

                if (itemCount >= totalCount) {
                    $("#more").css("visibility", "hidden");
                    $("#autoLoad").css("visibility", "hidden");
                }
                else {
                    if (autoLoadInterval) {
                        $("#more").css("visibility", "hidden");
                    }
                    else {
                        $("#more").css("visibility", "visible");
                        $("#autoLoad").css("visibility", "visible");
                    }
                }
            }
        </script>
        </telerik:RadScriptBlock>
        <h2>Telerik on YouTube</h2>

        <telerik:RadListView ID="RadListViewDataBinding" runat="server">
            <LayoutTemplate>
                <div id="telerikVideos">
                    <div id="scrollArea">
                        <div id="itemContainer">
                        </div>
                    </div>
                </div>
                <a id="autoLoad" href="javascript:void(0)" class="ybutton">Auto-Load</a>
                <a id="more" class="ybutton" href="javascript:void(0)">Show more results</a>
            </LayoutTemplate>
                <ClientSettings>
                    <DataBinding ItemPlaceHolderID="itemContainer">                                                                                                                                                                                                                                                                                 <ItemTemplate>
                        <div class="item">
                            <div class="thumb">
                                <a href="#= link #" target="_blank">
                                    <img src="#= thumb #" />
                                    <span class="time">#= duration #</span>
                                </a>
                            </div>
                            <div class="content">
                                <h3>
                                    <a href="#= link #" target="_blank">#= title #</a>
                                </h3>
                                <div class="description">
                                    #= description #
                                </div>
                                <div class="details">
                                    <span class="author">
                                        by <a href="http://www.youtube.com/user/#= author #" target="_blank">
                                               #= author #
                                           </a>
                                    </span>
                                    <span class="sep">|</span>
                                    <span class="published">
                                        #= format(published, "d") #
                                    </span>
                                    <span class="sep">|</span>
                                    <span class="views">
                                        #= views # views
                                    </span>
                                </div>
                            </div>
                        </div>
                    </ItemTemplate>
                    </DataBinding>
                    <ClientEvents OnDataBound="updateButtonsVisiblity" />
                </ClientSettings>
        </telerik:RadListView>

ListView

asked on 02 Jun 2012

0 answers

60 views

Hightlight today's date for all calenders in the solution

Hello,

First of all, I'm familiair with the following solution tot hightlight today's date in a calender:

<Calendar ID="Calendar1" runat="server">

<SpecialDays>

<telerik:RadCalendarDay Repeatable="Today" ItemStyle-BackColor="Green">

</telerik:RadCalendarDay>

</SpecialDays>

</Calendar>

However, one of the new demands in my solution is to highlight all calenders in the solution. Is there any way of doing this on solution level so that i have to set this up only once?

Regards

Calendar

asked on 02 Jun 2012

4 answers

602 views

Tab strip control is not properly not working

Hi,

As my requirement I'm using Tab strip control. I put 2 tabs and each tab inside I put the "Rad Grid" here I want to perform Insert, update and Delete in grid. Every thing is fine for me. But I get one issue i.e.., For example Tab1 and Tab2 2 tabs I have. Inside this Tab1 I set "Rad Grid" now when I click on "Add New Record" The rad grid comes in Edit mode, update and cancel link buttons is displaying. now I'm not enter or click anything in control and I want to go "Tab2". this functionality is not working for me.
Please help me in this issue. I we are using 2010 version.

Advance Thanks

I already check below link but I didn't get any proper solution to solve the problem.

http://demos.telerik.com/aspnet-ajax/tabstrip/examples/applicationscenarios/dynamicpageview/defaultcs.aspx
http://www.telerik.com/community/forums/winforms/tabstrip/tab-key-not-working-in-radtextbox-to-switch-to-the-next-radtextbox.aspx

General Discussions

answered on 02 Jun 2012

2 answers

112 views

[Solved] Sorting a column with a graphical image doesn't fire an Ajax request

Hi,

Let's consider the following markup:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">

<ClientEvents OnRequestStart="requestStart" />

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<div>

<telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True" AutoGenerateColumns="False" GridLines="None"

OnNeedDataSource="RadGrid1_NeedDataSource" OnSortCommand="RadGrid1_SortCommand">

<MasterTableView>

<Columns>

<telerik:GridBoundColumn DataField="Name" HeaderText="Name" SortExpression="Name" UniqueName="colTextual" />

<telerik:GridBoundColumn DataField="Name" HeaderImageUrl="Images/someImage.gif" SortExpression="Name"

UniqueName="colGraphical" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

</div>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">

</telerik:RadAjaxLoadingPanel>

<telerik:RadCodeBlock ID="codeBlock1" runat="server">

<script type="text/javascript">

function requestStart(sender, eventArgs) {

alert("requestStart");

}

</script>

</telerik:RadCodeBlock>

And a bit of code-behind:

protected void RadGrid1_SortCommand(object source, Telerik.Web.UI.GridSortCommandEventArgs e)

{

RadAjaxManager m = RadAjaxManager.GetCurrent(Page);

bool inAjax = m == null ? false : m.IsAjaxRequest;

}

The grid has two columns. The only difference between them is that one of them has a textual header, the other one - a graphical header. But the columns, when clicked to sort, behave differently:
- the textual one (colTextual): on the client side calls the requestStart handler (displays the alert); on the server side the Ajax manager reports being inside an Ajax request (isAjax == true)
- the graphical column (colGraphical): doesn't call the client side handler; the Ajax manager reports that it is not inside an Ajax request (isAjax == false)

The interesting thing is that the loading panel is displayed in both cases.

What should I do to make colGraphical column to behave in the same way as colTextual?

Regards
Tomasz
PS. I'm using Q1 2010 version of RadControls for ASP.NET AJAX.

Grid

answered on 01 Jun 2012