Questions on UI for ASP.NET AJAX Forum

2 answers

326 views

[Solved] Closing the edit template in a rad grid...

I am on Vista, using Firefox 3.5.2, Visual Studio 2008, and Telerik 2009.02.0701.20

I have a Rad Grid that is using a collection of objects in the session as its data source. I find that when I edit the item in the grid on the UI, the edit form (defined in a template) is displayed, but when I click on the Insert / Update button, the form stays visible. Clicking on the Cancel button causes the form to disappear (as expected). What do I need to do to cause the edit form to disappear on Insert / Update?

For a sample, here is my aspx page:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DiscountTest.aspx.cs" Inherits="Cleopatra.pages.Admin.DiscountTest" MasterPageFile="../../Main.Master" %> 
        
            <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
        
            <asp:Content ID="Content1" runat="server" ContentPlaceHolderID="cphBody"> 
        
              <!-- custom head section --> 
        
              <style type="text/css"> 
        
                .bigModuleBottom td 
        
                { 
        
                  padding: 0; 
        
                } 
        
              </style> 
        
              <!-- end of custom head section --> 
        
              <!-- content start --> 
        
              <span style="font-weight: bold;">Discounts</span> 
        
              <br /> 
        
              <br /> 
        
              <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> 
        
                <script type="text/javascript"> 
        
                  function RowDblClick(sender, eventArgs) { 
        
                    sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical()); 
        
                  } 
        
                </script> 
        
              </telerik:RadCodeBlock> 
        
              <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> 
        
                <AjaxSettings> 
        
                  <telerik:AjaxSetting AjaxControlID="RadGrid1"> 
        
                    <UpdatedControls> 
        
                      <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> 
        
                    </UpdatedControls> 
        
                  </telerik:AjaxSetting> 
        
                </AjaxSettings> 
        
              </telerik:RadAjaxManager> 
        
              <telerik:RadGrid ID="RadGrid1" AllowAutomaticUpdates="true" AllowAutomaticDeletes="true" AllowSorting="True" AutoGenerateColumns="false" AllowPaging="True" 
        
                GridLines="None" runat="server" ShowFooter="True" PageSize="10" AllowAutomaticInserts="True" 
        
                OnNeedDataSource="RadGrid1_NeedDataSource" OnInsertCommand="RadGrid1_ItemInserted" 
        
                OnDeleteCommand="RadGrid1_ItemDeleted" OnUpdateCommand="RadGrid1_ItemUpdated"> 
        
                <PagerStyle Mode="NextPrevAndNumeric" /> 
        
                <MasterTableView Width="400px" CommandItemDisplay="TopAndBottom" DataKeyNames="EntryID"> 
        
                  <Columns> 
        
                    <telerik:GridEditCommandColumn UniqueName="EditCommandColumn" ButtonType="ImageButton" /> 
        
                    <telerik:GridBoundColumn HeaderText="ID" DataField="EntryID" UniqueName="EntryID" Display="false" Visible="false" /> 
        
                    <telerik:GridBoundColumn HeaderText="Flat Fee?" UniqueName="FlatFee" DataField="FlatFee" /> 
        
                    <telerik:GridBoundColumn HeaderText="Number of Loans" DataField="NumLoans" UniqueName="NumLoans" /> 
        
                    <telerik:GridBoundColumn HeaderText="Discount" DataField="Discount" UniqueName="Discount" /> 
        
                    <telerik:GridButtonColumn UniqueName="DeleteColumn" Text="Delete" CommandName="Delete" ButtonType="ImageButton" /> 
        
                  </Columns> 
        
                  <EditFormSettings EditFormType="Template"> 
        
                    <FormTemplate> 
        
                      <table id="Table2" cellspacing="2" cellpadding="1" width="100%" border="0" rules="none" style="border-collapse: collapse; background: white;"> 
        
                        <tr class="EditFormHeader"> 
        
                          <td colspan="2" style="font-size: small"> 
        
                            <b>Discount Details</b> 
        
                          </td> 
        
                        </tr> 
        
                        <tr> 
        
                          <td> 
        
                            <table id="Table3" cellspacing="1" cellpadding="1" width="250" border="0" class="module"> 
        
                              <tr> 
        
                                <td> 
        
                                  <asp:HiddenField runat="server" ID="hEntryID" Value='<%# Bind("EntryID") %>' /> 
        
                                </td> 
        
                                <td> 
        
                                  &nbsp; 
        
                                </td> 
        
                              </tr> 
        
                              <tr> 
        
                                <td> 
        
                                  <asp:CheckBox runat="server" ID="cbFlatFee" Text="Flat fee?" /> 
        
                                </td> 
        
                                <td> 
        
                                  &nbsp; 
        
                                </td> 
        
                              </tr> 
        
                              <tr> 
        
                                <td> 
        
                                  Number of Loans: 
        
                                </td> 
        
                                <td> 
        
                                  <telerik:RadTextBox ID="txtNumLoans" runat="server" MaxLength="50" Text='<%# Bind("NumLoans") %>' /> 
        
                                </td> 
        
                              </tr> 
        
                              <tr> 
        
                                <td> 
        
                                  Discount: 
        
                                </td> 
        
                                <td> 
        
                                  <telerik:RadTextBox ID="txtDiscount" runat="server" MaxLength="50" Text='<%# Bind("Discount") %>' /> 
        
                                </td> 
        
                              </tr> 
        
                            </table> 
        
                          </td> 
        
                        </tr> 
        
                        <tr> 
        
                          <td> 
        
                            &nbsp; 
        
                          </td> 
        
                        </tr> 
        
                        <tr> 
        
                          <td align="right" colspan="2"> 
        
                            <asp:Button ID="btnUpdate" Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>' runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>' /> 
        
                            &nbsp; 
        
                            <asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False" CommandName="Cancel" /> 
        
                          </td> 
        
                        </tr> 
        
                      </table> 
        
                    </FormTemplate> 
        
                  </EditFormSettings> 
        
                </MasterTableView> 
        
                <ClientSettings> 
        
                  <Selecting AllowRowSelect="True" EnableDragToSelectRows="True" /> 
        
                </ClientSettings> 
        
              </telerik:RadGrid> 
        
              <!-- content end --> 
        
            </asp:Content>

And here is the code behind:

    
            using System; 
        
            using System.Collections.Generic; 
        
            using System.Web; 
        
            using System.Web.UI; 
        
            using System.Web.UI.WebControls; 
        
            using Telerik.Web.UI; 
        
            namespace Cleopatra.pages.Admin 
        
            { 
        
              public partial class DiscountTest : System.Web.UI.Page 
        
              { 
        
                private class DiscountEntry 
        
                { 
        
                  private int _EntryID = -1; 
        
                  public int EntryID 
        
                  { 
        
                    get { return _EntryID; } 
        
                    set { _EntryID = value; } 
        
                  } 
        
                  private bool _DiscountIsRate = false;       
        
                  public bool DiscountIsRate 
        
                  { 
        
                    get { return _DiscountIsRate; } 
        
                    set { _DiscountIsRate = value; } 
        
                  } 
        
                  private int _NumLoans = 0;       
        
                  public int NumLoans 
        
                  { 
        
                    get { return _NumLoans; } 
        
                    set { _NumLoans = value; } 
        
                  } 
        
                  private double _Discount = 0.0;       
        
                  public double Discount 
        
                  { 
        
                    get { return _Discount; } 
        
                    set { _Discount = value; } 
        
                  } 
        
                } 
        
                protected void Page_Load(object sender, EventArgs e) 
        
                { 
        
                  object obj = Session["discounts"]; 
        
                  List<DiscountEntry> discounts = (List<DiscountEntry>) Session["discounts"]; 
        
                  if (discounts == null) 
        
                  { 
        
                    discounts = new List<DiscountEntry>(); 
        
                    Session.Add("discounts", discounts); 
        
                  } 
        
                } 
        
                protected void RadGrid1_PreRender(object sender, System.EventArgs e) 
        
                { 
        
                  if (!this.IsPostBack) 
        
                  { 
        
                    RadGrid1.EditIndexes.Add(1); 
        
                    RadGrid1.Rebind(); 
        
                    RadGrid1.MasterTableView.Rebind(); 
        
                  } 
        
                } 
        
                protected void RadGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e) 
        
                { 
        
                  List<DiscountEntry> discounts = (List<DiscountEntry>) Session["discounts"]; 
        
                  RadGrid1.DataSource = discounts; 
        
                } 
        
                protected void RadGrid1_ItemUpdated (object source, GridCommandEventArgs e) 
        
                { 
        
                  if (e.Item != null) 
        
                  { 
        
                    // Get the form controls out 
        
                    GridEditFormItem editFormItem = (GridEditFormItem) e.Item; 
        
                    HiddenField hEntryID = (HiddenField) editFormItem.FindControl("hEntryID"); 
        
                    CheckBox cbFlatFee = (CheckBox) editFormItem.FindControl("cbFlatFee"); 
        
                    RadTextBox txtNumLoans = (RadTextBox) editFormItem.FindControl("txtNumLoans"); 
        
                    RadTextBox txtDiscount = (RadTextBox) editFormItem.FindControl("txtDiscount"); 
        
                    int entryID = Convert.ToInt32(hEntryID.Value); 
        
                    // Locate and update the discount entries 
        
                    List<DiscountEntry> discounts = (List<DiscountEntry>) Session["discounts"]; 
        
                    foreach (DiscountEntry entry in discounts) 
        
                    { 
        
                      if (entry.EntryID == entryID) 
        
                      { 
        
                        entry.DiscountIsRate = !cbFlatFee.Checked; 
        
                        entry.NumLoans = Convert.ToInt32(txtNumLoans.Text); 
        
                        entry.Discount = Convert.ToDouble(txtDiscount.Text); 
        
                        break; 
        
                      } 
        
                    } 
        
                  } // valid edit item 
        
                  RadGrid1.Rebind(); 
        
                  RadGrid1.MasterTableView.Rebind(); 
        
                } 
        
                protected void RadGrid1_ItemDeleted(object source, GridCommandEventArgs e) 
        
                { 
        
                  if (e.Item != null) 
        
                  { 
        
                    List<DiscountEntry> discounts = (List<DiscountEntry>) Session["discounts"]; 
        
                    discounts.RemoveAt(e.Item.ItemIndex); 
        
                  } // valid delete item 
        
                } 
        
                protected void RadGrid1_ItemInserted(object source, GridCommandEventArgs e) 
        
                { 
        
                  if ((e.Item is GridEditFormInsertItem) && (e.Item.OwnerTableView.IsItemInserted)) 
        
                  { 
        
                    // Get the user controls in the form 
        
                    GridEditFormItem editFormItem = e.Item as GridEditFormItem; 
        
                    HiddenField hEntryID = (HiddenField) editFormItem.FindControl("hEntryID"); 
        
                    CheckBox cbFlatFee = (CheckBox) editFormItem.FindControl("cbFlatFee"); 
        
                    RadTextBox txtNumLoans = (RadTextBox) editFormItem.FindControl("txtNumLoans"); 
        
                    RadTextBox txtDiscount = (RadTextBox) editFormItem.FindControl("txtDiscount"); 
        
                    // Create a new discount table entry and add it to the loan type 
        
                    List<DiscountEntry> discounts = (List<DiscountEntry>) Session["discounts"]; 
        
                    // Determine next available ID 
        
                    int newEntryID = 0; 
        
                    Dictionary<int,bool> discountHash = new Dictionary<int,bool>(); 
        
                    foreach (DiscountEntry discount in discounts) 
        
                    { 
        
                      discountHash.Add(discount.EntryID, true); 
        
                    } 
        
                    int i = 0; 
        
                    while (true) 
        
                    { 
        
                      if (!discountHash.ContainsKey(++i)) 
        
                      { 
        
                        newEntryID = i; 
        
                        break; 
        
                      } 
        
                    } // while loop 
        
                    DiscountEntry entry = new DiscountEntry(); 
        
                    entry.EntryID = newEntryID; 
        
                    entry.DiscountIsRate = !cbFlatFee.Checked; 
        
                    entry.NumLoans = Convert.ToInt32(txtNumLoans.Text); 
        
                    entry.Discount = Convert.ToDouble(txtDiscount.Text); 
        
                    discounts.Add(entry); 
        
                  } // valid insertion 
        
                  RadGrid1.Rebind(); 
        
                  RadGrid1.MasterTableView.Rebind(); 
        
                } 
        
              } 
        
            }

Any thoughts and ideas for me?

Grid

answered on 26 Aug 2009

1 answer

122 views

Resize Scheduler ( same height as browser )

hi,

it is possible that the scheduler has always the same height as the browser?

thanks
christian

Scheduler

answered on 26 Aug 2009

1 answer

135 views

Adding a tooltip - not so easy?

Hi guys

Thanks for all your help so far!

Following the help docs I have added this in code behind to add a very simple tooltip
to my grid which should show the record ID on mouseover.

    
            Protected Sub RadGrid1_ItemCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs)  
        
                    If (TypeOf e.Item Is GridDataItem) Then  
        
                        Dim gridItem As GridDataItem = CType(e.Item, GridDataItem)  
        
                        For Each column As GridColumn In RadGrid1.MasterTableView.RenderColumns  
        
                            If (TypeOf column Is GridBoundColumn) Then  
        
                                gridItem(column.UniqueName).ToolTip = ("ID: " + gridItem.OwnerTableView.DataKeyValues(gridItem.ItemIndex)("ID").ToString)  
        
                            End If  
        
                        Next  
        
                    End If  
        
                End Sub

This doesn't actually do anything - no hand appears on mousover, no tooltip.

Do I also need RadAjax Manger and Tooltip manager in the declarations? The docs don't mention it but
the demo shows them so added this as my grid has paging and sorting (I already have radajaxmanager in master page):

    
            <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">  
        
                                <AjaxSettings> 
        
                            <telerik:AjaxSetting AjaxControlID="RadGrid1">  
        
                                <UpdatedControls> 
        
                                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" /> 
        
                                    <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" /> 
        
                                </UpdatedControls> 
        
                            </telerik:AjaxSetting> 
        
                        </AjaxSettings> 
        
                                </telerik:RadAjaxManagerProxy> 
        
                            <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server"   
        
                                    ManualClose="True">  
        
                                </telerik:RadToolTipManager>

Still haven't succeeded. Maybe some 'imports'missing in code behind?

Can you suggest where I am going wrong?

Thanks

Clive

Grid

answered on 26 Aug 2009

5 answers

178 views

[Solved] TextBox focus with keyboard navigation

Hello,

I have a RadGrid that i am using for edit mode only, in a spreadsheet type scenario. This means that i will not be performing any sort of row selection. Currently i can start from the first control and tab through the remaining controls exactly like i want. However what i am trying to do now is provide keyboard up and down support so they can choose to select boxes in that way.

I basically have 3 columns of editable data. At the moment if you tab it goes from box 1 row 1 to box 2 row 1 to box 3 row 1 to box 1 row 2. This is how i want tabbing to work.

For the up down if i am on box 1 row 1 and i hit down i want it to go to box 1 row 2 then box 1 row 3 then if i only have 3 rows and hit down again i want it to go to box 1 row 1.

Is there any way to build support for this?

Grid

answered on 26 Aug 2009

4 answers

161 views

How to modify layout of the Menu

I used ASPNETAJAX Q1 2009 and copy the black skin with css to my project (See picture below)

http://img196.imageshack.us/img196/2914/externalcss03.png

When I will the web page the result look like this (See picture below)

http://img441.imageshack.us/img441/3349/externalcss01.png

For picture above, I can change any presentation in Menu.Black.CSS. However, the property that I want to change is the .RadMenu .rmItem{} which located in WebResource.axd?d*snDMiF8h.............................................. (Please refer to picture below). I can only see this properties in firebug.

http://img81.imageshack.us/img81/3082/externalcss02.png

As you can see from the picture, I can change the property I want in firebug and make the item float from the right. I tried to copy all code from Menu.CSS to Menu.Black.CSS. But It didn't work. In other word, the change I want to make is in the Menu.CSS which shows on firebug as WebResource.axd?d*snDMiF8h.............................................. How do I get rid on WebResource and like Menu.CSS to my project so that I can modify any property in there?

Thanks in Advance

Menu

answered on 26 Aug 2009

5 answers

392 views

Telerik RadEditor Rendering issue

I've been working on a project where we are using the Telerik RadEditor control (version 2009.1.402.35). For the most part everything seems to work fine with it (i.e., bold, italics, color etc). What is an issue though is that the indent and list (bulleted and numbered) functions do not properly render on the screen while the user is editing the content. What is interesting about this is that when the indent or list button is clicked it does add the correct markup to the html.

The problem manifests in MSIE 6,7, 8 and FireFox 3 (the only ones i've tested so far). The editor is being used inside of a usercontrol that is running in the context of a SharePoint environment. Any ideas on why some of the functions work but not other with this control?

Thanks,

-James.F

  <telerik:RadEditor ID="topicBody" Runat="server" Width="100%" height="300" >
    <Tools>
        <telerik:EditorToolGroup Tag="Top">
            <telerik:EditorTool Name="Bold" />
            <telerik:EditorTool name="Italic"/>
            <telerik:EditorTool name="Underline"/>  
            <telerik:EditorTool name="StrikeThrough"/>  
            <telerik:EditorSeparator Visible="true" />
            <telerik:EditorTool name="JustifyLeft"/>
            <telerik:EditorTool name="JustifyCenter"/>
            <telerik:EditorTool name="JustifyRight"/>
            <telerik:EditorTool name="JustifyFull"/>
            <telerik:EditorSeparator Visible="true" />
            <telerik:EditorTool name="InsertOrderedList"/>
            <telerik:EditorTool name="InsertUnorderedList"/>
            <telerik:EditorTool name="Outdent"/>
            <telerik:EditorTool name="Indent"/>
            <telerik:EditorSeparator Visible="true" />
            <telerik:EditorTool name="FontName"/>
            <telerik:EditorTool name="FontSize"/>
            <telerik:EditorTool name="ForeColor"/>
            <telerik:EditorTool name="BackColor"/>                  
        </telerik:EditorToolGroup>
        <telerik:EditorToolGroup Tag="Middle">
            <telerik:EditorTool name="Undo"/>
                <telerik:EditorTool name="Redo"/>   
                <telerik:EditorSeparator Visible="true" />              
            <telerik:EditorTool name="LinkManager"/>
            <telerik:EditorTool name="Unlink"/>
            <telerik:EditorSeparator Visible="true" />
            <telerik:EditorTool name="InsertTable"/>
            <telerik:EditorSeparator Visible="true" />          
                <telerik:EditorTool name="Cut"/>
            <telerik:EditorTool name="Copy"/>
                <telerik:EditorTool name="PasteAsHtml"/>
                <telerik:EditorTool name="PastePlainText"/>
                <telerik:EditorSeparator Visible="true" />
                <telerik:EditorTool name="Print"/>                                 
        </telerik:EditorToolGroup> 
    </Tools>
</telerik:RadEditor>

Editor

answered on 26 Aug 2009

1 answer

53 views

RAD Editor rendering. Need to switch to HTML first

Hi

I have a website that I am trialling the RadEditor. The setup is a master page and content page but the content page also inherits from a base page.

The Source for the content page is

    
            <%-- Bottom content area - main content --%> 
        
            <asp:Content ID="Content5" ContentPlaceHolderID="bottomContentArea" runat="server">  
        
                <telerik:RadScriptManager ID="ScriptManager1" runat="server"   
        
                    EnableTheming="True">  
        
                </telerik:RadScriptManager> 
        
                <div id="contentBottom">  
        
                    <div id="masterContent" class="col3">  
        
                        <div class="content">  
        
                            <h2>Content Page</h2> 
        
                            <table> 
        
                                <tr> 
        
                                    <td> 
        
                                        <telerik:RadEditor ID="RadEditor1" Runat="server" Skin="Office2007"   
        
                                            AutoResizeHeight="True">  
        
                                            <Content> 
        
                                            <h1>Publication content</h1>Enter your publication information here.....</Content> 
        
                                        </telerik:RadEditor> 
        
                                    </td> 
        
                                </tr> 
        
                                <tr> 
        
                                    <td>&nbsp;</td> 
        
                                </tr> 
        
                                <tr> 
        
                                    <td> 
        
                                        <asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" /></td>  
        
                                </tr> 
        
                            </table> 
        
                            <p>&nbsp;</p> 
        
                        </div> 
        
                        <div class="footer"><img src="Resources/Master/images/layout/bkg-content-base-right.gif"/></div> 
        
                    </div> 
        
                </div> 
        
            </asp:Content>

There is no code in the content page.

For the content to display I need to switch to HTML view and then back to design view. Do you know why this might be?

Thanks

Editor

answered on 26 Aug 2009

5 answers

218 views

Rad grid client side

Hello
could you please show any example how to work with radgrid client side events
how to insert new item using masterTable.insertItem(obj) then rebind the grid.
update and delete operation client side without using web methods
i've been trying to insert new item for too long now, the methods works fine without throwing any exception, but nothing added to the grid.

Thanks in advanced

Grid

answered on 26 Aug 2009

1 answer

71 views

[Solved] Load on demand stops working after page refresh in FF

When you expand a node with ServerSideCallback it works the first times. But if I refresh the page and try to expand the node once more, it hangs forever. Clicking it mulitple times just adds the loading symbol several times. This only happens in Firefox. I've tried both FF 3.0 and 3.5 and have the same problem.

I've managed to reproduce this on the demo pages as well.
http://demos.telerik.com/aspnet-ajax/treeview/examples/programming/loadondemandmodes/defaultcs.aspx

Check this screenshot too see the problem.
http://img233.imageshack.us/img233/372/treeviewloadondemandbug.png

Anyone have an idea where to start searching for a solution?

Regards
Oyvind

TreeView

answered on 26 Aug 2009

2 answers

79 views

GridCheckboxColumn

I am trying to use the GridCheckboxColumn control and it does not appear in my VS 2008 toolbox. I have tried to add it (on toolbox tab right click, "Choose Items"), but the control is not in the list of available choices. I can see the class in VS's object browser. I only have the grid column editors on the toolbox and not the controls themselves.

I am using RadControls for ASPNET AJAX Q2 2008. Are the controls not apart of this version?

Thanks,
Mystee

General Discussions

answered on 26 Aug 2009