Questions on UI for ASP.NET AJAX Forum

2 answers

107 views

Hi,

I have a simple toolbar which has many buttons. Add, Save, Delete etc amd all buttons have separate images. Currently size of these images are 16X16 pixels
Now we have to shrink the height of the toolbar by 3 pixels. I'm able to adjust the height of the toolbar to the required level. But there seems some problems:-

1. Vertical alignment of the buttons do not look good. Instead of aligned middle they look bottom aligned.
2. On button hover, we can see the hover image cliped from the bottom (Please compare Current view.jpg and Changed view.jpg for understanding)

I hacve also rediced the height of the images to 13X13 pxels. But things are not working.

Code:-
Master page:-

<telerik:RadPane ID="rPanContentPlaceHplder" runat="server" Height="100%" Width="100%"

Scrolling="None">

<telerik:RadSplitter ID="rSplHeaderToolBar" runat="server" Height="100%" Width="100%"

Orientation="Horizontal">

<telerik:RadPane ID="rPanHeader" runat="server" Height="25px" Width="100%" Scrolling="None">

<uc:HeaderToolBar ID="ucMEHeaderToolBar" runat="server" />

</telerik:RadPane>

<telerik:RadPane ID="ContentPane" runat="server" Scrolling="Both" Style="overflow: scroll;

vertical-align: top;"

Width="100%">

<asp:ContentPlaceHolder ID="content" runat="server">

</asp:ContentPlaceHolder>

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

Tool bar code:-

<

telerik:RadToolBar ID="barTopCommandBar" runat="server" Height="100%" Width="100%"

OnPreRender="barTopCommandBar_PreRender" OnButtonClick="barTopCommandBar_ButtonClick"

OnClientButtonClicking="clientbuttonclick" CssClass="toolbarbuttons">

<Items>

<telerik:RadToolBarButton runat="server" CommandName="ADD" ImageUrl="~/Images/TLB_ADDNEW_16.gif"

Text="<%$ Resources:PDICulture, htbControlAdd %>" ToolTip="<%$ Resources:PDICulture, htbControlToolTipAdd %>">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" CommandName="SAVE_REVALIDATE_SEPRATOR" IsSeparator="true"

Visible="false" />

<telerik:RadToolBarButton runat="server" CommandName="Save_revalidate" ImageUrl="~/Images/TLB_SAVE_16.gif"

Text="<%$ Resources:PDICulture, htbControlSaveRevalidate %>" ToolTip="<%$ Resources:PDICulture, htbControlToolTipSaveRevalidate %>">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" CommandName="SAVE_SEPRATOR" IsSeparator="true"

Visible="false" />

<telerik:RadToolBarButton runat="server" CommandName="SAVE" ImageUrl="~/Images/TLB_SAVE_16.gif"

Text="<%$ Resources:PDICulture, htbControlSave %>" ToolTip="<%$ Resources:PDICulture, htbControlToolTipSave %>">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" CommandName="DELETE_SEPRATOR" IsSeparator="true"

Visible="false" />

<telerik:RadToolBarButton runat="server" CommandName="DELETE" ImageUrl="~/Images/TLB_DELETE_16.gif"

Text="<%$ Resources:PDICulture, htbControlDelete %>" ToolTip="<%$ Resources:PDICulture, htbControlToolTipDelete %>">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" CommandName="UNDO_SEPRATOR" IsSeparator="true"

Visible="false" />

<telerik:RadToolBarButton runat="server" CommandName="UNDO" ImageUrl="~/Images/TLB_UNDO_16.gif"

Text="<%$ Resources:PDICulture, htbControlUndo %>" ToolTip="<%$ Resources:PDICulture, htbControlToolTipUndo %>">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" CommandName="SAVE_AND_REPLACE_SEPRATOR"

IsSeparator="true" Visible="false" />

<telerik:RadToolBarButton runat="server" CommandName="Save_Replace" ImageUrl="~/Images/TLB_EDIT_16.gif"

PostBack="false" OnClick="javascript:OpenSearchAndReplace();" Text="<%$ Resources:PDICulture, htbControlSaveReplace %>"

ToolTip="<%$ Resources:PDICulture, htbControlToolTipSaveReplace %>">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" CommandName="ADD_FROM_TEMPLATE_SEPRATOR"

Visible="false" IsSeparator="true" />

<telerik:RadToolBarButton runat="server" CommandName="ADD_FROM_TEMPLATE" Visible="false"

ImageUrl="~/Images/addtemplate.png" Text="<%$ Resources:PDICulture, htbControlAddFromTemplate %>"

ToolTip="<%$ Resources:PDICulture, htbControlAddFromTemplate %>">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" CommandName="SAVE_AS_TEMPLATE_SEPRATOR"

Visible="false" IsSeparator="true" />

<telerik:RadToolBarButton runat="server" CommandName="SAVE_AS_TEMPLATE" Visible="false"

ImageUrl="~/Images/savetemplate.png" Text="<%$ Resources:PDICulture, htbControlSaveAsTemplate %>"

ToolTip="Save as Template">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" CommandName="DELETE_TEMPLATE_SEPRATOR" Visible="false"

IsSeparator="true" />

<telerik:RadToolBarButton runat="server" CommandName="DELETE_TEMPLATE" Visible="false"

ImageUrl="~/Images/deletetemplate.png" Text="<%$ Resources:PDICulture, htbControlDeleteTemplate %>"

ToolTip="Delete Template">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" CommandName="REFRESH_SEPRATOR" IsSeparator="true"

Visible="false" />

<telerik:RadToolBarButton runat="server" CommandName="REFRESH" ImageUrl="~/Images/TLB_REFRESH_16.gif"

Text="<%$ Resources:PDICulture, htbControlRefresh %>" ToolTip="<%$ Resources:PDICulture, htbControlToolTipRefresh %>">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" CommandName="NEW_MESSAGE_SEPRATOR" IsSeparator="true"

Visible="false" />

<telerik:RadToolBarButton runat="server" CommandName="NEW_MESSAGE" Text="<%$ Resources:PDICulture, htbControlNewMessage %>"

ToolTip="<%$ Resources:PDICulture, htbControlToolTipNewMessage %>" ImageUrl="~/Images/PicSendNewMsg_16x16.png">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" CommandName="ACK_MESSAGE_SEPRATOR" IsSeparator="true"

Visible="false" />

<telerik:RadToolBarButton runat="server" CommandName="ACK_MESSAGE" Text="<%$ Resources:PDICulture, htbControlAcknowledgement %>"

ToolTip="<%$ Resources:PDICulture, htbControlToolTipAcknowledgement %>" Visible="false">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" CommandName="DELETE_MESSAGE_SEPRATOR" IsSeparator="true"

Visible="false" />

<telerik:RadToolBarButton runat="server" CommandName="DELETE_MESSAGE" Text="<%$ Resources:PDICulture, htbControlDeleteMessage %>"

ToolTip="<%$ Resources:PDICulture, htbControlToolTipDeleteMsg %>" Visible="false">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" CommandName="REPLY_MESSAGE_SEPRATOR" IsSeparator="true"

Visible="false" />

<telerik:RadToolBarButton runat="server" CommandName="REPLY_MESSAGE" Text="<%$ Resources:PDICulture, htbControlReplyMessage %>"

ToolTip="<%$ Resources:PDICulture, htbControlToolTipReplyMessage %>" Visible="false">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" CommandName="REFRESH_MESSAGE_SEPRATOR" IsSeparator="true"

Visible="false" />

<telerik:RadToolBarButton runat="server" CommandName="REFRESH_MESSAGE" Text="<%$ Resources:PDICulture, htbControlRefreshMessage %>"

ToolTip="<%$ Resources:PDICulture, htbControlToolTipRefreshMessage %>" Visible="false" ImageUrl="~/Images/cmdCheckForMsg16x16.png">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" CommandName="PRINT_SEPRATOR" IsSeparator="true"

Visible="false" />

<telerik:RadToolBarButton runat="server" CommandName="PRINT" ImageUrl="~/Images/TLB_PRINT_16.png"

Text="<%$ Resources:PDICulture, htbControlPrint %>" ToolTip="<%$ Resources:PDICulture, htbControlToolTipPrint %>">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" CommandName="UNPROCESSED_MESSAGE_SEPRATOR"

IsSeparator="true" Visible="false" />

<telerik:RadToolBarButton runat="server" CommandName="UNPROCESSED_MESSAGE" Text="<%$ Resources:PDICulture, htbControlUnprocessedMessage %>"

ToolTip="<%$ Resources:PDICulture, htbControlToolTipUnprocessedMessage %>" ImageUrl="~/Images/TLB_PRINT_16.png">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" CommandName="PROFILE_SEPRATOR" IsSeparator="true"

Visible="false" />

<telerik:RadToolBarButton runat="server" CommandName="PROFILE" Text="<%$ Resources:PDICulture, htbControlMProfile %>"

ToolTip="<%$ Resources:PDICulture, htbControlToolTipMProfile %>">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" CommandName="HELP_SEPRATOR" IsSeparator="true"

Visible="false" />

<telerik:RadToolBarButton runat="server" CommandName="HELP" ImageUrl="~/Images/TLB_HELP2_16.gif"

Text="<%$ Resources:PDICulture, htbControlHelp %>" ToolTip="<%$ Resources:PDICulture, htbControlToolTipHelp %>"

PostBack="false" onClick="javascript:openHelp();">

</telerik:RadToolBarButton>

</Items>

</

telerik:RadToolBar>

Thanks
Rajesh

ToolBar

answered on 12 Jul 2011

1 answer

37 views

Monthview don't line up with the main scheduler view

Hi,

I'm trying to get the monthview setup with resources down the left hand side.
However, the resources don't line up with the main scheduler view.
This is happening when we have multiple Appoinments in a month.
This is causing problem , becuase appointment is not showing under correct resource.

Please help to resolve this issue.

Scheduler

answered on 12 Jul 2011

1 answer

119 views

Select other grid rows based on column value of selected row inside OnRowSelect() client side function

Hello,

I have a grid with multiple row select option set to true. I need to implement a function which is called on grid row select at client side and that function selects other rows in grid based on a column value. For example , Assume grid with 10 rows and 5 columsn, if I select row 2 and my matching column value is also present in row 4 , row 7 and row 9. Then row 4, 7, and 9 should be automatically selected.

Let me know how to implement this using client side function OnRowSelect ()

Thanks

Grid

answered on 12 Jul 2011

2 answers

90 views

Error when add record in TreeList

When i click add button in Header of TreeList i will show form template to add record, after that i click add button in item template it's also show form template to add record. I put blank in textbox afterthat I click save asp validate catch blank text in two form template.Anybody help me how to prevent show form template twice. I have attachment for that scenario. Thanks

TreeList

answered on 12 Jul 2011

8 answers

227 views

Scrolling on drag

Hi

I have a scollable RadGrid and would like to drag and drop items within the grid (i.e. to re-order them). This is fine within the visible grid area itself but the grid does not automatically scroll if you drag to its bounds (probably not surprising in a web control!).

The mouse wheel does scroll the grid allowing me to drop to an initially non-visible row. I would like the up/down/page up/page down keys to do this but they are disabled during the drag operation. However if I drag with the right mouse button the keys work as expected (but the context menu is displayed on release).

Is there anything I can do to allow the up/down/page up/page down keys to scroll the grid while the drag is in progress?

Thanks
Russell Mason

Grid

answered on 12 Jul 2011

1 answer

149 views

RadGrid : EditMode = InPlace : how to get values clients side

I have a radGrid that has about 5 columns. The RadGrid is setup to me in inplace edit mode when doing an insert. I have subscribed to the OnCommand client event to capture the insert client side before it is sent to the server. The event IS firing but I cannot figure out for the life of me of how to get the inplace data that the user is trying to insert.

Any help would be GREATLY appreciated.

-Jason

Grid

answered on 12 Jul 2011

1 answer

82 views

Re-arrange Update/Cancel Buttons In Inline Edit Mode

Hi,

Was just wondering if there's a simple way of re-arranging the Update/Cancel buttons when in In-line Edit Mode?

I'm using two images for my update (check mark) and cancel (red x). Is there a way to place my Update Button on the far left side of the Grid, and have my Cancel Button on the far right side of the grid when in edit mode?

Best Regards,

Landon

Grid

answered on 12 Jul 2011

1 answer

45 views

TreeView - Basic Setup - will not work

For the TreeView, i am trying to set up through a datasoure.
I have the following code within my .aspx file but I do not see the RadTreeView.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

protected void SqlDataSource1_Selecting(object sender, SqlDataSourceSelectingEventArgs e)

{

}

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

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

</telerik:RadScriptManager>

<div>

<telerik:RadTreeView ID="RadTreeView1" Runat="server" DataFieldID="id_num"

DataFieldParentID="manager" DataSourceID="SqlDataSource1" DataTextField="fname"

DataValueField="fname">

</telerik:RadTreeView>

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

ConnectionString="<%$ ConnectionStrings:nayan_alphametrixConnectionString2 %>"

SelectCommand="SELECT [id_num], [fname], [manager] FROM [TreeView]"

onselecting="SqlDataSource1_Selecting">

</asp:SqlDataSource>

<telerik:RadButton ID="RadButton1" runat="server">

</telerik:RadButton>

</div>

</form>

</body>

</html>

I am not sure what I am doing wrong. I am basically using the wizard for the datasource. Thank you.

TreeView

answered on 12 Jul 2011

4 answers

151 views

radgrid filtering

Problem: after put rgDataRetrieval.MasterTableView.FilterExpression=... on grid PreRender makes grid all the column filter function not work. Please help!

I have a radgrid, has allow filter for all the columns turn to true.
I also need to have a date manually filtered by a search button click to filter the datagrid manually by start and end date.

I put the following code on PreRender, the serach button manually filter works fine, but after put rgDataRetrieval.MasterTableView.FilterExpression=... in PreRender, the grid column auto filter for all the columns does not work right- not work at all

protected void rgDataRetrieval_PreRender(object sender, EventArgs e)