Questions on UI for ASP.NET AJAX Forum

7 answers

379 views

[Solved] How do you change the width of a docked RadSlidingPane?

Repro steps:
1. go to http://demos.telerik.com/aspnet-ajax/splitter/examples/sp_clientsideapi/defaultcs.aspx
2. click on pane 1 and click the pin to dock it.
3. click the "Toggle 'Pane 1' width 200 / 100 px" link

expected behavior:
pane is resized

actual behavior:
no resize occurs

Thanks,
Chris

Splitter

answered on 07 Aug 2009

1 answer

124 views

how to Grid without horizantal scroll and vertical scroll header style

Hi all i use radgrid with scrolling but when scrolling is on the header (see the link for more info) of grid above the scroll looks different than the content header and on IE8 horizantal scroll is shown
The html markup of radgrid is below

    
            <telerik:RadGrid HeaderStyle-Height="20px" BackColor="#ebebeb" ID="GroupSelectListGrid" AutoGenerateColumns="false" 
        
                            runat="server" GridLines="None"  Width="450px" TableLayout="Fixed" > 
        
                            <MasterTableView CommandItemDisplay="None" Width="425px"  CurrentResetPageIndexAction="SetPageIndexToFirst" 
        
                                Dir="LTR" Frame="Border" TableLayout="Fixed">                      
        
                                <Columns> 
        
                                    <telerik:GridBoundColumn DataField="Id" Visible="false" DataType="system.string" 
        
                                        ReadOnly="True" SortExpression="Id" UniqueName="Id">  
        
                                    </telerik:GridBoundColumn> 
        
                                    <telerik:GridTemplateColumn ItemStyle-HorizontalAlign="Center" ItemStyle-Width="20px" HeaderStyle-Width="20px" UniqueName="Selection">  
        
                                        <ItemTemplate> 
        
                                            <asp:CheckBox ID="SelectGroupCheckBox" Width="14" runat="server" AutoPostBack="false" /> 
        
                                        </ItemTemplate> 
        
                                    </telerik:GridTemplateColumn> 
        
                                    <telerik:GridBoundColumn DataField="Name" DataType="system.string" HeaderText="Adı" 
        
                                        ItemStyle-Width="300" HeaderStyle-Width="400" ReadOnly="True" SortExpression="Name" UniqueName="Name">  
        
                                    </telerik:GridBoundColumn> 
        
                                </Columns> 
        
                                <NoRecordsTemplate> 
        
                                    Listelenecek Kayıt Bulunmadı</NoRecordsTemplate> 
        
                            </MasterTableView> 
        
                            <ClientSettings> 
        
                                <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True" FrozenColumnsCount="1">  
        
                                </Scrolling> 
        
                            </ClientSettings> 
        
                        </telerik:RadGrid>

so how to disable horizantal scroll and headerstyle for vertical scroll like the content header?
Thanks

Grid

answered on 07 Aug 2009

2 answers

170 views

Declarative binding for a master detail grid

Hi

I am using declarative binding for a master detail grid. The basic set up is a master table based on a table called Customers with a primary key CustomerID and a detail table based on a database table called Vehicles with primary key Reg and foreign key CustomerID.

The grid has this set up

    
            <telerik:RadGrid DataSourceID="EsDataSource1" ID="RadGrid1" runat="server" AllowAutomaticUpdates="true">  
        
                    <MasterTableView DataSourceID="EsDataSource1" DataKeyNames="CustomerID" AutoGenerateColumns="FALSE">  
        
                    <DetailTables> 
        
            <telerik:GridTableView DataSourceID="EsDataSource2" AutoGenerateColumns="false" Name="Vehicles" DataKeyNames="Reg" ShowFooter="false">  
        
             <ParentTableRelation> 
        
               <telerik:GridRelationFields DetailKeyField="Reg" MasterKeyField="CustomerID" /> 
        
            </ParentTableRelation>

I am binding this grid using a third party data source. The code to populate the details table basically retrieves all of the records in the Vehicles table and then the RadGrid filters these to show only those belonging to the parent row. Naturally i would prefer to retrieve only those records from the Vehicles table belonging to the parent row in the first place. How can i access the id of the of the current row in the master table in the code behind and pass it to the data source. This is what i have had to do

    
             Protected Sub RadGrid1_DetailTableDataBind(ByVal source As Object, ByVal e As Telerik.Web.UI.GridDetailTableDataBindEventArgs) Handles RadGrid1.DetailTableDataBind  
        
                    Dim dataItem As GridDataItem = CType(e.DetailTableView.ParentItem, GridDataItem)  
        
                    customerID = dataItem.GetDataKeyValue("CustomerID").ToString()  <======set foreign key in page variable  
        
                End Sub  
        
            DATA SOURCE FOR THE DETAILS TABLE  
        
               Protected Sub EsDataSource2_esSelect(ByVal sender As Object, ByVal e As EntitySpaces.Web.esDataSourceSelectEventArgs) Handles EsDataSource2.esSelect  
        
                    Dim coll As New VehiclesCollection  
        
                    Dim query As New VehiclesQuery  
        
                    query.Where(query.CustomerID = customerID)  <==== page variable  
        
                    coll.Load(query)  
        
                    e.Collection = coll 
        
                End Sub

I am using the data source rather than just binding programmatically because the grid uses an edit form template and the data source will perform the updates automatically for me.

thanks

Grid

answered on 07 Aug 2009

1 answer

110 views

Nesting RadGrids

We've been suffering for some time without a library like Telerik to create what are, more or less, CRUD forms. Every one is a little different. The special need of this particular page, for which we're evaluating Telerik, is simply that there are 2 levels: there are many A's (maybe a few dozen new ones a year), each of which have many B's (maybe dozens to hundreds). So, it's like a list of lists.

We've created a prototype with a RadGrid of A's, but are stumped on how to modify the edit box to show anything more than just the columns present in the RadGrid of A's. We were hoping to put another RadGrid (of B's) in the edit box. How should we approach this?

Alan

Grid

answered on 07 Aug 2009

11 answers

551 views

focus on cell

Hi all,
I want to set a row in edit mode when clicking on it and the clicked cell must get the focus.

i get this working when using a setTimeOut but i don't like this solution.
ex:

    
            ClientSettings.ClientEvents.OnRowCreated = @" 
        
                function RowCreatedEventHandler(sender, eventArgs) 
        
                { 
        
                    var dataItem = eventArgs.get_gridDataItem(); 
        
                    var lastCellFound = false; 
        
                    var cell;             
        
                    for(var i = 0; i < dataItem.get_element().cells.length; i++) 
        
                    { 
        
                        cell = dataItem.get_element().cells[i]; 
        
                        cell.onclick = function() 
        
                        { 
        
                            if(selectedRow != this.parentNode.rowIndex-1) 
        
                            { 
        
                                selectedCol = this.cellIndex; 
        
                                selectedRow = this.parentNode.rowIndex-1; 
        
                                setTimeout(function() 
        
                                { 
        
                                    $find(""" + MasterTableView.ClientID + @""").get_dataItems()[selectedRow].get_element().cells[selectedCol].childNodes[0].focus(); 
        
                                }, 1000); 
        
                                $find(""" + MasterTableView.ClientID + @""").editItem(selectedRow); 
        
                                event.cancelBubble=true; 
        
                                return false; 
        
                             } 
        
                      }  
        
                } 
        
            }";

I tried to use OnResponseEnd of the ajaxmanager to know when the editItem call ended and then set the focus but this does'n work.
ex:

    
            ClientSettings.ClientEvents.OnRowCreated = @" 
        
                                function RowCreatedEventHandler(sender, eventArgs) 
        
                                { 
        
                                    var dataItem = eventArgs.get_gridDataItem(); 
        
                                    var lastCellFound = false; 
        
                                    var cell;             
        
                                    for(var i = 0; i < dataItem.get_element().cells.length; i++) 
        
                                    { 
        
                                        cell = dataItem.get_element().cells[i]; 
        
                                        cell.onclick = function() 
        
                                        { 
        
                                            if(selectedRow != this.parentNode.rowIndex-1) 
        
                                            { 
        
                                                selectedCol = this.cellIndex; 
        
                                                selectedRow = this.parentNode.rowIndex-1; 
        
                                                var mgr = $find(""" + RadAjaxManager.GetCurrent(Page).ClientID + @"""); 
        
                                                mgr.OnResponseEnd = function(sender, eventArgs) 
        
                                                    { 
        
                                                        $find(""" + MasterTableView.ClientID + @""").get_dataItems()[selectedRow].get_element().cells[selectedCol].childNodes[0].focus(); 
        
                                                    } 
        
                                                $find(""" + MasterTableView.ClientID + @""").editItem(editedRow); 
        
                                                event.cancelBubble=true; 
        
                                                return false; 
        
                                            } 
        
                                        }  
        
                                    } 
        
                                }";

Can somone help me with this?
Thx in advance.

Grid

answered on 07 Aug 2009

1 answer

64 views

[Solved] Toggle visibility of DragHandle prevents slider from selecting selected item

Goal:
Slider control is displayed without the draghandle. When the user selects an item on the slider the drag handle becomes visible and is positioned on the selected item.

Problem:
Hiding the draghandle is a piece of cake which is done server side. Because I don't want to postback when the user selects an item on the slider I've used the clientscript object model to watch for events.

Initially I looked for OnClientValueChange to toggle visibility, however this only fires if the selected item is different then the initial value. When the user selected the first item on the slider, the event wasn't fired ;(

So that let me to start using OnClientBeforeValueChange which fires regardless of change, but here's the thing when I call sender.set_showDragHandle(true), effectively displaying the drag handle on the slider control, it moves to the first item in the list and completely ignores the location of selected item...

Any suggestions would be much appreciated,
Elmar

Slider

answered on 07 Aug 2009

2 answers

118 views

[Solved] Custom errror message in RADgrid

Hi,

I've a radgrid in my application that updates my record in the database by inline rowediting. When i try to update a record that after editing violates a unique contstraint in my Oracle database, the pop-up message "exception has been thrown by the target of an invocation" is shown in the webpage.

Now I like to show my own custom error messages (that the unique constraint is violated), instead of the standard "exception has been..." error message.

Can you please help me with this?

Thanks in advance,
Cheers,
Tim.

Grid

answered on 07 Aug 2009

3 answers

65 views

Error on ajax update to the start and end time on scheduler default form template

Anyone successfully used RadAjaxManagerProxy within a customised SchedulerDefaultForm custom control. I have updated SchedulerDefaultForm to include an asp:dropdown control which is set to AutoPostBack to perform server logic to set appointment start and end time based on predefined settings on the selection changed event. Ideally I would like to perform a callback instead of a postback and therefore attempted to make use of the RadAjaxManagerProxy control, however I get the following error when the callabck responds:-

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

Hope someone can help me out.

Jeeten

Scheduler

answered on 07 Aug 2009

1 answer

102 views

Auto Insert and leave new row in Edit mode?

I automatically set radgrid into Insert mode using IsItemInserted = true on entering a page and then, using the ItemDataBound event, I populate GridDataItemInsert fields from Session. This works well however, when the grid is rendered it displays the fields as labels (not editable) together with the Insert and Cancel buttons. This is not the behaviour I desire, I need the row to be in Edit mode to allow the user to override the values and then select "Insert"

Additionally, I have used the InitInsertCommandName in the ItemCommand event which gives the required edit row behaviour but this requires the user to select a header "Add New item" button which I want to avoid.

How can I get the successfully added GridDataItemInsert to be displayed in Edit mode please?

Brian

Grid

answered on 07 Aug 2009

1 answer

137 views

RadAjaxManager and TabContainer

I'm working on a page with an AJAX Control Toolkit TabContainer control. I'm trying to ajaxify the control with RadAjaxManager. I put together a scaled down version for testing purposes:

    
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> 
        
            <div> 
        
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> 
        
                </telerik:RadAjaxManager> 
        
                <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" Width="500px" ActiveTabIndex="1"> 
        
                    <ajaxToolkit:TabPanel ID="tpPanel1" HeaderText="Panel1" runat="server"> 
        
                        <ContentTemplate> 
        
                            <asp:Label ID="lblPanel1" Text="this is the first panel" runat="server" /> 
        
                        </ContentTemplate> 
        
                    </ajaxToolkit:TabPanel> 
        
                    <ajaxToolkit:TabPanel ID="tpPanel2" HeaderText="Panel2" runat="server"> 
        
                        <ContentTemplate> 
        
                            <asp:TextBox ID="txtPanel2" Text="panel2" runat="server" /> 
        
                        </ContentTemplate> 
        
                    </ajaxToolkit:TabPanel> 
        
                </ajaxToolkit:TabContainer> 
        
            </div>

When pulling up the RadAjaxManager wizard panel I noticed that some of the controls within the TabPanels aren't accessible to select as an Ajax trigger. If you can recreate what I have with the code above all I can see is the txtPanel2 control.

Am I doing something wrong? Is it okay to just code it in without the wizard? I'm trying to do that and I'm having some troubles.

Ajax

answered on 07 Aug 2009