Telerik Forums
UI for ASP.NET AJAX Forum
0 answers
120 views

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>          <!-- content start -->
         <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 toggleAutoLoad() {
                if (autoLoadInterval) {
                    clearInterval(autoLoadInterval);
                    autoLoadInterval = null;
                    $(this).html("Auto-Load");
                    updateButtonsVisiblity();
                }
                else {
                    $(this).html("Stop");
                    appendListViewData(1);
                    autoLoadInterval = setInterval(function () {
                        if (!isMouseOver) {
                            appendListViewData(1);
                        }
                    }, updateInterval);
                    updateButtonsVisiblity();
                }
            }

            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>

 

Dave
Top achievements
Rank 1
 asked on 02 Jun 2012
0 answers
37 views
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
Larevenge
Top achievements
Rank 1
 asked on 02 Jun 2012
4 answers
513 views
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
Perfect
Top achievements
Rank 1
 answered on 02 Jun 2012
2 answers
70 views
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. 
Tomasz M.Lipiński
Top achievements
Rank 1
 answered on 01 Jun 2012
1 answer
102 views
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
Bob
Top achievements
Rank 2
 answered on 01 Jun 2012
3 answers
345 views
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
Derek
Top achievements
Rank 1
 answered on 01 Jun 2012
0 answers
73 views
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 ?
Atchut
Top achievements
Rank 1
 asked on 01 Jun 2012
2 answers
136 views
Hello,

Can we apply mask edit extender to rad numeric textbox ?

I want to use mask for my numeric textbox. 

Thanks in advance
Atchut
Top achievements
Rank 1
 answered on 01 Jun 2012
0 answers
312 views
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
Tomasz M.Lipiński
Top achievements
Rank 1
 asked on 01 Jun 2012
2 answers
105 views
I have been attempting to get a detail table working connecting through a LINQ data source in a Grid. When I attempt to expand the detail table, the ID for the SelectParameter is being passed through as null. Does anyone know why this might be happening?

ASPX code:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="rgFacilities">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="rgFacilities" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadGrid DataSourceID="ldsFacilities" AutoGenerateColumns="false" AllowPaging="True" PageSize="20" AllowSorting="True" ID="rgFacilities" runat="server">
    <MasterTableView DataKeyNames="FacilityID" DataSourceID="ldsFacilities" AllowMultiColumnSorting="False" GroupLoadMode="Server">
        <DetailTables>
            <telerik:GridTableView DataKeyNames="EquipmentID" DataSourceID="ldsEquipment" Width="100%"
                runat="server" AutoGenerateColumns="true">
                <ParentTableRelation>
                    <telerik:GridRelationFields DetailKeyField="FacilityID" MasterKeyField="FacilityID" />
                </ParentTableRelation>
            </telerik:GridTableView>
        </DetailTables>
        <Columns>
            <telerik:GridBoundColumn SortExpression="Name" HeaderText="Facility Name"
                DataField="Name" UniqueName="Name">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn SortExpression="City" HeaderText="City"
                DataField="City" UniqueName="City">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn SortExpression="Region" HeaderText="State/Province"
                DataField="Region" UniqueName="Region">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn SortExpression="Country" HeaderText="Country"
                DataField="Country" UniqueName="Country">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn SortExpression="Description" HeaderText="Description"
                DataField="Description" UniqueName="Description" AllowSorting="false">
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>
 
<asp:LinqDataSource ID="ldsFacilities" OnSelecting="ldsFacilities_Selecting" runat="server">
</asp:LinqDataSource>
<asp:LinqDataSource ID="ldsEquipment" OnSelecting="ldsEquipment_Selecting" runat="server">
    <SelectParameters>
        <asp:SessionParameter Name="FacilityID" SessionField="FacilityID"/>
    </SelectParameters>
</asp:LinqDataSource>

Data Source Selecting Code:

protected void ldsFacilities_Selecting(object sender, LinqDataSourceSelectEventArgs e)
{
    Data.EcofitDataContext db = new Data.EcofitDataContext();
 
    e.Result = (from f in db.Facilities
                select f);
}
 
protected void ldsEquipment_Selecting(object sender, LinqDataSourceSelectEventArgs e)
{
    Data.EcofitDataContext db = new Data.EcofitDataContext();
 
 
    e.Result = (from eq in db.Equipments
                where eq.FacilityID == Guid.Parse(e.SelectParameters["FacilityID"].ToString())
                select eq);
}

Any help would be greatly appreciated!
Brendan
Top achievements
Rank 1
 answered on 01 Jun 2012
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?