Questions on UI for ASP.NET AJAX Forum

2 answers

117 views

Client-side function setting Editor content fails in Master Page

I'm unable to access my RadEditor using client-side Javascript functions when I use a Master Page. The identical code works fine when it's not set in a Master Page. (This is a super-simple example, lifted straight from Telerik's demos.)

The code for the page is here:

<%@ Page Title="" Language="C#" MasterPageFile="~/AltMasterPage.master" AutoEventWireup="true" CodeFile="Test2.aspx.cs" Inherits="Documentation_Test2" %>

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

<asp:Content ID="Content1" ContentPlaceHolderID="SecondLevelHeadContent" Runat="Server">
    <script type="text/javascript">
        function SetHtml() {
            var newValue = $get('textHtml').value;
            $find("RadEditor1").set_html(newValue);
        }
    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="SecondLevelBodyContent" Runat="Server">
     <telerik:RadScriptManager ID="ScriptManager1" runat="server" />
     <telerik:RadEditor ID="RadEditor1" runat="server" />
     <div class="module">
     <input type="button" value="Set New Html to the RadEditor" onclick="SetHtml()"/>
     <input type="text" value="New HTML" id="textHtml" />
     </div>
</asp:Content>

And for the Master Page is here:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="AltMasterPage.master.cs" Inherits="MasterPage" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!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 id="Head1" runat="server">
    <asp:ContentPlaceHolder id="SecondLevelHeadContent" runat="server" />
</head>
<body>
    <form id="form1" runat="server">
        <asp:ContentPlaceHolder id="SecondLevelBodyContent" runat="server" />
    </form>
</body>
</html>

The Javascript error thrown is:

$find("RadEditor1") is null

The exact same code works like a champ if it's in an ASPX file that doesn't reference a Master Page. What's going on?

Thanks,

Jesse

Editor

answered on 26 Apr 2010

2 answers

151 views

SlidingPane controlled by Toolbar

I want to create a page with a toolbar on it and a 'single' pane of content (that is, no obvious splitterbar) but with a sliding panel that appears when a toolbar button is clicked.

I can get the majority of it working, but I can't seem to hide the slidingpane's tab when it's collapsed so there's always a margin on 'unused' space.

Can this actually be done?

--
Stuart

Splitter

answered on 25 Apr 2010

2 answers

94 views

Ajax - Rotator : Why display jpeg is not the first one?

I have 16 jpeg files for display
Each time show one jpeg only.

I use the sqldatasource to testing the result is correct .
Also I add the get item to display the counter of the item

The result
---------------------
The start screen
jpeg (this is the no.15 jpeg)

1/16
--------------------
press the forward button
jpeg (this is the no.16 jpeg)

16/16
-------------------
press the forward button
jpeg (this is the no.1 jpeg)

1/16
---------------------

Question:
1) Why the rotator first display is the no.15 jpeg not the first one jpeg.
2) When I try using WrapFrames="false" , the last jpeg is blank.

source:
-----------------------------
<span class="title"><telerik:RadRotator ID="RadRotatorHorizontal"
runat="server" DataSourceID="SqlDataSource1"
RotatorType="FromCode" Height="480px"

Width="1471px" ItemHeight="480px" ItemWidth="1200px" scrollduration="1" frameduration="2000"
ScrollDirection="Right"

CssClass="floatRotator" OnClientItemShown="OnClientItemShown" >
     <ItemTemplate>
      <div class="itemTemplate">
                            <asp:Image runat="server" ID="Image"
                                ImageUrl='<%# Eval("ImageURL_Full_FileName") %>'
                                CssClass="displayimage" AlternateText="Customer Image" Height="455px"
                                Width="1200px"/>
          <br />

<asp:sqldatasource id="SqlDataSource1" runat="server" connectionstring="<%$

ConnectionStrings:ConnectionString9 %>"

        selectcommand="SELECT * FROM [Cam_Recording] ORDER BY [ImageURL_Full_FileName]"
        ProviderName="<%$ ConnectionStrings:ConnectionString9.ProviderName %>">
</asp:sqldatasource>

               function OnClientItemShown(sender, args) {
         var textitem = (args.get_item().get_index() + 1) + "/" + (sender.get_items().length);
         var Label5value = document.getElementById("Label5");
                Label5value.innerHTML = textitem;
     }

-----------------------------

Thanks!!!

Rotator

answered on 25 Apr 2010

1 answer

530 views

Cannot update hidden field value

I have seen several posts on the web about this but, I have not been able to get any of the solutions to work.

I have a page that uses a RadSplitter to separate itself into two RadPanes. In the left pane is a RadTreeview. In the right pane is an ASP.NET Update Panel. It is the classic leftpane-treeview, rightpane-detail view setup.
I use context menus in the treeview to allow users to cut, copy, and paste items in the treeview, and all that works just great. If a user selects an item in the treeview, the right pane shows the detail page for that item and allows them to edit the details. That works just fine.
Here is the problem: If the user selects "Add Item" from the context menu of the treeview, I create a blank form in the detail page and allow them to fill out the form. When the "submit" button is clicked on the form, it is submitted and, when the call to the database is returns the newly created item's ID, I need to update the treeview to reflect the creation of the new item.
I created two hidden fields on my page to help me with all these operations.
hdnOperationType
hdnOperationSource

When the call to the database is returned, I set the value of hdnOperationType to "nodeadded", and I am trying to capture that in the "OnClientLoad" event of the treeview in the browser, so I can do the update of the treeview. But, when I check the value of the hdnOperationType field, after my server code has set it to "nodeadded", the value still reads the old value from the previous call back. The field is not updated. (from Googling this issue, I beleieve the client state is still pointing to a reference of an old version of hdnOperationType, and was not updated with a new reference).

Here is what my page definition looks like:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Exp.aspx.cs" Inherits="Exp" MasterPageFile="~/MasterPage.master" %> 
        
            <%@ MasterType VirtualPath="~/MasterPage.master" %> 
        
            <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server" > 
        
                <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">  
        
                    <script type="text/javascript">  
        
                        //<![CDATA[                  
        
                        function updateTreeView() { 
        
                            var update = document.getElementById('<%= hdnOperationType.ClientID %>'); 
        
                            if (update) { 
        
                                if (update.value == "nodeadded") { 
        
                                    update.value = ""; 
        
                                    var newParent = document.getElementById('<%= hdnOperationSource.ClientID %>'); 
        
                                    updateAffectedNode(newParent.value); 
        
                                } 
        
                                else { 
        
                                    if (update.value == "nodeedited") { 
        
                                        update.value = ""; 
        
                                        var target = document.getElementById('<%= hdnOperationSource.ClientID %>'); 
        
                                        updateAffectedNode(target.value); 
        
                                    } 
        
                                } 
        
                            } 
        
                        } 
        
                        ...more javascript here 
        
                        //]]> 
        
                    </script> 
        
                </telerik:RadCodeBlock> 
        
                <asp:HiddenField ID="hdnOperationType" runat="server" /> 
        
                <asp:HiddenField ID="hdnOperationSource" runat="server" /> 
        
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">  
        
                    <AjaxSettings> 
        
                        <telerik:AjaxSetting AjaxControlID="RadTreeView1">  
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="tvExplorer" /> 
        
                                <telerik:AjaxUpdatedControl ControlID="pnlDetail" /> 
        
                                <telerik:AjaxUpdatedControl ControlID="hdnOperationSource" /> 
        
                                <telerik:AjaxUpdatedControl ControlID="hdnOperationType" />          
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                        <telerik:AjaxSetting AjaxControlID="UpdatePanel1">  
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="tvExplorer" /> 
        
                                <telerik:AjaxUpdatedControl ControlID="pnlDetail" /> 
        
                                <telerik:AjaxUpdatedControl ControlID="hdnOperationSource" /> 
        
                                <telerik:AjaxUpdatedControl ControlID="hdnOperationType" />          
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                    </AjaxSettings> 
        
                </telerik:RadAjaxManager> 
        
                <telerik:RadSplitter ID="RadSplitter1" CssClass="grid_12" Height="650" Width="100%" LiveResize="true"  runat="server">  
        
                    <telerik:RadPane ID="pnlExplorer" Height="100%" Width="300" runat="server">  
        
                        <telerik:RadTreeView ID="tvExplorer" runat="server" TabIndex="1" AccessKey="m"   
        
                          OnClientLoad="updateTreeView" 
        
                          OnClientContextMenuItemClicking="OnClientContextMenuItemClicking" 
        
                          OnClientKeyPressing="OnClientKeyPressing" 
        
                          OnNodeClick="tvExplorer_NodeClick" 
        
                          OnContextMenuItemClick="tvExplorer_ContextMenuItemClick" 
        
                        > 
        
                            <WebServiceSettings Path="DataSvcProxy.asmx" Method="GetRadTreeViewNodes" /> 
        
                            <Nodes> 
        
                                <telerik:RadTreeNode runat="server" Text="Root Node" Value="0" ClassID="0" PermClasses="0" ExpandMode="WebService" /> 
        
                            </Nodes> 
        
                        </telerik:RadTreeView> 
        
                    </telerik:RadPane> 
        
                    <telerik:RadSplitBar ID="RadSplitBar1" CollapseMode="Forward" runat="server" /> 
        
                    <telerik:RadPane ID="pnlDetail" Height="100%" Width="100%" runat="server">  
        
                        <asp:UpdatePanel ID="updDetail" runat="server" UpdateMode="Conditional" > 
        
                            <ContentTemplate> 
        
                                <div class="emptyItem">  
        
                                    Select an item in the left pane to view its information in this pane.  
        
                                </div> 
        
                            </ContentTemplate> 
        
                        </asp:UpdatePanel> 
        
                    </telerik:RadPane> 
        
                </telerik:RadSplitter> 
        
            </asp:Content>

I have tried wrapping the declaration of the two hidden fields in an update panel and, in my server code, explicitly calling that update panel's "Update()" function but, that has no effect.

I am stumped. I thought I had a good grasp of ajax but this has stopped me in my tracks.

Any suggestions would really be appreciated.

Thanks.

Update: I have also tried registering the hidden fields by putting this code in the Page_Init routine:
RadScriptManager.RegisterHiddenField(this, "hdnOperationType", "");
RadScriptManager.RegisterHiddenField(this, "hdnOperationSource", "");
(I used the static member of the class because my RadScriptManager instance (RadScriptManager1) does not provide a RegisterHiddenField method.)
This has had no effect at all.

Ajax

answered on 24 Apr 2010

3 answers

110 views

RadEditor removing quotes from div id="xyz"

RadEditor is removing quotes from div id="xyz". Enclosing the string within CDATA tags has no effect.

Steps to reproduce:
1. Use RadEditor on a .NET page to select the content of a database row
2. Insert <div id="xyz"></div> into RadEditor
3. Save changes to db
4. Look at what was saved to the db ..... it saved <div id=xyz></div> .... which browsers detect as a syntax error

How to fix?

Editor

answered on 24 Apr 2010

8 answers

227 views

Problem with ImageManager when use a custom skin

Hi,

I am using the custom skin for the RadEditor:

<

telerik:RadEditor ID="radEditor" runat="server"

Skin="WWRDefault" EnableEmbeddedSkins="false"

ToolbarMode="Default" Height="600px" Width="97%"

Visible="false" CausesValidation="False"

ToolsFile="~/DefaultRadEditorToolsFile.xml"

MaxDocumentSize="2400000" MaxImageSize="20480"

ImagesFilters="*.png,*.gif,*.jpg,*.jpeg"

DocumentsFilters="*.pdf,*.xls" />

When I select ImageManager I have the following exception:
Telerik.Web.UI.RadTreeView with ID='tree' was unable to find embedded skin with name 'WWRDefault'. Please, make sure that you spelled the skin name correctly, or if you want to use a custom skin, set EnableEmbeddedSkins=false.

Could you please let me know what I am missing?

Thank you,
Tatiana

Editor

answered on 24 Apr 2010

6 answers

273 views

RadUpload in RadGrid after Browser Refresh

I've got a radupload control in a radgrid insert/edit dialog. The operation of specifying the file for upload in the insert/edit operation works great. I am able to created new records and update old records in the grid.

One problem, after I create a new record and the upload operation is complete, the dialog is closed with the grid displayed normally, if I refresh my browser a new duplicate record is created. This doesn't happen for other radgrids I have with insert/edit operation that don't contain an upload control.

I see this same issue on the RadUpload demo page in the upload in a grid example. To reproduce this issue, add a new file. After the new record is created, refresh the page and the demo will show a duplicate.

--Mark

Upload (Obsolete)

answered on 24 Apr 2010

2 answers

88 views

Updating a TabStrip from a RadGrid

Hello,

I have the following scenario (dynamically created during runtime):

A RadGrid
A RadTabStrip

Depending on the sort column and type of the radgrid, the radtabstrip shows different tabs like (for a string column):

"Show all"
"A-C"
"D-F"
etc.

When clicking on one of the tabs, the database call is adjusted so only the corresponding sets are returned.

I added an RadAjaxManager, adding the following settings during runtime (this.ContentAwarePager is a class overloading the RadTabStrip):

    
                                if (this.ContentAwarePager != null) 
        
                                { 
        
                                    AjaxUpdatedControl ucgrid = new AjaxUpdatedControl(); 
        
                                    ucgrid.ControlID = this.ID; 
        
                                    AjaxUpdatedControl ucpager = new AjaxUpdatedControl(); 
        
                                    ucpager.ControlID = (this.ContentAwarePager as WebControl).ID; 
        
                                    AjaxSetting gridtopager = new AjaxSetting(); 
        
                                    gridtopager.AjaxControlID = this.ID; 
        
                                    gridtopager.UpdatedControls.Add(ucgrid); 
        
                                    gridtopager.UpdatedControls.Add(ucpager); 
        
                                    ram.AjaxSettings.Add(gridtopager); 
        
                                    AjaxSetting pagertogrid = new AjaxSetting(); 
        
                                    gridtopager.AjaxControlID = (this.ContentAwarePager as WebControl).ID; 
        
                                    gridtopager.UpdatedControls.Add(ucgrid); 
        
                                    gridtopager.UpdatedControls.Add(ucpager); 
        
                                    ram.AjaxSettings.Add(pagertogrid); 
        
                                }

Furthermore, I have a listener on TabClicked, which rebinds the datagrid.

When I click on a tab, everything works fine, and the ajaxmanager correctly handles the updating of the grid.

But when I catch the sort event, and remove and add tabs to the TabStrip (depending on the type of the column), the RadTabStrip is not "redrawn", if you know what I mean.

Is there a possibility to achieve this behaviour through the RadAjaxManager?

best regards for your help

Ulrik

TabStrip

answered on 24 Apr 2010

3 answers

159 views

scrolling to detail selected record in client

Hi All -

I'm pulling my hair out a bit -- I have a self-referencing hierarchical grid and I want to automatically scroll to the selected record when I post back (when adding or editing a record). I can select the record on postback fine, and when the record is in the master tableview the position works, but if the selected record is in a child tableview, the position does not work. Below is the code I am using... any ideas?

Thanks

Ford

function GridCreated() {

// This code will position visible part of grid on selected item even when item is off visible area

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

var found = 0;

// look for selected row in master table

var row = RadGrid1.get_masterTableView().get_selectedItems()[0];

if (row) {

found = 1;

// alert('In Master');

}

else {

// alert("not found in parent");

for (var j = 0; j < RadGrid1.get_detailTables().length; j++) {

var childSelectedRows = RadGrid1.get_detailTables()[j].get_selectedItems();

}

var childSelIDs = new Array(childSelectedRows.length);

for (var i = 0; i < childSelectedRows.length; i++) {

var row = childSelectedRows[i];

if (row) {

found = 1;

// alert('In Child');

}

// alert('testing');

if (found == 1) {

alert('positining');

setTimeout(function() {

var rowElement = row.get_element();

//get the main table scrollArea HTML element

var scrollArea = RadGrid1.GridDataDiv;

//check if the selected row is below the viewable grid area

if ((rowElement.offsetTop - scrollArea.scrollTop) + rowElement.offsetHeight + 20 > scrollArea.offsetHeight) {

//scroll down to selected row

scrollArea.scrollTop = scrollArea.scrollTop + (rowElement.offsetTop - scrollArea.scrollTop) + (rowElement.offsetHeight - scrollArea.offsetHeight) + rowElement.offsetHeight;

}

//chck if the selected row is above the viewable grid area

else if ((rowElement.offsetTop - scrollArea.scrollTop) < 0) {

//scroll the selected row to the top

scrollArea.scrollTop = rowElement.offsetTop;

}

}, 200);

}

Grid

answered on 23 Apr 2010

1 answer

85 views

cached dataset and edit mode

hello
Using SQL2k environment and do not have SQLCacheDependancy running. I am loading my data via the conventional cache method

    
            sub bindgrid()

            Dim d As DataTable = CType(Cache("MyCache"), Data.DataTable)  
        
            If d Is Nothing Then  
        
            d = functions.dt("Select top 100* from table")  
        
            Cache.Insert("MyCache", d, Nothing, DateTime.Now.AddSeconds(30), TimeSpan.Zero)  
        
            status.innerhtml = "data loaded from database" 
        
            Else  
        
            status.innerhtml = "Data loaded from cache" 
        
            End If  
        
            RadGrid1.DataSource = d  

            end sub

I am calling the sub from within the needdatasource event. so now the grid loads either cached or fresh data. I am handling paging via calling bindgrid() again and setting pageindex to newpageindex.

This works fine. When I go into edit mode and incorporate the GridEditableitem method and update the selected row this also works fine except that the cached data now no longer matches the updated data. until the cache is rebuilt or I manually remove the cache on updated.

    
                    If e.CommandName = "Update" Then  
        
                        Dim ei As GridEditableItem = TryCast(e.Item, GridEditableItem)  
        
                        Dim pk As String = ei.OwnerTableView.DataKeyValues(ei.ItemIndex)("keyid").ToString()  
        
                        Dim empid As String = TryCast(ei("Emp_ID").Controls(0), TextBox).Text  
        
                        Dim sql As String = "update table set emp_id = '" & empid & "' where keyid = " & pk  
        
                        functions.Scalar(sql)  
        
                        Cache.Remove("MyCache") 'If I don't kill the cache I end up with the old values.  
        
                        bindgrid()  
        
                    End If

Do you have any method or trick to updating the grid to the new values without having to rebuild the cache? I suppose I could somehow extract the datatable from the cache, loop through the datatable, find the affected row, somehow update the column and reset the grid... but that seems pretty laborious.

Grid

answered on 23 Apr 2010