Questions on UI for ASP.NET AJAX Forum

1 answer

176 views

RadPanelBar item not expanding when I set Expand property to true

I am trying to programmatically expand a radpanelitem, but it does not seem to be working. I can expand it via the UI by clicking, but I would like to expand it from the code behind.



01.<telerik:RadPanelBar ID="rpbHeader" runat="server" Skin="Outlook" Width="100%" ExpandMode="FullExpandedItem" OnPreRender="rpbHeader_PreRender">
02.        <Items>
03.            <telerik:RadPanelItem ID="rpi_Header" runat="server" Owner="rpbHeader" Text="Statement Details">
04.                <ContentTemplate>
05.                    <asp:UpdatePanel ID="UpdatePanel3" runat="server">
06.                        <ContentTemplate>
07.                            <div style="padding-top: 8px;">
08.                            </div>
09.                            <div class="RFSHeader">
10.                                <uc2:ucStatementHeader ID="ucStatementHeader" runat="server" />
11.                            </div>
12.                        </ContentTemplate>
13.                    </asp:UpdatePanel>
14.                </ContentTemplate>
15.            </telerik:RadPanelItem>
16.        </Items>
17.    </telerik:RadPanelBar>

1.protected void Page_PreRender(object sender, EventArgs e)
2.        {
3.            if (sessionInfo.SessionObject().FinData.BankStatement != null)
4.            {
5.                rpi_Header.Expanded = true;
6.            }
7.        }

PanelBar

answered on 27 Nov 2014

1 answer

48 views

Visual Style Builder to support LightWeight

Hi,

Will Visual Style Builder be able to support automatically the property RenderMode="Lightweight" in the future ?
From what I gathered in the forms, Visual Style Builder only supports RenderMode="Classic".

I've tried RenderMode="Lightweight" after doing "Visual Style Builder" and Telerik's Skin Builder Assembly Builder Tool (http://skinsassemblybuilder.telerik.com/) ,.. and UI rendering indeed breaks.

Thanks,
Henry Wu

Visual Style Builder

answered on 27 Nov 2014

0 answers

127 views

textarea issue in Radeditor

I am using radeditor in which <textarea> is used. now problem is when i give multiple new line from design mode and go to the html mode then again switch back to design mode, my all new lines are deleted.

Example
following line
------------
this is text1

this is text 2
-----------------
becomes

------------
this istext1
this istext2
------------

WebParts for SharePoint

asked on 27 Nov 2014

2 answers

107 views

Rad Html chart font is not displayinh in Mozila firefox

I'm using rad html chart in my web site. now when i run my site on mozila fire fox, chart is rendered but without any font. though working perfectly in Chrome

I Guess problem is <font > tag addded in chart html while running site on firefox.

This is my Html render of chart.
http://screencast.com/t/mFXghTGXHj

<div style="width: 400px; height: 480px" id="general_div" len="5211">
<div id="ctl00_MainContent_PieChart1" style="height: 480px; width: 400px; position: relative;" data-role="chart" class="k-chart" len="5007">

<svg style="position: relative; display: block; left: -0.599976px; top: -0.899994px;" height="480px" width="400px" version="1.1" xmlns="http://www.w3.org/2000/svg" len="4643">
<defs id="k10024" len="326">
<radialGradient gradientUnits="userSpaceOnUse" r="103.25" fy="260" fx="152.5" cy="260" cx="152.5" id="k10002">
<stop style="stop-color: #fff; stop-opacity: 0.06" offset="0%" />
<stop style="stop-color: #fff; stop-opacity: 0.2" offset="83%" />
<stop style="stop-color: #fff; stop-opacity: 0" offset="95%" />
</radialGradient>
</defs><path fill="none" stroke-opacity="1" fill-opacity="1" stroke-linejoin="round" stroke-linecap="square" stroke-width="0" stroke="" d="M0 0 400 0 400 480 0 480 z" style="display: block;" len="0" /><path fill="none" stroke-opacity="1" fill-opacity="1" stroke-linejoin="round" stroke-linecap="square" stroke-width="0.1" d="M5.5 45.5 300.5 45.5 300.5 475.5 5.5 475.5 z" style="display: block;" len="0" /><path fill="#fff" stroke-opacity="1" fill-opacity="0" stroke-linejoin="round" stroke-linecap="square" stroke="" d="M5 45 300 45 300 475 5 475 z" data-model-id="k10026" style="display: block;" id="k10025" len="0" /><text fill="#000" style="font: 16px Arial,Helvetica,sans-serif;" fill-opacity="1" y="31" x="83" len="28">Email Campaign Summary Chart</text><g id="k10027" len="0" /><g len="527"><path fill="#3366cc" stroke-opacity="1" fill-opacity="1" stroke-linejoin="round" stroke-linecap="square" stroke-width="0.5" d="M 152.5 156.75 A103.25 103.25 0 0,1 240.365 314.224 L 152.5 260 z" data-model-id="k10030" style="display: block;" id="k10001" len="0" /><path fill="url(#k10002)" stroke-opacity="1" fill-opacity="1" stroke-linejoin="round" stroke-linecap="square" stroke-width="0.5" d="M 152.5 156.75 A103.25 103.25 0 0,1 240.365 314.224 L 152.5 260 z" data-model-id="k10030" style="display: block;" id="k10029" len="0" /></g><g len="531"><path fill="#dc3912" stroke-opacity="1" fill-opacity="1" stroke-linejoin="round" stroke-linecap="square" stroke-width="0.5" d="M 240.365 314.224 A103.25 103.25 0 0,1 85.198 338.301 L 152.5 260 z" data-model-id="k10032" style="display: block;" id="k10000" len="0" /><path fill="url(#k10002)" stroke-opacity="1" fill-opacity="1" stroke-linejoin="round" stroke-linecap="square" stroke-width="0.5" d="M 240.365 314.224 A103.25 103.25 0 0,1 85.198 338.301 L 152.5 260 z" data-model-id="k10032" style="display: block;" id="k10031" len="0" /></g><g len="525"><path fill="#ff9900" stroke-opacity="1" fill-opacity="1" stroke-linejoin="round" stroke-linecap="square" stroke-width="0.5" d="M 85.198 338.301 A103.25 103.25 0 0,1 152.5 156.75 L 152.5 260 z" data-model-id="k10034" style="display: block;" id="k10004" len="0" /><path fill="url(#k10002)" stroke-opacity="1" fill-opacity="1" stroke-linejoin="round" stroke-linecap="square" stroke-width="0.5" d="M 85.198 338.301 A103.25 103.25 0 0,1 152.5 156.75 L 152.5 260 z" data-model-id="k10034" style="display: block;" id="k10033" len="0" /></g><g len="1484"><path fill="none" stroke-opacity="1" fill-opacity="1" stroke-linejoin="round" stroke-linecap="square" stroke-width="0" stroke="" d="M305 210 390 210 390 265 305 265 z" style="display: block;" len="0" /><font><text fill="#000" style="font: 12px Arial,Helvetica,sans-serif; cursor: pointer;" fill-opacity="1" y="227" x="325" data-model-id="k10036" id="k10035" len="4">Open</text><text fill="#000" style="font: 12px Arial,Helvetica,sans-serif; cursor: pointer;" fill-opacity="1" y="242" x="325" data-model-id="k10038" id="k10037" len="8">UnOpened</text><text fill="#000" style="font: 12px Arial,Helvetica,sans-serif; cursor: pointer;" fill-opacity="1" y="257" x="325" data-model-id="k10040" id="k10039" len="6">Bounce</text></font>
<path fill="#3366cc" stroke-opacity="1" fill-opacity="1" stroke-linejoin="round" stroke-linecap="square" stroke-width="1" stroke="#3366cc" d="M310.5 219.5 318.5 219.5 318.5 226.5 310.5 226.5 z" data-model-id="k10036" style="display: block; cursor: pointer;" len="0" />
<path fill="#dc3912" stroke-opacity="1" fill-opacity="1" stroke-linejoin="round" stroke-linecap="square" stroke-width="1" stroke="#dc3912" d="M310.5 234.5 318.5 234.5 318.5 241.5 310.5 241.5 z" data-model-id="k10038" style="display: block; cursor: pointer;" len="0" />
<path fill="#ff9900" stroke-opacity="1" fill-opacity="1" stroke-linejoin="round" stroke-linecap="square" stroke-width="1" stroke="#ff9900" d="M310.5 249.5 318.5 249.5 318.5 256.5 310.5 256.5 z" data-model-id="k10040" style="display: block; cursor: pointer;" len="0" />
</g><font><text fill="#000" style="font: 12px Arial,Helvetica,sans-serif;" fill-opacity="1" y="235" x="186" data-model-id="k10030" id="k10041" len="6">33.8 %</text><text fill="#000" style="font: 12px Arial,Helvetica,sans-serif;" fill-opacity="1" y="323" x="143" data-model-id="k10032" id="k10042" len="6">27.5 %</text><text fill="#000" style="font: 12px Arial,Helvetica,sans-serif;" fill-opacity="1" y="243" x="78" data-model-id="k10034" id="k10043" len="6">38.7 %</text></font></svg>
<div style="display: none; position: absolute; font: 12px Arial,Helvetica,sans-serif; border: 1px solid; opacity: 1; filter: alpha(opacity=100);" class="k-tooltip" len="0"></div>
</div>
</div>

Chart (Obsolete)

answered on 27 Nov 2014

0 answers

245 views

Preventing the Transfer of Certain Items, Server-Side

Hi everyone,

Recently I had a requirement in which the users needed to be able to select items from one sorted RadListBox control (Source) and move them to another RadListBox control (Destination). In the Destination box, the users also needed to be able to put the items in any order they wanted. To make matters a little more complicated, the Destination box was pre-populated with some items marked as "required", and the users were not supposed to be able to move those items out of the Destination, but they still needed to be able to re-order the required items as desired.

I wanted the Source items to remain sorted after any items were moved into or out of it, and this included drag-n-drop operations. I also wanted the "Transfer All" buttons to work intelligently, so that all items except for the required items were moved accordingly.

While I saw a number of options to prevent the transfer of certain items client-side, there was no client-side sorting mechanism. So I decided to implement everything server-side.

The only real "gotcha" here was implementing the ListBox's "Reordered" event handler. This was necessary because when doing drag-n-drop operations, the ListBox control does an automatic re-ordering of the items in order to drop the item in the exact position you want it. Technically, you're really adding an item to the end of the Items collection, so the re-order happens automatically to place the item where you want it.

In my case, when moving the items from the unsorted ListBox to the sorted ListBox, I had to make sure that the items were sorted AFTER this "Reordered" event fired. Otherwise, the last item in the list after the manual Sort in the "Transferred" even would be moved to wherever the mouse dropped the original item. It was a strange effect, but was solved after asking Telerik about the behavior.

Since it wasn't intuitive to me at first, I thought I'd post the code here for everyone. Hopefully some of you will find it useful.

HTML:

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadListBox1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadListBox2" UpdatePanelCssClass="" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadListBox2">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadListBox1" UpdatePanelCssClass="" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<table>

<tr>

<td>

<telerik:RadListBox ID="RadListBox1" runat="server" AllowTransfer="True" TransferToID="RadListBox2"

SelectionMode="Multiple" AutoPostBackOnTransfer="true" Width="300px" Height="300px" EnableDragAndDrop="true">

<ButtonSettings TransferButtons="All"></ButtonSettings>

<Items>

<telerik:RadListBoxItem runat="server" Text="RadListBoxItem1" />

<telerik:RadListBoxItem runat="server" Text="RadListBoxItem2" />

<telerik:RadListBoxItem runat="server" Text="RadListBoxItem3" />

<telerik:RadListBoxItem runat="server" Text="RadListBoxItem4" />

<telerik:RadListBoxItem runat="server" Text="RadListBoxItem5" />

<telerik:RadListBoxItem runat="server" Text="RadListBoxItem6" />

<telerik:RadListBoxItem runat="server" Text="RadListBoxItem7" />

<telerik:RadListBoxItem runat="server" Text="RadListBoxItem8" />

<telerik:RadListBoxItem runat="server" Text="RadListBoxItem9" />

</Items>

</telerik:RadListBox>

</td>

<td>

<telerik:RadListBox ID="RadListBox2" runat="server" SelectionMode="Multiple" AllowReorder="true"

EnableDragAndDrop="true" Width="300px" Height="300px">

<Items>

<telerik:RadListBoxItem runat="server" Text="RequiredItem1 (required)" />

<telerik:RadListBoxItem runat="server" Text="RequiredItem2 (required)" />

</Items>

</telerik:RadListBox>

</td>

</tr>

</table>

</asp:Content>

Code-Behind:

private const string REQUIRED_FLAG = "(required)";

protected void Page_Init(object sender, EventArgs e)

{

RadListBox1.Transferred += new Telerik.Web.UI.RadListBoxTransferredEventHandler(RadListBox1_Transferred);

RadListBox1.Transferring += new Telerik.Web.UI.RadListBoxTransferringEventHandler(RadListBox1_Transferring);

RadListBox1.Reordered += new RadListBoxEventHandler(RadListBox1_Reordered);

}

protected void Page_Load(object sender, EventArgs e)

{

}

void RadListBox1_Transferred(object sender, Telerik.Web.UI.RadListBoxTransferredEventArgs e)

{

RadListBox1.Sort = Telerik.Web.UI.RadListBoxSort.Ascending;

RadListBox1.SortItems();

}

void RadListBox1_Transferring(object sender, Telerik.Web.UI.RadListBoxTransferringEventArgs e)

{

Boolean transferFail = false;

foreach (RadListBoxItem item in e.Items)

{

if (item.Text.EndsWith(REQUIRED_FLAG))

{

transferFail = true;

break;

}

// only do special processing if required fields are in e.Items

// otherwise, let the Transferring and Transferred events fire normally

if (transferFail)

{

// cancel the event

// (this also prevents the Transferred event from firing after)

e.Cancel = true;

foreach (RadListBoxItem item in e.Items)

{

if (!item.Text.EndsWith(REQUIRED_FLAG))

{

//e.SourceListBox.Transfer(item,e.SourceListBox,e.DestinationListBox);

e.SourceListBox.Items.Remove(item);

e.DestinationListBox.Items.Add(item);

}

// Since the Transferred event doesn't fire, sort items

e.DestinationListBox.Sort = RadListBoxSort.Ascending;

e.DestinationListBox.SortItems();

}

void RadListBox1_Reordered(object sender, RadListBoxEventArgs e)

{

// Needed to sort AFTER the automatic reordering that Telerik does during the drag-n-drop action

RadListBox1.Sort = Telerik.Web.UI.RadListBoxSort.Ascending;

RadListBox1.SortItems();

}

ListBox

asked on 26 Nov 2014

1 answer

73 views

Trying to find AutoCompleteBoxData/boxitemData

I must really be stupid, but I am trying to location the AutoCompleteBoxData class and the AutoCompleteBoxItemData class.

These 2 classes are referenced in the AutoCompleteBox - Data Binding - Various Data Sources demo, but I cannot locate them so I can set up a demo on my locale system that mirrors what is on your site.

Any help you can give me would be most appreciated!

Thanks in advance!

Lynn

AutoCompleteBox

answered on 26 Nov 2014

1 answer

69 views

Menu Mobile Mode iPhone 6

I have a simple radMenu with 6 items and no children in mobile mode. When it is displayed on my iPhone 6 Plus in portrait mode then all six items are shown, when in landscape mode then only four items are show. Why? Screen shots attached.

Menu

answered on 26 Nov 2014

4 answers

259 views

RadComboBox Validation with Filter Text Entered

I have a RadComboBox in an edit template of a grid with a RequiredFieldValidator. The combo box is set to to Filter="Contains", with an empty message of "--Select--". The RequiredFieldValidator will stop them from submitting if they have not entered any text, however it will not stop them if they have not selected at item. If they try filtering by a value that is not in the list and hit save without selecting it will not prevent this action.

I tried using a CompareValidator but I can't get it to fire when nothing is selected. Also I believe this would only compare the text they have entered as it grabs the Text field and not the Value field.

Is there a Validator I can use to verify they have actually selected an item when allowing filtering, or will I need to write some javascript validation for this?

<telerik:GridTemplateColumn Display="false" UniqueName="colClass" HeaderText="Class">

<ItemTemplate>

<asp:Label runat="server" ID="lblClass" Text=<%# Eval("Class") %> ></asp:Label>

</ItemTemplate>

<EditItemTemplate>

<telerik:RadComboBox runat="server" ID="cbbClass" DataSourceID="classesDS" OnSelectedIndexChanged="cbbClass_SelectedIndexChanged" AutoPostBack="true" EmptyMessage="--Select a Class--" Filter="Contains" DataValueField="Class_ID" DataTextField="Class" SelectedValue = <%# Eval("Class_ID") %> ></telerik:RadComboBox>

<asp:RequiredFieldValidator runat="server" ID="cbbClassValidator" ValidationGroup="SessionSave" ErrorMessage="You must select a Class!" Text="*" Display="Dynamic" ControlToValidate="cbbClass" ></asp:RequiredFieldValidator>

<asp:CompareValidator runat="server" ID="cbbClassValidator2" ValueToCompare=""

Operator="NotEqual" ControlToValidate="cbbClass" Display="Dynamic" ErrorMessage="You must select a Class2!" Text="*" ValidationGroup="SessionSave" />

</EditItemTemplate>

</telerik:GridTemplateColumn>

Thanks,
James

Grid

answered on 26 Nov 2014

1 answer

459 views

RadComboBox Multi-Select Checkboxes

Hi,

I have used RadComboBox inside my DetailsView. I send the value of combobox as comma separated to the database as (1,2,3,4). When I want to retrieve the data (1,2,3,4) from the database on edit mode of DetailsView, how can I set or bind the "Checked" values and display them as checked back in the combobox.

Here is what i have done:

WebForm1.Aspx

<%----------------------- DATA SOURCE FOR DELIVERABLE -------------------------%>

<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:ITSConnectionString %>"

DeleteCommand="DELETE FROM [Deliverable] WHERE [DeliverableId] = @DeliverableId"

InsertCommand="INSERT INTO [Deliverable] ([DeliverableTitle],[CCIds]) VALUES (@DeliverableTitle, @CCIds)"

SelectCommand="SELECT * FROM [Deliverable] WHERE ([DeliverableId] = @DeliverableId)"

UpdateCommand="UPDATE [Deliverable] SET [DeliverableTitle] = @DeliverableTitle, [CCIds] = @CCIds WHERE [DeliverableId] = @DeliverableId">

<DeleteParameters>

<asp:Parameter Name="DeliverableId" Type="Int32" />

</DeleteParameters>

<InsertParameters>

<asp:Parameter Name="DeliverableId" Type="int32" />

<asp:Parameter Name="DeliverableTitle" Type="String" />

<asp:Parameter Name="CCIds" Type="String" />

</InsertParameters>

<UpdateParameters>

<asp:Parameter Name="DeliverableId" Type="int32" />

<asp:Parameter Name="DeliverableTitle" Type="String" />

<asp:Parameter Name="CCIds" Type="String" />

</UpdateParameters>

<SelectParameters>

<asp:QueryStringParameter Name="DeliverableId" QueryStringField="DeliverableId" Type="Int32" />

</SelectParameters>

</asp:SqlDataSource>

<%----------------------- DATA SOURCE FOR COMBOBOX -------------------------%>

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

ConnectionString="<%$ ConnectionStrings:ITSConnectionString %>" SelectCommand="SELECT [UserId], [DisplayName] FROM [Users]"></

asp:SqlDataSource>

<%----------------------- THE DETAILS VIEW -------------------------%>

<asp:DetailsView ID="DetailsView1" runat="server" DefaultMode="Insert" AutoGenerateRows="False" DataKeyNames="DeliverableId" DataSourceID="SqlDataSource2" Height="50px" Width="125px" OnItemInserting="DetailsView1_ItemInserting" OnDataBinding="DetailsView1_DataBinding" OnDataBound="DetailsView1_DataBound">

<Fields>

<asp:BoundField DataField="DeliverableId" HeaderText="DeliverableId" InsertVisible="False" ReadOnly="True" SortExpression="DeliverableId" />

<asp:BoundField DataField="DeliverableId" HeaderText="DeliverableId" SortExpression="DeliverableId" />

<asp:BoundField DataField="DeliverableTitle" HeaderText="DeliverableTitle" SortExpression="DeliverableTitle"/>

<asp:TemplateField>

<ItemTemplate>

<telerik:RadComboBox ID="CCIds" Text='<% #Bind("CCIds") %>' runat="server"

DataSourceID="SqlDataSource1" DataTextField="DisplayName" DataValueField="UserId"

CheckBoxes="true"></telerik:RadComboBox>

</ItemTemplate>

</asp:TemplateField>

<asp:CommandField ShowEditButton="True" />

<asp:ButtonField Text="Insert" CommandName="Insert" />

<asp:ButtonField Text="Update" CommandName="Update" />

</Fields>

</asp:DetailsView>

WebForm1.Aspx.CS

public string GetCheckBoxValues(string RadComboBoxName)

{

RadComboBox rcb = (RadComboBox)DetailsView1.FindControl(RadComboBoxName);

var collection = rcb.CheckedItems;

StringBuilder sbValues = new StringBuilder();

if (collection.Count != 0)

{

foreach (var item in collection)

{

sbValues.Append(item.Value);

sbValues.Append(Delimiter);

}

if (sbValues.ToString().EndsWith(Delimiter))

sbValues.Remove(sbValues.Length - 1, 1);

}

return sbValues.ToString();

}

// Get the comma separate values and insert them into the DB.

protected void DetailsView1_ItemInserting(object sender, DetailsViewInsertEventArgs e)

{

string CCIds = GetCheckBoxValues("CCIds");

if (CCIds != null)

{

e.Values["CCIds"] = CCIds;

}

Now how can I get the comma separated values and bound them with the combobox so that it should check only those items.

ComboBox

answered on 26 Nov 2014

1 answer

123 views

Navigator on Non Stock type charts

hi is there any way , or plan to add functionality to the HTMLChart to allow it to have a range selector on non stock based data , as i would love to use the navigator but the data i have isnt price based.

Chart (HTML5)

answered on 26 Nov 2014