Questions on UI for ASP.NET AJAX Forum

0 answers

72 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

172 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

53 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

584 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

107 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

1 answer

125 views

Select Multiple Dates (More Than One Week)

When the RadScheduler is in MonthView, I want to be able to highlight multiple days that span more than one week. We have implemented a custom context menu when the user right-clicks in the highlighted area, that adds an all-day appointment for each day in the highlighted range once they have selected an option. The problem is we can only highlight a week at a time (on the same row) to get this to work. Once we span multiple rows, the date range does not work.

Is there some property that lets us achieve this?

function OnClientTimeSlotClick(sender, eventArgs) {

if (!sender.get_readOnly()) {

var startTime = sender._rowSelectionState.rowSelectionStartSlot._startTime;

var endTime = sender._rowSelectionState.rowSelectionEndSlot._startTime;

var dateStart = window.document.getElementById("<%= DateStart.ClientID %>");

var dateEnd = window.document.getElementById("<%= DateEnd.ClientID %>");

dateStart.value = startTime.toDateString();

dateEnd.value = endTime.toDateString();

}

Protected Sub RadScheduler_TimeSlotContextMenuItemClicking(ByVal sender As Object, ByVal e As TimeSlotContextMenuItemClickingEventArgs)

Dim scheduler As RadScheduler = DirectCast(sender, RadScheduler)

Dim MyDateStart As Date

Dim MyDateEnd As Date

If Me.DateStart.Value <> "" Then

'date range set

MyDateStart = CDate(Me.DateStart.Value)

MyDateEnd = CDate(Me.DateEnd.Value).AddDays(1)

If Not ((e.TimeSlot.Start >= MyDateStart) And (e.TimeSlot.End <= MyDateEnd)) Then

'single cell is NOT within highlighted range; reset dates

MyDateStart = e.TimeSlot.Start

MyDateEnd = e.TimeSlot.End

End If

Else

'date range NOT set

MyDateStart = e.TimeSlot.Start

MyDateEnd = e.TimeSlot.End

End If

For Each appt As Appointment In scheduler.Appointments.GetAppointmentsInRange(MyDateStart, MyDateEnd)

'delete appointment(s)

Appointments.Remove(FindById(appt.ID))

Next

AddAppointment(scheduler, MyDateStart, MyDateEnd, e.MenuItem.Text, e.MenuItem.Value)

End Sub

Scheduler

answered on 01 Jun 2012

3 answers

419 views

VS Not Displaying Telerik Controls

1st problem: Probably a simply problem, the page runs fine but the ASP.NET Radcontrols don't display in the Designer - see attached screen capture - "Error Rendering Control - button" - in the Bin\ folder are: Telerik.Web.UI.dll, Telerik.Web.UI.Skins.dll and Telerik.Web.UI.xml. Again, it runs fine.

2nd problem: I can't drag any ASP.NET Radcontrol to the Designer, the control doesn't get placed on to the page. I CAN drag any Standard control (i.e. button, textbox, etc...) which works fine, but not Telerik controls. I've been typing them in the Source, but it'd be really nice to drag them too.

Thank you in advance!

Kind regards,
Derek

General Discussions

answered on 01 Jun 2012

0 answers

93 views

RadmaskedTextbox

Hello,

Prompt character is always showing in RadMaskedTextbox. I want to show Prompt character only when I focus on textbox,.

How can I do this ?

Grid

asked on 01 Jun 2012

2 answers

167 views

Maskedit for RadNumeric Textbox

Hello,

Can we apply mask edit extender to rad numeric textbox ?

I want to use mask for my numeric textbox.

Thanks in advance

Grid

answered on 01 Jun 2012

0 answers

375 views

GridButtonColumn, CommandArgument and GetDataKeyValue

Hi,

I have a grid with two GridButtonColumn columns. In the ItemCommand event handler I want to extract the key value of the clicked row. First, I've used the following technique:

var keyValue = (e.Item as GridDataItem).GetDataKeyValue("keyField"));

It worked with one of the columns but soon I've found out that it doesn't work with the other one. In this case it always extract the key value from the very first row. So I've used another technique (directly from your documentation):

GridDataItem item = MyGrid.Items[int.Parse(e.CommandArgument)];

var keyValue = item.GetDataKeyValue("keyField");

This technique works with the second column but - surprise, surprise :-) - it doesn't work with the first one (where e.CommandArgument is always empty).

OK, I can deal with it (when e.CommandArgument is empty use one technique, when not empty - another) but I'm curious, what is the rule. I don't set the CommandArgument value explicitly - in any case. The columns are not designed identically but the differences seem to be not vital:

CommandName standard (RadGrid.DeleteCommandName) / non-standard
ImageUrl declared / declared but further adjusted dynamically (ItemDataBound, ImageButton control found, its ImageUrl attribute adjusted)
not sortable / sortable

The worst is that I've tried to reproduce all that stuff in a test application but I've failed (only the first technique worked - e.CommandArgument was always empty).

Can the authors of RadGrid check, when they set CommandArgument to the index in the Items collection and when - not?

PS.
I'm using Q1 2010 version of RadControls for ASP.NET Ajax

Grid

asked on 01 Jun 2012