Questions on UI for ASP.NET AJAX Forum

8 answers

336 views

Greetings All,

After racking my brain for hours, and spending several more hours searching for an elegant solution, I have yet to find an answer to my problem and am hoping fellow RadControl users or Telerik might point me in the right direction.

Problem: I would like to place two equally sized vertically oriented RadZones in a DIV such that the radzones + 5px margins fill 100% of the parent container (see conceptual.jpg). However, I have been unable to find the right combination of CSS and RadZone settings to accomplish this task much less find a solution that is browser agnostic.

Code:

    
            <!DOCTYPE html PUBLIC 
        
            \"-//W3C//DTD XHTML 1.0 Transitional//EN\" 
        
            \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
        
            <head> 
        
            <title>Proof of Concept App</title> 
        
            <asp:ContentPlaceHolder ID="head" runat="server" /> 
        
            <script type='text/javascript' src='js/jquery-1.3.1.min.js'></script> 
        
            <script type='text/javascript' src='js/easing.js'></script> 
        
            <script type="text/javascript"> 
        
                $(document).ready(function () { 
        
                    $("div#handle").click(function (e) { 
        
                        e.preventDefault(); 
        
                        $("div#sidebar_content").toggle("fast"); 
        
                    }); 
        
                }); 
        
            </script> 
        
            <link href="css/reset.css" rel="stylesheet" type="text/css" /> 
        
            <link href="css/global.css" rel="stylesheet" type="text/css" /> 
        
            <link href="css/master.css" rel="stylesheet" type="text/css" /> 
        
            </head> 
        
            <body> 
        
            <form id="form1" runat="server"> 
        
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> 
        
            </telerik:RadAjaxManager> 
        
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
            </telerik:RadScriptManager> 
        
            <div id="pagewrap"> 
        
            <div id="header"> 
        
            <div class="logo"><img src="images/logo.gif" alt="itrack_logo" /></div> 
        
            <div class="info"><%=GetGreeting() %> <b>Username</b>.<br />You have XX action items in your queue.</div> 
        
            <div id="topnav"> 
        
            </div> 
        
            <div id="breadcrumbs"> 
        
            <ul> 
        
            <li><a href="#" title="Dashboard">Dashboard</a></li> 
        
            <li><a href="#" title="Section">Section</a></li> 
        
            <li><a href="#" title="Type">Type</a></li> 
        
            <li>Instance</li> 
        
            </ul> 
        
            </div> 
        
            </div> 
        
            <div id="contentwrap"> 
        
              <div id="sidebar_content"> 
        
            <rad:RadPanelbar runat="server" ID="RadPanelbar1" Height="100%" Width = "100%"  
        
                                    Skin="WebBlue" ExpandMode="FullExpandedItem" CollapseAnimation-Type="none" ExpandAnimation-Type="None"> 
        
                                    <Items> 
        
                                        <rad:RadPanelItem Text="Menu Item 1" Expanded="true"> 
        
                                            <Items> 
        
                                                <rad:RadPanelItem> 
        
                                                    <ItemTemplate> 
        
                                                        Lorem<br /> 
        
                                                        Ipsum<br /> 
        
                                                        Dolar 
        
                                                    </ItemTemplate> 
        
                                                </rad:RadPanelItem> 
        
                                            </Items> 
        
                                        </rad:RadPanelItem> 
        
                                        <rad:RadPanelItem Text="Menu Item 2 COAs"> 
        
                                            <Items> 
        
                                                <rad:RadPanelItem> 
        
                                                    <ItemTemplate> 
        
                                                        Lorem<br /> 
        
                                                        Ipsum<br /> 
        
                                                        Dolar 
        
                                                    </ItemTemplate> 
        
                                                </rad:RadPanelItem> 
        
                                            </Items>                            </rad:RadPanelItem> 
        
                                        <rad:RadPanelItem Text="Menu Item 3"> 
        
                                            <Items> 
        
                                                <rad:RadPanelItem> 
        
                                                    <ItemTemplate> 
        
                                                        Lorem<br /> 
        
                                                        Ipsum<br /> 
        
                                                        Dolar 
        
                                                    </ItemTemplate> 
        
                                                </rad:RadPanelItem> 
        
                                            </Items> 
        
                                        </rad:RadPanelItem>                                                     
        
                                    </Items> 
        
                                </rad:RadPanelbar> 
        
              </div> 
        
              <div id="handle" ><div class="top"></div><div class="grippy"></div><div class="bottom"></div></div> 
        
              <div id="main"> 
        
                    <rad:RadDockLayout ID="RadDockLayout1" runat="server" Skin="Web20" > 
        
                <%--Would like to create two equally sized zones having | 5 px | Zone Left ((Div width - 15)/2) px | 5px | Zone Right ((Div width - 15)/2) px  | 5 px |--%> 
        
                    <rad:RadDockZone ID="zoneLeft" runat="server" Orientation="Vertical" > 
        
                        <rad:RadDock ID="RadDock1" Runat="server"> 
        
                            <ContentTemplate> 
        
                            Lorem Ipsum Dolar 
        
                            </ContentTemplate> 
        
                        </rad:RadDock> 
        
                    </rad:RadDockZone> 
        
                    <rad:RadDockZone ID="zoneRight" runat="server" Orientation="Vertical"> 
        
                    </rad:RadDockZone> 
        
                </rad:RadDockLayout> 
        
              </div> 
        
            </div> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

CSS:

    
            div#pagewrap{position:absolute;width:100%;height:100%;margin:0 auto 0 auto}div#contentwrap{position:absolute;top:87px;bottombottom:5px;overflow:scroll;padding-right:5px}div#header{position:relative;top:0;width:100%;height:85px;overflow:hidden;margin:0;background:url(../images/header_bkgd.gif) repeat-x}#header .logo{float:left}#header .info{float:rightright;padding:5px;font-family:arial;color:#fff;font-size:12px;text-align:rightright}#topnav{vertical-align:middle;font-weight:bold;color:#fff;height:43px}#breadcrumbs{position:absolute;top:43px;left:255px;font:13px Arial,Helvetica,sans-serif;background-image:url(../images/bc_bg.gif);background-repeat:repeat-x;height:30px;line-height:30px;color:#ddd;overflow:hidden;margin:0;padding:0;width:100%}#breadcrumbs ul,li{list-style-type:none;padding:0;margin:0}#breadcrumbs li{float:left;display:inline-block;padding-left:10px;height:30px;line-height:30px}#breadcrumbs a{display:inline-block;background-image:url(../images/bc_separator.gif);background-repeat:no-repeat;background-position:rightright;padding-right:15px;text-decoration:none;color:#fff;outline:none;height:30px;line-height:30px}#breadcrumbs .home{border:none;margin:8px 0}#breadcrumbs li a:link,#breadcrumbs li a:visited{text-decoration:none;color:#fff}#breadcrumbs li a:hover,#breadcrumbs li a:focus{color:red}div#sidebar_content{height:100%;border-right:solid 1px #DDD;background-color:#707173;width:300px;float:left}div#handle{height:100%;text-decoration:none;width:10px;float:left;margin-right:5px;background-color:#adadad}#handle .bottombottom{position:absolute;bottombottom:0;width:10px;height:10px;margin:0;padding:0;background:url(../images/sb_bottom.gif) no-repeat bottombottom left;background-color:#fff}#handle .top{position:absolute;top:0;width:10px;height:10px;margin:0;padding:0;background:url(../images/sb_top.gif) no-repeat top left;background-color:#fff}#handle .grippy{position:absolute;top:50%;align:center;background:url(../images/LibC.gif) -178px 0;width:5px;height:20px;margin-left:3px}div#handle.open{background-color:#aaa}div#handle.close{background-color:#ccc}div#main{position:relative;height:100%;width:100%;background-color:#ccc;overflow-y:auto}

Any help readers can provide would be gratefully appreciated.

Dock

answered on 04 Jan 2010

2 answers

121 views

Best Programming Practices for using TabStrip

I am developing an ASP.NET application that has about 10 different main pages. I'd like to use a TabStrip on the main page with 10 tabs, one for each of the main pages I have. My question is, what is the programming practice for doing this? Do I put all my code into RadViews? By doing that, that would give me one really really big .ASPX file and probably be cumbersome to manage. Is there an alternate way to doing this that I am missing?

TabStrip

answered on 03 Jan 2010

1 answer

131 views

getting value on client side (grid)

Hi
After several hours trying I've given up.
I am trying to get values client side when a row in grid is selected
I've used the following script but all I get is a box with "undefined" value
The column "CompanyName" exists on the database/grid, everything seems to be ok, so I don't understand what I am doing wrong ???
Rather frustrating...

Also note that I do have ClientDataKeyNames="ID" added to <MasterTableView ....
and ID is my Primary Key

Please help !!!

function RowSelected(sender, args) //Client side Rowselected event of radgrid

{

alert(args.getDataKeyValue("CompanyName"));

}

</script>

Grid

answered on 02 Jan 2010

3 answers

574 views

Need Datasource not firing !!

Dear All,

I can't get it to work ...
I reviewed all the forums post regards the NeedDataSource event handlers all the concepts ....

Here is my Issue:
I create a contentpage that exactly matches the tab loadondemad example :
http://demos.telerik.com/aspnet-ajax/tabstrip/examples/applicationscenarios/loadondemand/defaultcs.aspx

But the grids on the loaded user-controls doesn't do any sorting or paging although I implement the OnNeedDatasource event which never fires at all (which cause the sorting or paging miss-behavior).

This is my .ascx grid definition code snippet:

    
            <telerik:RadGrid   
        
                ID="SummaryCreditGrid"   
        
                runat="server"                            
        
                AllowSorting="true" 
        
                AllowPaging="true" 
        
                PageSize="5" 
        
                OnNeedDataSource="SummaryCreditGrid_NeedDataSource">  
        
                <MasterTableView Width="100%"/>  
        
            </telerik:RadGrid>

The user-control scenario starts when it loaded and then filled with data using the DisplayValues method that receive a business object (summaryCredit[]) and bind it to the radgrid which I change later to use a datatable when I thought it was the problem.
anyway here is the method:

    
            public void DisplayValues(SummaryCredit[] summaryCredit)  
        
            {  
        
                DataTable tdt = new DataTable();  
        
                tdt.Columns.Add("DATA_FROM", typeof(string));  
        
                tdt.Columns.Add("CATALOGUE_CODE", typeof(string));  
        
                tdt.Columns.Add("CREDITFACILITY", typeof(string));  
        
                foreach (var credit in summaryCredit)  
        
                {  
        
                    tdt.Rows.Add(credit.DataFrom, credit.CatalogueCode, credit.Creditfacility);  
        
                }  
        
                SummaryCreditGrid.DataSource = tdt;  
        
                SummaryCreditGrid.DataBind();  
        
                Session["SummaryCreditGrid"] = tdt;  
        
            }

and the NeedDataSource method:

    
            protected void SummaryCreditGrid_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)  
        
            {  
        
                DataTable dt = new DataTable();  
        
                dt = Session["SummaryCreditGrid"] as DataTable;  
        
                if (dt != null)  
        
                {  
        
                    SummaryCreditGrid.DataSource = null;  
        
                    SummaryCreditGrid.DataSource = dt;  
        
                }  
        
            }

I put a breakpoint in this method but it never fire !!

What could be my problem ?

Regards
Waleed

Grid

answered on 02 Jan 2010

4 answers

102 views

Show error javascript when insert specific tag

Hi Telerik Team,

When i insert "<property>......</property>" tag in radeditor, Status bar show me error javascript.
Present, I need above tag so i can't remove it. Can you show me the reasion ? and how the way for solve it?

I see this error on ie7 browser.

Thanks
HP

Editor

answered on 02 Jan 2010

2 answers

108 views

pasteHTML across browsers

I finally have pasteHTML working pretty well, but I need some help to smooth the behavior across browsers

with this code:
.pasteHtml('<a href="#">link</a><br/> \r\n');

IE8 & FF3.5 will paste the link, and put the cursor below the link. I want it to work this way.

Safari 4 & Chrome 4 will paste the link, but will select the pasted entire link.

I don't want it to work this way as the next pasteHTML will continuously replace the previous pasteHTML.

I need a way to make Safari and Chrome NOT select (or unselect after the fact) the pasted HTML, like IE & FF does.

Thanks

Editor

answered on 01 Jan 2010

2 answers

196 views

[Solved] Confirm Message without Postback

Hello! I hope can help me ..
I need to show a confirmation message before the
Deleting a row, I tried this:

    
            <telerik:RadGrid ID="rgSucursales" runat="server" AllowPaging="True" AllowSorting="True" 
        
                                    GridLines="None" onneeddatasource="rgSucursales_NeedDataSource"  
        
                                    VirtualItemCount="1" onitemcommand="rgSucursales_ItemCommand"  
        
                                    onitemdatabound="rgSucursales_ItemDataBound" > 
        
                                    <PagerStyle FirstPageToolTip="Primera Página" /> 
        
                                    <MasterTableView PageSize="5"> 
        
                                        <Columns>  
        
                                            <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Editar"  
        
                                                ImageUrl="img/editar.png" Text="Editar Cuenta" UniqueName="column"> 
        
                                            </telerik:GridButtonColumn> 
        
                                            <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Eliminar"  
        
                                                ImageUrl="img/eliminar.png" Text="Eliminar Cuenta" UniqueName="EliminarColumna"  > 
        
                                            </telerik:GridButtonColumn> 
        
                                        </Columns> 
        
                                    </MasterTableView> 
        
                                    <ClientSettings EnableAlternatingItems="False"> 
        
                                        <Selecting AllowRowSelect="False" /> 
        
                                        <ClientMessages PagerTooltipFormatString="Página &lt;strong&gt;{0}&lt;/strong&gt; de &lt;strong&gt;{1}&lt;/strong&gt;" /> 
        
                                    </ClientSettings> 
        
                                </telerik:RadGrid>

    
            protected void rgSucursales_ItemCommand(object source, GridCommandEventArgs e) 
        
                    { 
        
                        string cmd = e.CommandName.ToString(); 
        
                        if (cmd.Equals("Editar")) 
        
                        {                 
        
                            Session["BANEDIT"] = item["Codigo"].Text; 
        
                            rwSucursales.NavigateUrl = "~/OperCat.aspx"; 
        
                            rwSucursales.Visible = true; 
        
                        } 
        
                        else if (cmd.Equals("Eliminar")) 
        
                        { 
        
                            GridDataItem item = (GridDataItem)e.Item; 
        
                            ImageButton deleteBtn = (ImageButton)item["EliminarColumna"].Controls[0]; 
        
                            deleteBtn.Attributes.Add("OnClick", "if(!confirm('¿Está seguro que desea Realizar la Venta?')){return false;};"); 
        
                            var codigoEliminar = item["Codigo"].Text; 
        
                            if (_dbase.DeleteQuery("Delete From tb where id_Bs=" + codigoEliminar).Equals("Ok")) 
        
                            { 
        
                                //Row deleted 
        
                                                                               "AlertSucess('#effect','¡La Cuenta ha sido eliminada!');", true); 
        
                            } 
        
                            else 
        
                            { 
        
                                //Problem in query 
        
                            } 
        
                        } 
        
                    }

But the problem is that the first time I press the
button deletes the row, when I delete another row
It works and shows me the message.

That way I can show the confirmation message without
do a postback?

Thanks for your help!

Sincerly Briayan!

Grid

answered on 01 Jan 2010

4 answers

378 views

[Solved] Expand All button in Group Header?

Is there an example of adding an expand all / collapse all button in a group header? I have looked at the example here:

Custom expand/collapse column with ExpandAll/CollapseAll image button in the header

but this is for a hierarchical grid. I'm interested in such a feature for a grid that is grouped, with the button in the group header.

Grid

answered on 01 Jan 2010

1 answer

85 views

IE Crashing from certain markup in the editor

I have a user using the telerik rad editor; there is a <link> tag in the editor which causes IE to crash (FireFox and GC do not crash). Are there any known markup problems with the editor?

In this case if the <link> tag is on the page it crashes the browser; if I remove the <link> tag in another browser IE doesn't crash; if I place it back in IE crashes.

Editor

answered on 01 Jan 2010

1 answer

143 views

Inappropriate Word Filter for Spell Check

I am currently using another product for html text editing and spell checking and would like to switch it all over to RadEditor and RadSpell. One feature that our current spell check provides is the ability to do a custom "Inappropriate Word Filter." This is similar to spell checking but the main difference is that there are no "suggestions" of other spellings and the drop down would say something along the lines of "This word is flagged as an Inappropriate Word." Does anyone have any suggestions on how to accomplish something along these lines ?

Thanks.

Editor

answered on 01 Jan 2010