Questions on UI for ASP.NET AJAX Forum

3 answers

117 views

Weird behave when RadDockZone exceed its height

I noticed some unspected behaviour using chrome browser when the radDockZone exceeds its fixed height, pretty much same issue same scenario found in this thread 2009 raddock issue in this same forum.

I also prepared a couple of videos demonstrating the case scenario using several browsers

IE8 working good
Chrome - not working good
Firefox working good

is this a known issue? any idea how to approach a fix for it?

BTW this issue occurs only when there's a fixed height in the raddockzone in CHROME.

thx- in advanced

Douglas

Dock

answered on 20 Jul 2012

4 answers

112 views

Localization of RadListBox through App_LocalResource file

Hi,

I am trying to localize a RadListBox.

Here is the aspx markup:

<telerik:RadListBox ID="rlbReadOnlyGroups" runat="server" meta:resourcekey="rlbReadOnlyGroups">

</telerik:RadListBox>

Here is my resource file:

rlbReadOnlyGroups.EmptyMessage              Aucun groupe assigné

rlbReadOnlyGroups.AllToLeft                 Tous à gauche

rlbReadOnlyGroups.Localization.AllToLeft Tous à gauche

rlbReadOnlyGroups.Localization-AllToLeft Tous à gauche

As you can see, I tried to set the property "AllToLeft" by different means, but in all cases it fails to show the French translation "Tous à gauche". The EmptyMessage property is shown correctly, but all the property linked to the buttons does not work.

Anyone had this issue?

ListBox

answered on 20 Jul 2012

1 answer

84 views

XMLHttpPanel OnServiceRequest Null

I have a xmlhttppanel loading inside a radajaxloading panel and then a radgrid inside the xmlpanel. When there is a selection in the radgrid made it triggers a grid selected function which is where the onservicerequest is made. The problem is the panel.set_value is showing the panel null even though I am using the var panel = $find("<%=xmlPanel1.ClientID %>"); any ideas??

<asp:Content ID="Content1" ContentPlaceHolderID="cphHead" Runat="Server">

    <script type="text/javascript">
        function rdGrid1_RowSelected(sender, args) {
            var StartDate = args.getDataKeyValue("Start Date");
            var EndDate = args.getDataKeyValue("End Date");
            var panel = $find("<%=xmlPanel1.ClientID %>");
            panel.set_value(StartDate + '|' + EndDate);
        }
        </script>

        .divContainer
        {
            width: 100%;
            height: 160px;
            position: relative;
        }
        .divGrid, .divXmlHttpPanel
        {
            position: absolute;
            top: 2px;
            left: 0px;
        }
        .divXmlHttpPanel
        {
            top: 2px;
            left: 170px;
        }
        .lblstyle
        {
            font-weight: bold;
            font-size: medium;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="CPH_LeftNav" Runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="CPH_MainContent" Runat="Server">
    <%--<p>--%>
        <br />

        <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="chkComplete">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="chkComplete" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="radGrids">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="rdGrid1" LoadingPanelID="rdPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="rdGrid2" LoadingPanelID="rdPanel2" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManagerProxy>
<div class="lblstyle">
    <asp:Label ID="lblSelect" runat="server" Font-Size="Smaller"></asp:Label>
    </div>
    <div class="divContainer">
        <div class="divGrid">
            <telerik:RadAjaxLoadingPanel ID="rdPanel1" runat="server" Skin="WebBlue"></telerik:RadAjaxLoadingPanel>
                <telerik:RadGrid ID="rdGrid1" runat="server" Skin="WebBlue" Height="150px" OnNeedDataSource="rdGrid1_DataSource"
                    GridLines="None" CellSpacing="0" Width="165px" AutoGenerateColumns="false">
                        <MasterTableView ClientDataKeyNames="Start Date, End Date" Width="100%" Summary="rdGrid1 table">
                            <Columns>
                                <telerik:GridBoundColumn HeaderText="Start Date" DataField="Start Date"></telerik:GridBoundColumn>
                                <telerik:GridBoundColumn HeaderText="End Date" DataField="End Date"></telerik:GridBoundColumn>
                            </Columns>
                        </MasterTableView>
                        <ClientSettings EnableRowHoverStyle="true" EnablePostBackOnRowClick="false" ClientEvents-OnRowSelected="rdGrid1_RowSelected">
                            <Selecting AllowRowSelect="True" />
                            <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                            <Resizing EnableRealTimeResize="True" />
                        </ClientSettings>
                </telerik:RadGrid>
        </div>
        <div class="divXmlHttpPanel">
            <telerik:RadAjaxLoadingPanel ID="rdPanel2" runat="server" Skin="WebBlue"></telerik:RadAjaxLoadingPanel>
                <telerik:RadXmlHttpPanel ID="xmlPanel1" Runat="server" RenderMode="Block" LoadingPanelID="rdPanel2"
                        Value="FRANAR" OnServiceRequest="xmlPanel1_ServiceRequest" ClientIDMode="Inherit" EnableClientScriptEvaluation="true">
                    <telerik:RadGrid ID="rdGrid2" runat="server" Skin="WebBlue" GridLines="None" CellSpacing="0"
                            OnNeedDataSource="rdGrid1_DataSource" EnableClientScriptEvaluation="true">
                        <MasterTableView AutoGenerateColumns="true" Summary="rdGrid2 table" Width="100%">
                        </MasterTableView>
                    </telerik:RadGrid>
                </telerik:RadXmlHttpPanel>
        </div>
    </div>
<div class="lblstyle">
<asp:Label ID="lblSelect2" runat="server" Font-Size="Smaller"></asp:Label>
</div>
    <p>
         </p>
</asp:Content>

XmlHttpPanel

answered on 20 Jul 2012

2 answers

200 views

Grid dynamic column width

Hi,

I have a skeleton RadGrid on my page.

<telerik:RadGrid ID="rg" runat="server" CellPadding="2" CellSpacing="2" AutoGenerateColumns="false" EnableViewState="true"

AllowPaging="true" PageSize="25" AllowSorting="true" AllowMultiRowSelection="true" AllowCustomPaging="true"

OnNeedDataSource="rg_NeedDataSource" OnSortCommand="rg_SortCommand"

OnItemDataBound="rg_ItemDataBound">

<PagerStyle Mode="NextPrevNumericAndAdvanced" Position="Bottom" AlwaysVisible="True" />

<ClientSettings EnableRowHoverStyle="true">

<Selecting AllowRowSelect="true"></Selecting>

<ClientEvents OnRowSelected="RowSelected" OnRowDeselected="RowDeselected" />

</ClientSettings>

</telerik:RadGrid>

On the page, when user selects the columns to see then it creates the columns dynamically.

private void DesignRadGrid()

{

rg.MasterTableView.AllowMultiColumnSorting = true;

var lPropertyInfo = typeof(MyObject).GetProperties(BindingFlags.Public | BindingFlags.Instance).ToList();

var vColumns = from col in GetUserSelectedColumns() // return type is GridColumns

join pi in lPropertyInfo on col.ColumnName equals pi.Name

select new

{

col.ColumnId,

col.ColumnName,

col.DataType,

col.DisplayColumn,

col.ParentTable,

col.ParentColumn

};

var width = 0;

foreach (var oColumn in vColumns)

{

var boundColumn = new GridBoundColumn();

GridTemplateColumn templateColumn = null;

switch (oColumn.DataType)

{

case "Number":

var isUnitized = UnitSystem.CheckIfUnitized(oColumn.ParentTable, oColumn.ParentColumn);

// if isUnitized then we need template column

if (isUnitized)

{

boundColumn = null;

var unitLabel = UnitSystem.GetUnitLabel(oColumn.ParentTable, oColumn.ParentColumn, UserId);

templateColumn = new GridTemplateColumn

{

HeaderText = String.Format("{0} ({1})", oColumn.ColumnName, unitLabel)

};

hdnColumnId.Value += "," + oColumn.ColumnId;

}

break;

case "Date":

boundColumn.DtaFormatString = "{0:dd-MMM-yyyy}";

width = 75;

break;

case "Boolean"

boundColumn = null;

templateColumn = new GridTemplateColumn();

hdnColumnId.Value += "," + oColumn.ColumnId;

break;

case "Text":

if (oColumn.ColumnName.EndsWith("Remarks") || oColumn.ColumnName.EndsWith("Summary"))

width = 650;

break;

}

// For sorting to work, the columns must be added to the rg collection before defining the properties

// Telerik: Can you answer why?

if (templateColumn == null)

{

rg.MasterTableView.Columns.Add(boundColumn);

boundColumn.HeaderText = oColumn.ColumnName;

boundColumn.SortExpression = oColumn.Name;

boundColumn.DataField = oColumn.Name;

if (width > 0)

boundColumn.HeaderStyle.Width = width;

//if (width > 0)

//boundColumn.HeaderStyle.Width = Unit.Pixex(width);

}

else

{

rg.MasterTableView.Columns.Add(templateColumn);

templateColumn.HeaderText = String.IsNullOrEmpty(templateColumn.HeaderText)

? oColumn.ColumnName

: templateColumn.HeaderText;

templateColumn.SortExpression = oColumn.Name;

templateColumn.ItemTemplate = new MyTemplate(MyControlType.LiteralControl, "lit" + oColumn.ColumnId.ToString);

if (width > 0)

templateColumn.HeaderStyle.Width = width;

//if (width > 0)

//templateColumn.HeaderStyle.Width = Unit.Pixex(width);

}

var gridCheckBoxColumn = new GridClientSelectColumn { HeaderText = String.Empty, UniqueName = "Select" };

gridCheckBoxColumn.ItemStyle.HorizontalAlign = HorizontalAlign.Center;

rg.MasterTableView.Columns.Add(gridCheckBoxColumn);

var editTemplateColumn = new GridTemplateColumn();

editTemplateColumn.ItemTemplate = new MyTemplate(MyControlType.ImageButton, "ibEdit");

editTemplateColumn.ItemStyle.HorizontalAlign = HorizontalAlign.Center;

editTemplateColumn.UniqueName = "Edit";

rg.MasterTableView.Columns.Insert(0, editTemplateColumn);

}

// Class for Custom Template

public enum MyControlType

{

Button = 0,

ImageButton = 1,

LiteralControl = 2

}

public class MyTemplate : ITemplate

{

protected Control _ctrl;

private MyControlType _ctrlType;

private string _ctrlName;

public MyTemplate (MyControlType ctrlType, string ctrlName)

{

_ctrlType = ctrlType;

_ctrlName = ctrlName;

}

public void InstantiateIn(Control container)

{

switch (_ctrlType)

{

case MyControlType.Button:

_ctrl = new Button {ID = _ctrlName};

break;

case MyControlType.ImageButton:

_ctrl = new ImageButton {ID = _ctrlName};

break;

case MyControlType.LiteralControl:

_ctrl = new LiteralControl {ID = _ctrlName};

break;

}

_ctrl.EnableViewState = true;

container.Controls.Add(_ctrl);

}

I copied the above code from my VS to show only what I am trying to achieve. There might be typos or class name mistype because it is not clean copy/paste. Please ignore if any.

Anyway, my concern is that even if I define the width manually, it doesn't reflect in grid. I've tried setting width as Unit.Pixel and directly with value but both doesn't work.

Thanks.

Grid

answered on 20 Jul 2012

4 answers

596 views

[Solved] RadComboBoxItem hide() on client-side not persisting

Hi There,

I'm busy implementing filtering of RadComboBox items from the client-side by calling the .hide() method of the combobox-item.
This results in the items I specify to be hidden from view for the user.

The problem I find is that once I click the Combo that was filtered and I click anywhere else on the html page, the items that I had set to be hidden become visible again.

Right now I think:

RadCombo is executing an event once the RadCombo is focused on (selected) and then looses focus. This event makes all the items visible again.
or I am not using the .hide() method correctly and require instructions for proper use,

Here is an extract of the relevant parts of the ASPX control and JS client-side method:

<telerik:RadComboBox ID="rcboProject" runat="server" AppendDataBoundItems="True"

DataTextField="Name" DataValueField="ClientNameProjectID" DataSourceID="objProject" MarkFirstMatch="true" AllowCustomText="true" Filter="Contains"

NoWrap="true">

<Items>

<telerik:RadComboBoxItem runat="server" Text="Non Project" Value="-1" />

</Items>

</telerik:RadComboBox>

// this function is called from client side event such as a button click or perhaps even by the

// OnClientSelectedIndexChanged event of another combo box(obviously it would need event params in that case).

function FilterProjects() {

// GetProjectCombo(index)

var projectCombo = GetProjectCombo();

// Get project combo items.

var projectItems = projectCombo.get_items();

projectCombo.trackChanges();

// loop through, hide * projects except the top 10

for (i = 0; i < projectItems._array.length; i++)

{

if (i < 10)

continue;

// Get Item, load its data.

var item = projectItems.getItem(i);

var itemValue = item.get_value();

if (true) // simplified for Telerik support.

{

item.hide(); // works temporarily until clicking on html body then it reverts back to original state.

//item.removeAt(i); // works and persists.

//item.disable(); // works and persists.

}

projectCombo.commitChanges();

}

function GetProjectCombo(index) {

return $find("<%= rcboProject.ClientID %>");

}

Additional Information:
Telerik Controls Version: 2010.1.415.40

Your help would be greatly appreciated.

Best,
Llewellyn

ComboBox

answered on 20 Jul 2012

3 answers

125 views

Telerik is taking more time to be installed

Hi!Is it normal that the installation of telerik take more time than a normal installation.I have install from 21h00 pm ,now it is 6h00 am but still it is on 50%.

Installer and VS Extensions

answered on 20 Jul 2012

3 answers

71 views

Image float feature request

Could you guys do me a favour and please append a class like "floated-left" or "floated-right" to an image in addition to the style="float:left" when we use the editor to insert an image.

The problem is it's impossible to style the image. Like if it's floated left I wouldnt want any left margin\padding, and floated right I wouldnt want any right margins or padding...

I'm having to hack it in with jQuery, and I'd much rather not have that processing cost on every page load if it could be handled with css

$("img[style]", "#content-wrapper").each(function () {

if ($(this).css("float") === "left" || $(this).css("float") === "right") {

$(this).addClass("floated-" + $(this).css("float"));

}

});

Thx, Steve

Editor

answered on 20 Jul 2012

1 answer

166 views

RadGrid in FormView

Although not a big fan of FormViews, I'm stuck with it for this application.

I have a Grid in a FormView, and I'm using a Object Data Source to bind database data. Right now...all the data looks fine, or at least how it is being returned from the database. One of the columns however is returning a '|' delimited group of names. What I would do without the FormView is respond to the PreRender event, and do a replace of the '|' with a line control or <br />. I know how to do the replace, but WHERE do I do it? How can I get to the PreRender event?

I have found LOTS of examples out on the net on how to access the properties of the controls on the FormView, but nothing yet on how to respond to the events. Anyone know how to do this? Or another way? Or a place I can begin to glean some information? Or a hint?

Thanks all!

Grid

answered on 20 Jul 2012

2 answers

129 views

setting node's target lin k in C#

at the moment, I am having following scenario:

<telerik:RadTreeView ID="RadTreeView1" runat="server">

<NodeTemplate>

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/Scanner5 32x32.png"

PostBackUrl="http://www.hotmail.com" />

<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="http://www.bing.com">[ View ] </asp:HyperLink>

<%# DataBinder.Eval(Container, "Text") %>

</NodeTemplate>

</telerik:RadTreeView>

and the code behind looks something like below :

RadTreeNode category1 = new RadTreeNode("Group1", "Group1");

RadTreeNode Category1Nodes;

RadTreeNodeCollection radCollection = new RadTreeNodeCollection(category1);

for (int i = 10 - 1; i >= 0; i--)

{

Category1Nodes = new RadTreeNode(i.ToString(), i.ToString());

category1.Nodes.Add(Category1Nodes);

}

RadTreeView1.Nodes.Add(category1);

RadTreeNode category2 = new RadTreeNode("Group2", "Group2");

RadTreeNode Category2Nodes;

radCollection = new RadTreeNodeCollection(category2);

for (int i = 5 - 1; i >= 0; i--)

{

Category2Nodes = new RadTreeNode(i.ToString(), i.ToString());

category2.Nodes.Add(Category2Nodes);

}

RadTreeView1.Nodes.Add(category2);

Now,

I want to set the link of the imageButon and hyperLink programatically. Right now the link target is same for all the nodes, including the parent nodes, but I want to set it dynamically.

Thanks,
-Aarsh

TreeView

answered on 20 Jul 2012

8 answers

193 views

DropDownList loses keyboard shortcuts

Hello,
From reading this forum, it seems that by using the FormDecorator, I may lose some form functionality as a result. My issue is that when I decorate an asp:DropDownList, I can no longer use keyboard shortcuts when the dropdown has the focus. In particular, we need to be able to type the first character of the dropdown and have it select the first item it finds, just as a normal html select element does. Also, I can't appear to be able to use the arrow keys to change the list item, or use Alt+DownArrow to open the list. If there is any way you can add this functionality out-of-the-box with the FormDecorator, I would like to suggest it. If it is just something I may be doing wrong, please let me know. Thanks,

Michael

FormDecorator

answered on 20 Jul 2012