Questions on UI for ASP.NET AJAX Forum

2 answers

199 views

[Solved] Example integrating Splitter and Dock?

Is there an example of the best practices for integrating the splitter control and dock controls on the same page? Picture a portal style page where the splitter can basically resize the docking zones and the content, contained in docks resizes based on the zone it is dropped into.

Seems like a common use case, but I cannot find an existing example.

Thx

Chris

Dock

answered on 19 Feb 2010

2 answers

128 views

[Solved] Is it possible to insert text in the All Day row?

I'd like to display some text in the all day row. The text will be different for each day. Is this possible? Another option would be to change the actual date header (where it currently displays "Mon, 15").

Has anybody accomplished this, and can give some tips?

Scheduler

answered on 19 Feb 2010

3 answers

154 views

Weird behaviors found while implementing cascading GridDropDownColumn

Hi,

My name is Sunggoo and I found these weird behaviors while using GridDropDownColumns to implement RadGrid edit form with cascading dropdowns.

Like many others, I followed Grid / Accessing Cells and Rows demo and other forum threads, and was successful to get really close to my goal.

However, I discovered the following erroneous behaviors which I think are some kinds of bug:

Cascading dropdown on the last row item isn’t reactive. This problem is also found on the demo linked above. Since all other (same column) dropdowns on non-last rows work perfectly fine, this is definitely a bug.
When entering edit mode, the preset selected item of the cascading dropdown is ignored and, instead, first item in the dropdown is selected. This problem is not found in the demo; please refer to my code when analyzing.
This is more like an extended error of error# 2. When entering edit mode on the first row item, not only its cascading dropdown, but cascading dropdowns of off other rows are also reset.

C# code-behind:

    
            public partial class WSSummary : System.Web.UI.Page  
        
                {  
        
                    public static String ConnString = "Data Source=CHINABERRY\\SQLEXPRESS;Initial Catalog=TestGridview;Integrated Security=True";  
        
                    public static DataTable GetRelatedRecords(string query)  
        
                    {  
        
                        SqlConnection conn = new SqlConnection(ConnString);  
        
                        SqlDataAdapter adapter = new SqlDataAdapter();  
        
                        adapter.SelectCommand = new SqlCommand(query, conn);  
        
                        DataTable myDataTable = new DataTable();  
        
                        conn.Open();  
        
                        try 
        
                        {  
        
                            adapter.Fill(myDataTable);  
        
                        }  
        
                        finally 
        
                        {  
        
                            conn.Close();  
        
                        }  
        
                        return myDataTable;  
        
                    }  
        
                    protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)  
        
                    {  
        
                        SqlConnection conn = new SqlConnection(ConnString);  
        
                        SqlDataAdapter adapter = new SqlDataAdapter();  
        
                        adapter.SelectCommand = new SqlCommand("SELECT Date, Client, CostElementName, ServicePackage, Description, BillingNumber, Hours, Rate, Status FROM [WSItem]", conn);  
        
                        DataSet myDataSet = new DataSet();  
        
                        conn.Open();  
        
                        try 
        
                        {  
        
                            adapter.Fill(myDataSet, "WSItems");  
        
                            adapter.SelectCommand = new SqlCommand("SELECT Client FROM [Client]", conn);  
        
                            adapter.Fill(myDataSet, "Clients");  
        
                            adapter.SelectCommand = new SqlCommand("SELECT CostElementName FROM [CostElementName]", conn);  
        
                            adapter.Fill(myDataSet, "CostElementNames");  
        
                            adapter.SelectCommand = new SqlCommand("SELECT ServicePackage FROM [tblServicePackage]", conn);  
        
                            adapter.Fill(myDataSet, "ServicePackages");  
        
                        }  
        
                        finally 
        
                        {  
        
                            conn.Close();  
        
                        }  
        
                        RadGrid1.DataSource = myDataSet;  
        
                    }  
        
                    protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)  
        
                    {  
        
                        if (e.Item is GridEditableItem && e.Item.IsInEditMode)  
        
                        {  
        
                            // reference the edited grid item   
        
                            GridEditableItem editedItem = e.Item as GridEditableItem;  
        
                            GridEditManager editMan = editedItem.EditManager;  
        
                            RadComboBox clientColumn = editedItem["ClientColumn"].Controls[0] as RadComboBox;  
        
                            // reference the column editor which holds the CostElementName dropdown list instance in the edit form  
        
                            GridDropDownColumnEditor costElementNameEditor = editMan.GetColumnEditor("CostElementNameColumn") as GridDropDownColumnEditor;  
        
                            DataTable tempCENtable = GetRelatedRecords("SELECT CostElementName FROM [CostElementName] WHERE Client = '" + clientColumn.SelectedValue + "'");  
        
                            costElementNameEditor.DataSource = tempCENtable;  
        
                            costElementNameEditor.DataBind();  
        
                            // reference the column editor which holds the CostElementName dropdown list instance in the edit form  
        
                            GridDropDownColumnEditor servicePackageEditor = editMan.GetColumnEditor("ServicePackageColumn") as GridDropDownColumnEditor;  
        
                            DataTable tempSPtable = GetRelatedRecords("SELECT ServicePackage FROM [tblServicePackage] WHERE Client = '" + clientColumn.SelectedValue + "'");  
        
                            servicePackageEditor.DataSource = tempSPtable;  
        
                            servicePackageEditor.DataBind();  
        
                        }  
        
                    }  
        
                    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)  
        
                    {  
        
                        if (e.Item is GridEditableItem && e.Item.IsInEditMode)  
        
                        {  
        
                            GridEditableItem editedItem = e.Item as GridEditableItem;  
        
                            RadComboBox clientColumn = editedItem["ClientColumn"].Controls[0] as RadComboBox;  
        
                            // add SelectedIndexChanged event handler to Client dropdown list column  
        
                            clientColumn.AutoPostBack = true;  
        
                            clientColumn.SelectedIndexChanged += new RadComboBoxSelectedIndexChangedEventHandler(ClientComboBoxControl_SelectedIndexChanged);  
        
                        }  
        
                    }  
        
                    protected void ClientComboBoxControl_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)  
        
                    {  
        
                        //first reference the edited grid item through the NamingContainer attribute  
        
                        GridEditableItem editedItem = (sender as RadComboBox).NamingContainer as GridEditableItem;  
        
                        //the dropdown list will be the first control in the Controls collection of the corresponding cell  
        
                        //for custom edit forms (WebUserControl/FormTemplate) you can find the column editor with the FindControl(controlId) method  
        
                        RadComboBox ddlCENList = editedItem["CostElementNameColumn"].Controls[0] as RadComboBox;  
        
                        // change the data source for ContactTitle with custom code here  
        
                        DataTable tempCENtable = GetRelatedRecords("SELECT CostElementName FROM [CostElementName] WHERE Client = '" + (editedItem["ClientColumn"].Controls[0] as RadComboBox).SelectedValue + "'");  
        
                        ddlCENList.DataSource = tempCENtable;  
        
                        ddlCENList.DataBind();  
        
                        //the dropdown list will be the first control in the Controls collection of the corresponding cell  
        
                        //for custom edit forms (WebUserControl/FormTemplate) you can find the column editor with the FindControl(controlId) method  
        
                        RadComboBox ddlSPList = editedItem["ServicePackageColumn"].Controls[0] as RadComboBox;  
        
                        // change the data source for ContactTitle with custom code here  
        
                        DataTable tempSPtable = GetRelatedRecords("SELECT ServicePackage FROM [tblServicePackage] WHERE Client = '" + (editedItem["ClientColumn"].Controls[0] as RadComboBox).SelectedValue + "'");  
        
                        ddlSPList.DataSource = tempSPtable;  
        
                        ddlSPList.DataBind();  
        
                    }  
        
            }

.aspx:

    
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        
                </telerik:RadScriptManager> 
        
                <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">  
        
                    <script type="text/javascript">  
        
                        var hasChanges, inputs, dropdowns, editedRow;  
        
                        function RowClick(sender, eventArgs) {  
        
                        }  
        
                        function RowDblClick(sender, eventArgs) {  
        
                            sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical());  
        
                        }  
        
                        function GridCommand(sender, eventArgs) {  
        
                            if (eventArgs.get_commandName() != "Edit") {  
        
                                editedRow = null;  
        
                            }  
        
                        }  
        
                        function GridCreated(sender, eventArgs) {  
        
                            var gridElement = sender.get_element();  
        
                            var elementsToUse = [];  
        
                            inputs = gridElement.getElementsByTagName("input");  
        
                            for (var i = 0; i < inputs.length; i++) {  
        
                                var lowerType = inputs[i].type.toLowerCase();  
        
                                if (lowerType == "hidden" || lowerType == "button") {  
        
                                    continue;  
        
                                }  
        
                                Array.add(elementsToUse, inputs[i]);  
        
                                inputs[i].onchange = TrackChanges;  
        
                            }  
        
                            dropdowns = gridElement.getElementsByTagName("select");  
        
                            for (var i = 0; i < dropdowns.length; i++) {  
        
                                dropdowns[i].onchange = TrackChanges;  
        
                            }  
        
                            //setTimeout(function() { if (elementsToUse[0]) elementsToUse[0].focus(); }, 100);  
        
                        }  
        
                        function TrackChanges(e) {  
        
                            hasChanges = true;  
        
                        }  
        
                    </script> 
        
                </telerik:RadCodeBlock> 
        
                <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Skin="Windows7" 
        
                    OnNeedDataSource="RadGrid1_NeedDataSource"   
        
                    OnItemCreated="RadGrid1_ItemCreated"   
        
                    OnItemDataBound="RadGrid1_ItemDataBound" 
        
                    GridLines="None">  
        
                    <PagerStyle Mode="NextPrevAndNumeric" /> 
        
                    <MasterTableView ShowHeadersWhenNoRecords="true" 
        
                        GridLines="Vertical" AutoGenerateColumns="false" EditMode="InPlace">  
        
                        <Columns> 
        
                            <telerik:GridDateTimeColumn UniqueName="DateColumn" PickerType="DatePicker" 
        
                                HeaderText="Date" DataField="Date">  
        
                                <ItemStyle Width="100px" /> 
        
                            </telerik:GridDateTimeColumn> 
        
                            <telerik:GridDropDownColumn UniqueName="ClientColumn" DataField="Client" 
        
                                ListTextField="Client" ListValueField="Client" ListDataMember="Clients" 
        
                                HeaderText="Client" DropDownControlType="RadComboBox">  
        
                                <ItemStyle Width="150px" /> 
        
                            </telerik:GridDropDownColumn> 
        
                            <telerik:GridDropDownColumn UniqueName="CostElementNameColumn" DataField="CostElementName" 
        
                                ListTextField="CostElementName" ListValueField="CostElementName" ListDataMember="CostElementNames"   
        
                                HeaderText="Cost Element Name" DropDownControlType="RadComboBox">  
        
                                <ItemStyle Width="200px" /> 
        
                            </telerik:GridDropDownColumn> 
        
                            <telerik:GridDropDownColumn UniqueName="ServicePackageColumn" DataField="ServicePackage" 
        
                                ListTextField="ServicePackage" ListValueField="ServicePackage" ListDataMember="ServicePackages"   
        
                                HeaderText="Service or Package" DropDownControlType="RadComboBox">  
        
                                <ItemStyle Width="200px" /> 
        
                            </telerik:GridDropDownColumn> 
        
                            <telerik:GridBoundColumn UniqueName="DescriptionColumn" DataField="Description" 
        
                                HeaderText="Description" AllowSorting="false">  
        
                                <ItemStyle Width="200px" Height="3em" /> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn UniqueName="BillingNumberColumn" DataField="BillingNumber" 
        
                                HeaderText="Billing #">  
        
                                <ItemStyle Width="100px" /> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn UniqueName="HoursColumn" DataField="Hours" 
        
                                HeaderText="Hours">  
        
                                <ItemStyle Width="50px" /> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn UniqueName="RateColumn" DataField="Rate" 
        
                                HeaderText="Rate">  
        
                                <ItemStyle Width="50px" /> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn UniqueName="Status" DataField="Status" 
        
                                HeaderText="Status" SortExpression="Status">  
        
                            </telerik:GridBoundColumn> 
        
                        </Columns> 
        
                    </MasterTableView> 
        
                    <ClientSettings EnableRowHoverStyle="true" AllowColumnsReorder="True"   
        
                        ReorderColumnsOnClient="True">  
        
                        <Selecting AllowRowSelect="True" /> 
        
                        <ClientEvents OnRowClick="RowClick" OnRowDblClick="RowDblClick" 
        
                            OnGridCreated="GridCreated" OnCommand="GridCommand" /> 
        
                    </ClientSettings> 
        
                </telerik:RadGrid> 
        
                <telerik:RadAjaxManager runat="server">  
        
                    <ajaxsettings> 
        
                        <telerik:AjaxSetting AjaxControlID="RadGrid1">  
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> 
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                    </ajaxsettings> 
        
                </telerik:RadAjaxManager>

Here are some additional information:

By selecting Client, both Cost Element Name and Service or Package columns should cascade
Since there are different sets of Cost Element Name and Service/Package lists for each client selected

I spent many hours to error# 2 and 3. Because my code isn’t much different from the demo, I though it might be caused by some unknown bugs. Please take a look at my code and help me out.

Thank you,

Sunggoo.

Grid

answered on 19 Feb 2010

1 answer

79 views

Context menu shows on Filter and Pager rows

I have a right-click context menu for a grid and it was showing up when the user clicked the header, filter, and pager rows. I found the OnColumnContextMenu to cancel the menu on the header row, but I can't find any way to cancel it for the pager and filter rows. Any suggestions?

Grid

answered on 19 Feb 2010

1 answer

91 views

RadGrid Add Row w/o Refreshing

Hello,

I'm wondering if there is a way to add a new data without refreshing the grid. The problem I'm having is that whenever invoking showInsertItem(), it refreshes the entire form and that causes calling database again and again.

I looked for a property of MasterTableView to prevent the calls, but I couldn't find one.

The reason why it refreshes the entire page is probably because I'm binding data. Does it mean that if data is bound to RadGrid, refreshing is invevitable when inserting/updating/deleting a record?

Please let me know if there is any clue how to resolve this issue.

Thanks!

Grid

answered on 19 Feb 2010

1 answer

77 views

IE8 Rad Calendar image missing

hi,

i am using rad calendar and the rad calendar is appearing in firefox and i used the css class for calendar. and in ie8 i am unable to see the image it is displaying the text as "open the Calendar Popup" it is displaying the message.

can u give me the solution ASAP

Thanks in advance

Vara Prasad.M

Calendar

answered on 19 Feb 2010

2 answers

261 views

databind to Textbox using where clause

Hi
How to databind to a textbox using where clause?

In my follwoing code,
I want the user to enter his Surname name and using this name I want to display his picture.
Can I use the where clause in LinqDataSource.
Family = Request.form("txtSurname") ?

It doesnt work in my LinqDataSource.
Any help is appreciated.

    
            <div>  
        
            <asp:ScriptManager ID="ScriptManager1" runat="server">     </asp:ScriptManager>  
        
            <telerik:RadPanelBar ID="RadPanelBar1" Runat="server" DataSourceID="LinqDataSource1" DataTextField="pictures" DataValueField="pictures" Width="300px">  
        
               <ItemTemplate>  
        
                    <fieldset class="FramesetStyle">  
        
                          <asp:Label ID="lbSurname" runat ="server" Text="Family Name: " AssociatedControlID="txtSurname"> </asp:Label>       
        
                           <telerik:RadTextbox ID="txtSurname" runat="server"    
        
            Text='<%# Eval("First") %>' MaxLength="150" Width="200px">         </telerik:RadTextbox>  
        
                       <asp:Image ID="Image1" runat="server" CssClass="FramesetStyle"   
        
                                ImageUrl='<%# Eval("pictures") %>'   
        
                         AlternateText='<%# Eval("pictures", "No Image Available") %>' />  
        
                        </fieldset>  
        
                        </ItemTemplate>  
        
                    </telerik:RadPanelBar>  
        
                    <asp:LinqDataSource ID="LinqDataSource1" runat="server"   
        
                        ContextTypeName="ABCDataContext"   
        
                        Select="new (Notes, email, pictures, First, Family)" TableName="tblTel">  
        
                    </asp:LinqDataSource>

General Discussions

answered on 19 Feb 2010

3 answers

219 views

AutoCompleteType has no effect

The following AutoCompleteType settings have no effect:

    
            <telerik:RadTextBox ID="RadTextBox1" runat="server"    
        
                 EmptyMessage="Username"   
        
                 AutoCompleteType="None" 
        
            />   
        
            or 

                        <telerik:RadTextBox ID="RadTextBox1" runat="server"    
                    
                             EmptyMessage="Username"   
                    
                             AutoCompleteType="Email" 
                    
                        />

I've tested in both IE8 and FireFox 3.5. Both browsers have autocomplete enabled and regular TextBoxes work fine. Is there an additional setting that I'm missing? Thanks!

Input

answered on 19 Feb 2010

2 answers

77 views

FilterMenu Clipping in Grid

Hello,
I am having a problem where the FilterMenu is clipping the right side and bottom of the filtermenu when it is displayed for a Date column. The FilterMenu displays correctly for all other columns until the Date column is selected and then it is displayed clipped for all columns.
We are limiting the available FilterFormatString to:
"NoFilter"
"Contains"
"StartsWith"
"GreaterThanOrEqualTo"
"LessThanOrEqualTo"
"IsEmpty"

Grid

answered on 19 Feb 2010

1 answer

99 views

colorpicker javascript error

Hello

I'm trying to use the RadColorPicker inside a custom control.

When I try to run my project I get an error in a dynamically generated js file.

The error occurs at a line that says:
_17.style.background=_13.value;

I do have a script manager loaded.

Im using RadControls for ASPNET AJAX Q3 2008

ColorPicker

answered on 19 Feb 2010