Questions on UI for ASP.NET AJAX Forum

9 answers

298 views

I'm looking for just a concept idea on this. I have a grid view and I would like one field to show data. Then, when you click on it, it changes to a text box that is editable and a user can edit that field and save it. Any thoughts on how to do this? I also thought about showing a tool tip on click with a text box and save button. Which do you think is better/easier?

Grid

answered on 22 Jan 2014

4 answers

117 views

Programatically adding RibbonBarGalleryItem to Ribbon at runtime

Hi,

I'm trying to add RibbonBarGalleryItems to a RibbonBarGalleryCategory at runtime like this (I'm pulling them out of a datatable);

RibbonBarGalleryCategory someCategory = (RibbonBarGalleryCategory)FindControlRecursive(this,"radGalleryCategory1");

foreach (DataRow R in someDatatable.Rows)

{

RibbonBarGalleryItem myitem = new RibbonBarGalleryItem();

myitem.ID = "someIDgeneratedbyMyApp"

myitem.Text = R["Col1"].ToString();

myitem.ToolTip = R["Co2"].ToString();

myitem.ImageUrl = "~/GlobalResources/somepic.png";

someCateogry.Items.Add(myitem);

}

This works fine - the items appear in the gallery OK on page_load and display in the browser.

However, when I click any of the gallery items to select them, I get an index out of range exception that's not handled.

Gallery items added at design time work fine. It's the ones that I'm adding at runtime that fail on selection.

Is there some method I should hook into when the RadRibbonGallery is initialised so that I pass in my gallery items then, so the ribbonbar is "aware" of them?

Thanks in advance,
Jonathan

RibbonBar

answered on 22 Jan 2014

1 answer

92 views

hide the row inside a detail table

Hi,
How to hide the row inside a detail table based on some condition?

Grid

answered on 22 Jan 2014

1 answer

122 views

RadNumericTextBox and Edit Form Template issues

Hi

I am trying to use a numeric textbox inside the FormTemplate of a grid and have run into issues.

When I initially put my selected item into edit mode I want the numeric text box to be hidden.

I accomplish this by setting the style="display: none;"

Then in the javascript handler of a combobox, which is also in the edit form I change the style based on user interaction.

I have to manipulate the textbox and its up/down arrows, so I am changing 3 controls in each case.

This works fine, until I mouse over the numeric text box. As soon as I do that the text element disappears and only the up/down arrows remain.

Inspecting the rendered html clearly shows the style="display: none" attribute has been re-rendered into the html.

If the textbox is initially visible hiding and showing it in javascript still works correctly, AND mouse over DOESN'T hide it.

I have seen other threads that indicate using numeric text boxes in edit forms is a bad idea.

If you have a solution I would love to hear it.

TIA

Input

answered on 22 Jan 2014

2 answers

165 views

[Solved] Resizing with window

I am a new user of Telerik tools and am trying to figure out how to build a simple web page with RadPanes using the RadSplitter tool. I have followed the online docs and am having trouble with the RadSplitter resizing with the window. When the browser window first comes up the RadSplitter and associated RadPanes are correctly sized to the window, but if you try to resize the window larger or smaller the RadSplitter does not resize with the window. Perhaps I am missing something, so here is the code that I have below.

Also wondering if it is possible to use a separate CSS file to handle the style of the RadPanes. It seems that when I set some of the style properties of the RadPanes, they do not show up.

And is it possible to use the HTML5 Doctype instead of the default XHTML 1.1 that is created with the Telerik Web App?

Thanks,
Charlie

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">

<html style="height:100%">

<head runat="server">

<title>Telerik Real Estate Demo</title>

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

</head>

<body style="margin:0px;height:100%;overflow:hidden;">

<form id="form1" runat="server" style="height:100%;margin:0px;">

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

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

//Put your JavaScript code here.

</script>

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

</telerik:RadAjaxManager>

<div id="header" style="border: solid 2px black;">

<h3>Telerik Real Estate Demo</h3>

</div>

<div id="mainPage" style="border: solid 2px black; width: 100%; height: 100%;">

<telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" Height="100%" Width="100%">

<telerik:RadPane ID="topHalfRad" runat="server" BorderStyle="Solid" BorderWidth="2" BorderColor="#0033CC"

MinHeight="200" MinWidth="200" Scrolling="None" Width="800" Height="300">

<telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Vertical">

<telerik:RadPane ID="topLeftRad" runat="server" BorderColor="Lime" BorderStyle="Solid" BorderWidth="2"

MinHeight="200" MinWidth="200" Width="390">

Left Pane

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Both" />

<telerik:RadPane ID="topRightRad" runat="server" BorderColor="#CC00FF" BorderStyle="Solid" BorderWidth="2"

MinHeight="200" MinWidth="200" Width="390">

Right Pane

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Both" />

<telerik:RadPane ID="botHalfRad" runat="server" BorderColor="#660033" BorderStyle="Solid" BorderWidth="2"

MinHeight="200" MinWidth="400" Width="800" Height="300">

Bottom Pane

</telerik:RadPane>

</telerik:RadSplitter>

</div>

</form>

</body>

</html>

Splitter

answered on 22 Jan 2014

0 answers

122 views

How to set language to RADEditor through Jquery

Hi

We are planning to develop WebContentManagement to avoid resource files in application. We are implementing generic way to add data in Admin UI instead of manual work.

We have form like ResourceKey,ResourceValue,ResourceDescription controls and Languages which are supporting for application displaying in Data List . PFA screen shot how it looks data list.
These are the supporting languages.
English
Japanese
Korean
Spanish
German
French
Chinese
Italian
Norwegian
What is my doubt is
Once I click on Add link particular language(Japaneese) in datalist it will open popup through jquery and it will show the RADEditor based on Japaneese language and typing characters also should be in Selected(Japaneese) language. Once we close popup and the RADEditor value should show in DataList particular selected row.
Is it possible to achieve this with RADEditor? If not how we can implement other way?
My Questions are :
How to call popup using jquery contains RADEditor?
How set particular language to RADEditor through Jquery and How to type chars in RADEditor with selected language.
How to get back RADEditor content after closing popup and put into datalist
Please can you give some demo with this requirement.

Thanks,
Aswathy.

Editor

asked on 22 Jan 2014

5 answers

99 views

[Solved] Scheduler - External Edit in RadDock

Hello,

I m using the radscheduler with external edit in RadDock. Everything works fine exept when i set a reminder. The reminder Pop up opens normally but when you press Open Item i get two Pop Ups (the default and the RadDock). The same problem you can simulate in your online examples. Is there any way to open only the raddock form?

thank you!

Scheduler

answered on 22 Jan 2014

1 answer

127 views

issue with hierarchial grid

Hi. I have a hierarchial grid. On performing some operations the expanded rows get closed. Is there a way to make the expanded rows expand even after a rebind?

Grid

answered on 22 Jan 2014

3 answers

151 views

Ajaxified Dynamic RadGrid GirdEditCommandColumn never fires Update or Cancel command

I have grids populating a RadPanelBar that are created entirely from the codebehind using advanced data binding. I have a GridEditCommandColumn in this grid. When I click "Edit", ItemCommand is fired followed by EditCommand. At this time, the column displays "Update Cancel". Clicking either of these causes a postback, but ItemCommand does not fire. Nor does UpdateCommand or CancelCommand. As you can see in my .cs, I've attached every command handler I could find trying to find something triggered when I click Update or Cancel with no luck. Any help would be great.

ASPX

<telerik:RadPanelBar runat="server" ID="ClientProductPanels" Width="100%" AllowCollapseAllItems="false" ExpandMode="SingleExpandedItem" />

CS

private RadGrid PopulatePanelGrid(string referrer)

{

RadGrid productGrid = new RadGrid();

productGrid.AllowPaging = false;

productGrid.AllowSorting = false;

productGrid.AllowAutomaticInserts = true;

productGrid.AllowAutomaticDeletes = true;

productGrid.AllowAutomaticUpdates = true;

productGrid.AutoGenerateEditColumn = true;

productGrid.AutoGenerateDeleteColumn = true;

productGrid.MasterTableView.AutoGenerateColumns = false;

productGrid.MasterTableView.EditMode = GridEditMode.InPlace;

productGrid.ID = referrer;

productGrid.DeleteCommand += new GridCommandEventHandler(productGrid_DeleteCommand);

productGrid.CancelCommand += new GridCommandEventHandler(productGrid_CancelCommand);

productGrid.BatchEditCommand += new GridBatchEditEventHandler(productGrid_BatchEditCommand);

productGrid.ItemDeleted += new GridDeletedEventHandler(productGrid_ItemDeleted);

productGrid.ItemCommand += new GridCommandEventHandler(productGrid_ItemCommand);

productGrid.ItemEvent += new GridItemEventHandler(productGrid_ItemEvent);

productGrid.ItemInserted += new GridInsertedEventHandler(productGrid_ItemInserted);

productGrid.ItemUpdated += new GridUpdatedEventHandler(productGrid_ItemUpdated);

productGrid.InsertCommand += new GridCommandEventHandler(productGrid_InsertCommand);

productGrid.EditCommand += new GridCommandEventHandler(productGrid_EditCommand);

productGrid.UpdateCommand += new GridCommandEventHandler(productGrid_UpdateCommand);

productGrid.ItemDataBound += new GridItemEventHandler(productGrid_ItemDataBound);

productGrid.ItemCreated += new GridItemEventHandler(productGrid_ItemCreated);

productGrid.NeedDataSource += new GridNeedDataSourceEventHandler(productGrid_NeedDataSource);

GridCheckBoxColumn checkColumn = new GridCheckBoxColumn();

checkColumn.UniqueName = "Checked";

checkColumn.DataField = "Selected";

checkColumn.ReadOnly = true;

checkColumn.HeaderStyle.Width = Unit.Pixel(20);

checkColumn.ItemStyle.Width = Unit.Pixel(20);

checkColumn.ItemStyle.HorizontalAlign = HorizontalAlign.Center;

productGrid.MasterTableView.Columns.Add(checkColumn);

GridBoundColumn boundColumn = new GridBoundColumn();

boundColumn.DataField = "ProductName";

boundColumn.HeaderText = "Product Name";

boundColumn.ReadOnly = true;

productGrid.MasterTableView.Columns.Add(boundColumn);

GridNumericColumn numericColumn = new GridNumericColumn();

numericColumn.DataField = "Fee";

numericColumn.HeaderText = "Fee";

numericColumn.UniqueName = "Fee";

numericColumn.DataFormatString = "{0:C}";

numericColumn.DecimalDigits = 2;

numericColumn.MaxLength = 7;

numericColumn.NumericType = NumericType.Currency;

numericColumn.HeaderStyle.Width = Unit.Pixel(110);

numericColumn.HeaderStyle.HorizontalAlign = HorizontalAlign.Right;

numericColumn.ItemStyle.Width = Unit.Pixel(110);

numericColumn.ItemStyle.HorizontalAlign = HorizontalAlign.Right;

productGrid.MasterTableView.Columns.Add(numericColumn);

boundColumn = new GridBoundColumn();

boundColumn.DataField = "AverageFee";

boundColumn.HeaderText = "Average Fee";

boundColumn.DataFormatString = "{0:C}";

boundColumn.ReadOnly = true;

boundColumn.HeaderStyle.Width = Unit.Pixel(110);

boundColumn.HeaderStyle.HorizontalAlign = HorizontalAlign.Right;

boundColumn.ItemStyle.Width = Unit.Pixel(110);

boundColumn.ItemStyle.HorizontalAlign = HorizontalAlign.Right;

productGrid.MasterTableView.Columns.Add(boundColumn);

boundColumn = new GridBoundColumn();

boundColumn.DataField = "ProductID";

boundColumn.ReadOnly = true;

boundColumn.Display = false;

productGrid.MasterTableView.Columns.Add(boundColumn);

GridEditCommandColumn editColumn = new GridEditCommandColumn();

editColumn.ItemStyle.Width = Unit.Pixel(75);

editColumn.UniqueName = "Edit";

editColumn.EditText = "Add/Edit Fee";

productGrid.MasterTableView.Columns.Add(editColumn);

return productGrid;

}

Grid

answered on 22 Jan 2014

1 answer

91 views

Coloring the button in Radgrid using javascript

Hi

My issue is, while I have three buttons in one of the radgrid column, I need to show different color for different button as client clicks.
Now the challenge is, I have to do that from client side as I have to avoid the server trip which is around 20*3 = 60 times for 20 row grid.
Now I am getting the buttons and can set text into that but when I use the style.background property thats not working. any help will be highly appreciated.

Thanks,
SAN

Grid

answered on 22 Jan 2014