Questions on UI for ASP.NET AJAX Forum

2 answers

177 views

Erroneous Value Property Upon SelectedIndexChanged

To test out the RadComboBox I constructed a simple web page that has just this one control on it. A small datatable (see attachment) is used to populate the control with this code:

radList.DataSource = CurrentPasses;

radList.DataTextField = "Description";

radList.DataValueField = "Master_Idx";

radList.DataBind();

My initial testing has revealed something strange: When I click on any item, the SelectedIndexChanged event is fired.

protected void radList_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)

When I check "e.Text" the correct string is shown. But when I check "e.Value" it always displays -1. Why isn't it showing the correct "Master_Idx" value for that row?

Am I missing something or is this a known bug in the RadComboBox?

Robert

ComboBox

answered on 14 Dec 2012

6 answers

120 views

No client validation on Enter Key

HI,

I have keybordnavigation enabled on a RadGrid with a FormTemplate for edition and inserting. I have several radtextbox with requiredfieldvalidators like :

<telerik:RadTextBox ID="edDescription" runat="server" Text='<%# Bind("PPSO_DESCRIPTION") %>'

DataType="System.String" Width="277" MaxLength="50"     SelectionOnFocus="SelectAll">                           </

telerik:RadTextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="edDescription"

ErrorMessage='<%# GetMessageEx(1744).Texte%>' runat="server" Display="Dynamic" ValidationGroup="freqValid" />

If I click my save button inside the template, the update command is not fired if edDescription is emptym but if I press ENTER key, the server event is fired. My save button looks like :

<asp:Button ID="btnUpdate"

Text='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "Add", "Save") %>'     CausesValidation="true" ="server"

CommandName='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "PerformInsert", "Update") %>' ValidationGroup="freqValid">

Is there something to perform validation on Enter key press?

Tom

Update : ok I achived make the validators to work by putting KeyboardNavigationSettings.ValidationGroup = "freqValid", but this only work in update mode, not in insert mode !?!?!

Grid

answered on 14 Dec 2012

2 answers

175 views

Setting initial value to multicolumn combobox with webservice load-on-demand

I have been searching for the solution to the above scenario but couldn't find one. The details of what I need to do is as below:-

I have a RadComboBox which loads items on demand. The items are supplied by a webservice. The dropdownlist items are displayed in 2-column: the ID and Name, using ClientItemTemplate:

<telerik:RadComboBox ID="cboVendor" runat="server" EnableLoadOnDemand="true" ShowMoreResultsBox="true"

EnableVirtualScrolling="true" Width="474px" HighlightTemplatedItems="True" EnableItemCaching="true">

<WebServiceSettings Method="GetVendors" Path="~/services/Vendors.asmx" />

<HeaderTemplate>

<ul class="vendorlist">

<li>Vendor Code</li>

<li>Vendor Name</li>

</ul>

</HeaderTemplate>

<ClientItemTemplate>

<ul class="vendorlist">

<li>#= Value #</li>

<li>#= Text #</li>

</ul>

</ClientItemTemplate>

</telerik:RadComboBox>

While this works pretty flawless when the page is opened for inserting records (where the combobox is blank initially), I found that it is a hassle when in editing mode, where I need to set it's value initially along with all other fields on the page.

However, I have got it to work after hours of pulling hair. Not pretty but works. This is what I did :-

Set ViewState values of the item's value and text in code behind:

ViewState("VendorName") = dt.Rows(0)!vendor_name.ToString()

ViewState("VendorCode") = dt.Rows(0)!vendor.ToString()

Javascript to add the item to the ComboBox:

var vendorSet;

function pageLoad() {

if (!vendorSet) {

var text = '<%=ViewState("VendorName")%>';

var value = '<%=ViewState("VendorCode")%>';

if (value != '') addItem(text, value);

vendorSet = true;

}

function addItem(itemText, itemValue) {

var item = new Telerik.Web.UI.RadComboBoxItem();

item.set_text(itemText);

item.set_value(itemValue);

var combo = $find('<%=cboVendor.ClientID%>');

var items = combo.get_items();

items.add(item);

item.select();

item.bindTemplate();

}

The reason I need the vendorSet flag is because the addItem needs to be called from pageLoad() event, and I found out that the pageLoad() event is triggered everytime during AJAX called anywhere on the page!

The reason I call the addItem() func from pageLoad() event is because there is the only point where $find('<%=cboVendor.ClientID%>') will work.

So my question is, Is there prettier and simpler ways of doing this?

I hope I have explained the situation clear enough for you guys to reproduce and test and hopefully come up with better way of doing this. Thanks a bunch in advance!

ComboBox

answered on 14 Dec 2012

1 answer

31 views

Newbie In Need of Help

Hi folks,

Brand new to the Chart control and way out of my depth. I'm not even sure that the chart can do what I want but here goes. I've attached an image showing the ideal chart. (Okay, the shadow's a frill. <grin>)

I need a chart with two series that displays the XValue (an OADate) as a formatted string and the YValues as a line. The two series will have similar Y data but dissimilar dates. Only the dates that are given should appear - not ranges.

I've pasted in some sample markup to show what the data looks like. Nothing is working so far so any tips, code, warning or solutions are most welcome.

Ken

<telerik:RadChart runat="server" ID="RadChart2" Skin="LightBrown">

<Series>

<telerik:ChartSeries Name="Vendor One" Type="Line">

<Items>

<telerik:ChartSeriesItem YValue="6000" XValue="41245.211">

</telerik:ChartSeriesItem>

<telerik:ChartSeriesItem YValue="8000" XValue="41251.44">

</telerik:ChartSeriesItem>

</Items>

</telerik:ChartSeries>

<telerik:ChartSeries Name="Vendor Two" Type="Line">

<Items>

<telerik:ChartSeriesItem YValue="5000" XValue="41253.345">

</telerik:ChartSeriesItem>

<telerik:ChartSeriesItem YValue="9000" XValue="41254.72315">

</telerik:ChartSeriesItem>

</Items>

</telerik:ChartSeries>

</Series>

<PlotArea>

<XAxis >

<Appearance>

<LabelAppearance RotationAngle="70"></LabelAppearance>

</Appearance>

</XAxis>

<YAxis AxisMode="Extended">

</YAxis>

</PlotArea>

<ChartTitle>

<TextBlock Text="Chart Problem">

</TextBlock>

</ChartTitle>

</telerik:RadChart>

Chart (Obsolete)

answered on 14 Dec 2012

2 answers

117 views

Rad Async Upload Problem

Uploading ".doc" files seems to cause an issue. They get stuck on yellow
for the upload process even though it shows 100%. If you try to continue-
click save... It does not save the file.

AsyncUpload

answered on 14 Dec 2012

2 answers

52 views

Problem with TargetFolder

Hello,
use the object radupload to send images to a remote server ... I have a problem with the TargetFolder. If I set the object properties of the folder, the transfer on the server is ok, but if you pass the path to the folder using vb net, transferring the image is not there. Why? Here is the code I use.

Upload (Obsolete)

answered on 14 Dec 2012

7 answers

324 views

How to create a new dock dynamically without Postback

Hello,

Here is my situation. I am developing a portal page using Raddocks. On top of the page I will have a rad grid which will have a linkbutton with an onclick event on server side. When the user clicks on a linkbutton of a specific row of a radgrid, a new widget/dock should be created and added to the Layout.

Every dock has a usercontrol in it which is loaded via a webservice. I am saving the state in the database from client side. My issue here is that whenever I am creating a new dock, all the existing docks are getting recreated and all the usercontrols are getting loaded again. I just want the user selected dock to be loaded.

I know that I can use AsyncPostBackTrigger, but I am getting an error that it is not able to find the control that I am clicking(btnAddWidget) which is inside a RadGrid. I was wondering if there is any other way to handle this without having to re-create all the docks again. I have the flexibility to replace the RadGrid with any other control like a listview or something.

The following is my code:

Default.aspx:

   function OnClientDockPositionChanged(dock, args) {
   SaveState();
   }
   function OnClientResizeEnd(dock, args) {
   SaveState();
   }
       function OnClientCommand(dock, args) {
   SaveState();
   }
   function SaveState() {
   var i;
   var state = "";
   var zone1 = $find("RadDockZone1");
   var zone2 = $find("RadDockZone2");
   var array1Docks = zone1.get_docks();
   var array2Docks = zone2.get_docks();
   for (i = 0; i < array1Docks.length; i++) {
   var dock = array1Docks[i];
   var dockID = dock.get_id();
   var tag = $get(dockID).attributes["tag"].value;
   state = state + tag + "#" + array1Docks[i].saveClientState() + "|";
      }
   for (i = 0; i < array2Docks.length; i++) {
   var dock = array2Docks[i];
   var dockID = dock.get_id();
   var tag = $get(dockID).attributes["tag"].value;
   state = state + tag + "#" + array2Docks[i].saveClientState() + "|";
   }
   SOLEWebService.VerifyUserSessionAndUpdateUserSettings(state, success, onFail);
      }
   function success(result) {
   alert("success");
      }
   function onFail(result) {
   alert(result.d);
   }
   function OnClientInitialize(dock, args) {
       var dockID = dock.get_id();
   var tag = $get(dockID).attributes["tag"].value;
   var UserControl = $get(dockID).attributes["UserControl"].value;
       if ($get(dockID).attributes["NewDock"] != null && $get(dockID).attributes["NewDock"].value != null) {
   var newDock = $get(dockID).attributes["NewDock"].value;
   var state = "";
   state = tag + "#" + dock.saveClientState() + "|";
   SOLEWebService.VerifyUserSessionAndSaveUserSettings(state, success, onFail);
   }
       UserControlService.GetUserWidgetData(UserControl, tag, function (result) {
   $get(dockID + "_C").innerHTML = result;
   });
   }
    <script src="/Scripts/JQuery/Scripts/JQuery-1.4.1-vsdoc.js" type="text/javascript"></script>
   </head>
<body>
   <form id="form1" runat="server">
   <telerik:RadScriptManager runat="server" ID="RadScriptManager1" EnablePageMethods = "true" EnableScriptCombine="true">
   <Services>
   <asp:ServiceReference Path = "~/UserControlService.asmx" />
   <asp:ServiceReference Path = "~/SOLEWebService.asmx" />
   </Services>
   </telerik:RadScriptManager>
  <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" EnableStyleSheetCombine="true">
   </telerik:RadStyleSheetManager>
   <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" ClientEvents-OnResponseEnd = "RecallJquery">
        <asp:UpdatePanel runat="server" ID="UpdatePanel1">
   <ContentTemplate>
   <table>
   <tr>
   <td>
   <div id = "gridViewPanel" class = "ContainerPanel">
   <div id="gridViewHeader" class="collapsePanelHeader">
   <div id="Div2" class="HeaderContent">Add Stuff</div>
   <div id="Div3" class="ArrowClose"></div>
   </div>
   <div id = "gridContent" class = "Content" style="display:none">
   <telerik:RadGrid runat="server" ID="grdWidgets" OnNeedDataSource="grdWidgets_NeedDataSource"
   AllowPaging="True" Width="400px" >
   <MasterTableView DataKeyNames="Widgets" Width="100%" TableLayout="Fixed">
   <Columns>
   <telerik:GridTemplateColumn UniqueName="TemplateColumn" HeaderText="" ItemStyle-Width = "50px">
   <ItemTemplate>
   <asp:Panel ID="Panel1" runat="server">
   <asp:LinkButton ID="btnAddWidget" runat="server" Text = "Add" OnClick = "btnAddWidget_Click" />
   </asp:Panel>
   </ItemTemplate>
   </telerik:GridTemplateColumn>
   </Columns>
   </MasterTableView>
   <ClientSettings AllowRowsDragDrop="True">
   <Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />
   <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="320px" />
   </ClientSettings>
   <PagerStyle Mode="NumericPages" PageButtonCount="4" />
   </telerik:RadGrid>
   </div>
   </div>
   </td>
   </tr>
   </table>
   <telerik:RadDockLayout runat="server" ID="RadDockLayout1" OnLoadDockLayout="RadDockLayout1_LoadDockLayout">
   <table>
   <tr>
   <td style="vertical-align: top">
   <telerik:RadDockZone ID="RadDockZone1" runat="server" Orientation="Vertical" Width="250px"
   MinHeight="400px">
   </telerik:RadDockZone>
   </td>
   <td style="vertical-align: top">
   <telerik:RadDockZone ID="RadDockZone2" runat="server" Orientation="Vertical" Width="560px"
   MinHeight="400px">
   </telerik:RadDockZone>
   </td>
   </tr>
   </table>
   </telerik:RadDockLayout>
   </ContentTemplate>
   <%-- <Triggers>
   <asp:AsyncPostBackTrigger ControlID="btnAddWidget" EventName="Click" />
   </Triggers>--%>
   </asp:UpdatePanel>
        </telerik:RadAjaxPanel>

Code-Behind:
Protected Sub grdWidgets_NeedDataSource(ByVal source As Object, ByVal e As GridNeedDataSourceEventArgs)
   grdWidgets.DataSource = PortalDataManager.GetDefaultWidgets()
   End Sub

   Private ReadOnly Property CurrentDockStates() As List(Of DockState)
   Get
   'Get saved state string from the database - set it to dockState variable for example
   Dim dockStatesFromDB As String = String.Empty
   dockStatesFromDB = PortalDataManager.GetUserWidgetSettings(33357)
     Dim _currentDockStates As New List(Of DockState)()
   If dockStatesFromDB Is Nothing Then
   Return _currentDockStates
   End If
   If dockStatesFromDB Is String.Empty Then
   Return _currentDockStates
   End If
       Dim stringStates As String() = dockStatesFromDB.Split("|"c)
   For i As Integer = 0 To stringStates.Length - 2
   Dim currentState As String() = stringStates(i).Split("#"c)
   Dim uniqueName As String = currentState(0)
   Dim state As String = currentState(1)
   If state.Trim() <> String.Empty Then
   Dim ds As DockState = DockState.Deserialize(state)
   ds.Tag = uniqueName
   ds.UniqueName = uniqueName
   _currentDockStates.Add(ds)
   End If
   Next
   Return _currentDockStates
   End Get
   End Property

Protected Sub RadDockLayout1_LoadDockLayout(ByVal sender As Object, ByVal e As DockLayoutEventArgs)
   Dim states As List(Of DockState) = CurrentDockStates
   For Each state As DockState In states
   e.Positions(state.UniqueName) = state.DockZoneID
   e.Indices(state.UniqueName) = state.Index
   Next
   End Sub

   Private Function CreateRadDockFromState(ByVal state As DockState) As RadDock
   Dim dock As New RadDock()
   dock.DockMode = DockMode.Docked
   dock.ID = String.Format("RadDock{0}", state.UniqueName)
   dock.ApplyState(state)
   SetDockProperties(dock)
   AddClientEventsToDock(dock)
   Return dock
   End Function

   Private Sub SetDockProperties(ByRef dock As RadDock)
   dock.AutoPostBack = False
   dock.CommandsAutoPostBack = False
   dock.Commands.Add(New DockCloseCommand())
   dock.Commands.Add(New DockExpandCollapseCommand())
   dock.EnableEmbeddedScripts = True
   dock.EnableRoundedCorners = True
   dock.EnableAnimation = True
   End Sub

   Private Sub AddClientEventsToDock(ByRef dock As RadDock)
   dock.OnClientInitialize = "OnClientInitialize"
   dock.OnClientResizeEnd = "OnClientResizeEnd"
   dock.OnClientDragEnd = "OnClientDragEnd"
   dock.OnClientDockPositionChanged = "OnClientDockPositionChanged"
   dock.OnClientCommand = "OnClientCommand"
   End Sub

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
   If (Not Page.IsPostBack) Then
   Dim dockCount As Integer = CurrentDockStates.Count
   For i As Integer = 0 To dockCount - 1
   If CurrentDockStates(i).Closed = False Then
   Dim dock As RadDock = CreateRadDockFromState(CurrentDockStates(i))
   RadDockLayout1.Controls.Add(dock)
   LoadUserControl(dock)
   End If
   Next
   End If
   End Sub

   Protected Sub btnAddWidget_Click(ByVal sender As Object, ByVal e As System.EventArgs)
   Dim btnAdd As LinkButton = CType(sender, LinkButton)
   Dim myPanel As Panel = CType(btnAdd.Parent, Panel)
   Dim dataItem As GridDataItem = CType(myPanel.NamingContainer, GridDataItem)
   Dim widgetType As String = dataItem("Widgets").Text
   Dim widgetTag As String = dataItem("WidgetTag").Text
   Dim userControl As String = dataItem("WidgetUserControl").Text
   Dim dock As RadDock = CreateRadDock(widgetTag)
   dock.Attributes("NewDock") = "True"
   dock.Attributes("UserControl") = userControl
   dock.Attributes("tag") = dock.Tag
   RadDockZone1.Controls.Add(dock)
   btnAdd.Text = "Added"
   btnAdd.Enabled = False
   End Sub

Private Function CreateRadDock(ByVal tag As String) As RadDock
   Dim dock As New RadDock()
   dock.DockMode = DockMode.Docked
   dock.UniqueName = tag
   dock.Tag = tag
   dock.ID = String.Format("RadDock{0}", dock.UniqueName)
   dock.Title = "New Dock"
   SetDockProperties(dock)
   AddClientEventsToDock(dock)
   Dim img As New Image()
   img.ImageUrl = "Reload.gif"
   dock.ContentContainer.Controls.Add(img)
   Return dock
   End Function

   Protected Sub grdWidgets_ItemCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles grdWidgets.ItemCreated
   If TypeOf e.Item Is GridDataItem Then
   Dim dataItem As GridDataItem = CType(e.Item, GridDataItem)
   dataItem.ToolTip = dataItem("Widgets").Text
   End If
   End Sub

    Public Sub LoadUserControl(ByRef dock As RadDock)
   If dock.Tag Is Nothing Then
   Return
   End If
   Dim img As New Image()
   img.ImageUrl = "Reload.gif"
   dock.ContentContainer.Controls.Add(img)
   dock.Attributes("UserID") = 33357
   dock.Attributes("UserControl") = PortalDataManager.GetUserControlForWidget(dock.Tag)
   dock.Attributes("tag") = dock.Tag
   End Sub

Thanks so much for your time on this,

Uday.

Dock

answered on 14 Dec 2012

1 answer

66 views

RadDateTimePicker & RadDatePicker Not Responding in SP2010 Web Parts

Hello Team!

We are developing a web part which make use of RadDateTimePicker & RadDatePicker. It works perfectly in our development environment. However, the controls are not responding when we deployed the solutions to UAT environment. The calendar icon is still showing but there is no response when we clicked on the icon. The JavaScript error below was thrown. Can anyone please advise what are the things that we should check when deploying the solution in a web part in SP2010?

Message: Object expected
Line: 5
Char: 32749
Code: 0
URI: http://test.mycompany.com/ScriptResource.axd?d=-MjrHJBff7jU9KF-pPP1Rni4KJhM1xhvUGHZPgnsV_4PX0zXBVRzYnzACX1YwxtYxGGb8ewfPZLoI5-lRHFijYA4VpfrgsAp0h09g8-1EZ7SrcwnEK2U-HIy4nTK5wOuuZPkDQ_UBlj4HM9U87AAQWVujuc1&t=ffffffffb868b5f4

Thanks in advance!

Calendar

answered on 14 Dec 2012

4 answers

85 views

AutoCompleteBox nested in MultiPage

When I nest an AutoCompleteBox on a page other than the first page in a MultiPage the 

text entered in the AutoCompletBox is hidden to the left of the cursor. Please see code 

and screen shots.



<

div>

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1">

<Tabs>

<telerik:RadTab Text="TAB 1" PageViewID="RadPageView1" />

<telerik:RadTab Text="TAB 2" PageViewID="RadPageView2" />

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">

<telerik:RadPageView ID="RadPageView1" runat="server">

<telerik:RadAutoCompleteBox ID="RadAutoCompleteBox1" runat="server" DataSourceID="ds" DataTextField="Name" DataValueField="Id" />

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView2" runat="server">

ABC

</telerik:RadPageView>

</telerik:RadMultiPage>

</div>

<div>

<telerik:RadTabStrip ID="RadTabStrip2" runat="server" MultiPageID="RadMultiPage2">

<Tabs>

<telerik:RadTab Text="TAB 3" PageViewID="RadPageView3" />

<telerik:RadTab Text="TAB 4" PageViewID="RadPageView4" />

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="RadMultiPage2" runat="server" SelectedIndex="0">

<telerik:RadPageView ID="RadPageView3" runat="server">

ABC

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView4" runat="server">

<telerik:RadAutoCompleteBox ID="RadAutoCompleteBox2" runat="server" DataSourceID="ds" DataTextField="Name" DataValueField="Id" />

</telerik:RadPageView>

</telerik:RadMultiPage>

<asp:SqlDataSource ID="ds" runat="server"

ConnectionString="<%$ ConnectionStrings:ConnectionStringDB %>" DataSourceMode="DataSet" SelectCommand="SELECT Id, Name FROM Table;" />

</div>

AutoCompleteBox

answered on 14 Dec 2012

9 answers

137 views

Window icon causes security warning in IE8 on SSL-enabled site

I've set the image icon on a radWindow as the following (using a relative path):

<telerik:RadWindow runat="server" ID="UserGuideWindow" Width="500px" Height="400px" Modal="false" Behaviors="Close,Minimize,Move" IconUrl="~/Img/help_small.png">

Users receive the security warning: "do you want to view only the webpage content that was delivered securely" in IE8 when visiting the page over SSL.

I looked in the page source and found this:

Sys.Application.add_init(function() {

$create(Telerik.Web.UI.RadWindow, {"_dockMode":true,"_stylezindex":"80000","behaviors":38,"clientStateFieldID":"ctl00_UserGuideWindow_ClientState","formID":"aspnetForm","height":"400px","iconUrl":"//Img/help_small.png","minimizeIconUrl":"//Img/help_small.png","name":"UserGuideWindow","skin":"Sitefinity","title":"User Guide","width":"500px"}, null, null, $get("ctl00_UserGuideWindow"));

});

It looks like the icon is not being set correctly, and the browser thinks that the icon is content from another (unsecure) location.

I can confirm that removing the icon reference completely fixed the issue of the security warning being displayed.

Window

answered on 14 Dec 2012