Telerik Forums
UI for ASP.NET AJAX Forum
1 answer
87 views
I know what I'm doing is getting into unsupportedland, but I think it might just be a styling issue that I can be helped with.  I have a RadGrid within a <div> with a fixed width so that the overflow of the grid scrolls horizontally.  This works fine. 

I added an extra row to the top of the header, so there are 2 column header rows.  The top row I will call the "main title" row of the header.  This works fine.  See attachement (Uncentered.jpg).

When scrolling with the <div>, the main title row of the header should stay centered.  The scrolling/centering part works fine.  See attachment (Centered.jpg).

This is difficult to explain and point out, but the problem I'm experiencing is the code that centers the main title row's text is causing the height of the row to shrink by a couple of pixels as if the padding is removed or something similar.  I believe the offender has something to do with positon:fixed & margin-left attribute settings. 

Please view and zoom in closely on the image (HeightCompare.jpg).  I overlayed the centered image over the uncentered image.  You will notice that the main title row is about 2px smaller for the centered (right) vs uncentered (left). So basically if you were running these 2 examples side by side you would notice that the size of the main title rows differ and I would like them to be the same. In other words I would not like the row to shrink when this code is applied.

In the code I commented out the line for uncentered and am currently executing the line for centered.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="FixedHeader.aspx.vb" Inherits="FixedHeader" %>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>    
        <telerik:RadScriptManager runat="server" ID="mgrJS">
        </telerik:RadScriptManager>  
        <div style="overflow:scroll;overflow-y:hidden;width:400px" >        
            <telerik:RadGrid runat="server" ID="dgHeader" Skin="Web20" >
                <ClientSettings>
                    <Scrolling UseStaticHeaders="True" />
                    <Selecting EnableDragToSelectRows="False" />
                </ClientSettings>
                <MasterTableView BorderWidth="1px" GridLines="Both" style="border-collapse: collapse !Important;" Font-Bold="false" TableLayout="Fixed" AutoGenerateColumns="false" ShowHeader="True">
                    <RowIndicatorColumn Visible="False">
                        <HeaderStyle Width="20px" />
                    </RowIndicatorColumn>
                    <ExpandCollapseColumn Resizable="False" Visible="False">
                        <HeaderStyle Width="20px" />
                    </ExpandCollapseColumn>
                    <EditFormSettings>
                        <PopUpSettings ScrollBars="None" />
                    </EditFormSettings>
                </MasterTableView>
            </telerik:RadGrid>   
        </div
    </div>
    </form>
</body>
</html>
Partial Class FixedHeader
    Inherits System.Web.UI.Page
  
    Dim dtCols As New DataTable
    Dim dtHeader As New DataTable
  
    Protected Sub dgHeaderAPO_NeedDataSource(ByVal source As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles dgHeader.NeedDataSource
        dgHeader.DataSource = dtHeader
    End Sub
  
    Protected Sub FixedHeader_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        'Grid columns will be defined off of this table
        dtCols.Columns.Add(New DataColumn("COL_ID", GetType(String)))
        Dim colRow As DataRow = dtCols.NewRow
        colRow(0) = "1234567"
        dtCols.Rows.Add(colRow)
        colRow = dtCols.NewRow
        colRow(0) = "2345678"
        dtCols.Rows.Add(colRow)
        colRow = dtCols.NewRow
        colRow(0) = "3456789"
        dtCols.Rows.Add(colRow)
        colRow = dtCols.NewRow
        colRow(0) = "4567890"
        dtCols.Rows.Add(colRow)
        colRow = dtCols.NewRow
        colRow(0) = "5678901"
        dtCols.Rows.Add(colRow)
        colRow = dtCols.NewRow
        colRow(0) = "6789012"
        dtCols.Rows.Add(colRow)
        colRow = dtCols.NewRow
        colRow(0) = "7890123"
        dtCols.Rows.Add(colRow)
  
        'Create Header table
        For Each dr As DataRow In dtCols.Rows
            dtHeader.Columns.Add(New DataColumn(dr("COL_ID"), GetType(Integer)))
        Next
  
        'Populate w/ data
        Dim Generator As System.Random = New System.Random()
        Dim r As DataRow = dtHeader.NewRow
        For j As Integer = 0 To 6
            r(j) = Generator.Next(0, 100)
        Next
        dtHeader.Rows.Add(r)
  
        'Define columns of master table view.
        For Each row As DataRow In dtCols.Rows
            Dim newCol As New GridBoundColumn
            dgHeader.MasterTableView.Columns.Add(newCol)
            newCol.HeaderText = row("COL_ID")
            newCol.DataField = row("COL_ID")
            newCol.DataFormatString = "{0:N0}"
            newCol.HeaderStyle.Width = 100
            newCol.ItemStyle.Width = 100
        Next
    End Sub
  
    Protected Sub dgHeaderAPO_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles dgHeader.PreRender
        If dgHeader.MasterTableView.GetItems(GridItemType.Header).Length > 0 Then
  
            Dim header As GridHeaderItem = DirectCast(dgHeader.MasterTableView.GetItems(GridItemType.Header)(0), GridHeaderItem)
            Dim head As GridTHead = DirectCast(header.Parent, GridTHead)
  
            'create a new GridHeaderItem which will be the new row  
            Dim newHeaderItem As New GridHeaderItem(dgHeader.MasterTableView, 0, 0)
  
            'add 2 empty table header cells, as there are 2 hidden columns always created in RadGrid
            newHeaderItem.Cells.Add(New GridTableHeaderCell())
            newHeaderItem.Cells.Add(New GridTableHeaderCell())
  
            Dim leftMargin As Integer = 0
            Select Case dtCols.Rows.Count
                Case 1, 2
                    leftMargin = 0
                Case 3
                    leftMargin = 50
                Case 4
                    leftMargin = 75
                Case 4
                    leftMargin = 100
                Case Else
                    leftMargin = 125
            End Select
  
            'Uncentered code without resizing issue
            'newHeaderItem.Cells.Add(New GridTableHeaderCell() With {.Text = "<input id='cbAll' type='checkbox');' \>CENTER ME", .ColumnSpan = dtCols.Rows.Count})
  
            'Centered code with resizing issue
            newHeaderItem.Cells.Add(New GridTableHeaderCell() With {.Text = "<div style='width:130px;position:fixed;margin-left:" & leftMargin & "px;'><input id='cbAll' type='checkbox');' \>CENTER ME</div>", .ColumnSpan = dtCols.Rows.Count})
            head.Controls.AddAt(0, newHeaderItem)
  
        End If
  
    End Sub
End Class

Please advise.

Thanks,
Rob

Rob
Top achievements
Rank 1
 answered on 29 Nov 2011
1 answer
102 views
Hello telerik team,

I would like to do the inserting and updating of the appointment thru code behind i almost worked out the inserting part but i cant make the update work as it does not show the update values in the

e.Appointment.Start, e.Appointment.End, e.Appointment.Subject, e.Appointment.Description
it shows only the values in the database in radScheduler1_AppointmentUpdate event

i have binded the schedulder thru a sqlDatasource only using select command.

is there any solution for it?

Pradeep
Top achievements
Rank 1
 answered on 29 Nov 2011
6 answers
111 views
Hi,
I have been looking all over to find if anyone else had this issue, but I couldn't find anything.
In our project we have several Telerik controls, in one particular place, we are using drag and drop from a Rad Grid to a TreeView, it works fine in Firefox 8 and in IE, but in Firefox 5 and previous versions throws the following error:
args.get_destinationHtmlElement().click is not a function

The code we use to drag and drop from the grid to the tree, we took it from this forums.
The error happens in the function:
function dropRowOnTree(args) {
                   args.get_destinationHtmlElement().click();

}

Which is called in:
function onRowDropping(sender, args) {
                    var dest = args.get_destinationHtmlElement();
                    if (dest) {
                        dropRowOnTree(args);
                    }
                }
This is the function to handle the OnClientRowDropping of the grid event.

Using firefug to debug i find that args.get_destinationHtmlElement(), is brining the span where the text of the node is being shown.

The tree is configured like this
<cc1:TreeView ID="treeOptions" runat="server" EnableDragAndDrop="true" OnNodeDrop="treeOptions_HandleDrop"
                                MultipleSelect="true" OnClientNodeDropping="onNodeDropping" EnableDragAndDropBetweenNodes="true">
                                <NodeTemplate>
                                    <div onmouseover="<%#string.Format("javascript:showHideNodeOptions(this, true, '{0}');", Eval("Type")) %>"
                                        onmouseout="javascript:showHideNodeOptions(this, false);" style="margin-right: 10px;">
                                        <span>
                                            <%# DataBinder.Eval(Container.DataItem, "Name") %></span> &nbsp;
                                        <asp:LinkButton CausesValidation="false" ID="imgAdd" Style="display: none; cursor: pointer"
                                            AlternateText="Edit" runat="server" OnCommand="NodeEditClick" CssClass="icon editIcon"
                                            CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Id") %>' />
                                    </div>
                                </NodeTemplate>
                            </cc1:TreeView>

Any help you could give me would be greatly appreciated.

Dzy.-
Dzyann
Top achievements
Rank 1
 answered on 29 Nov 2011
8 answers
73 views
Hello.
I'm relatively new to Visual Studio 2008 and to RadComponents.
I noticed that VS is extremely slow with RadComponents, even though I have an great computer (Core 2 Duo E6750, 2 Gb).
For example I create a MasterTable Edit Template for a RadGrid and when I click a Textbox, etc. I have to wait 3-5 seconds for properties to appear.
Is this normal? Is there any way to optimize this?
VS consumes no more than 300 Mb of RAM and there's always free memory. All the other programs work fine (SQL Management Studio, Office programs, etc.).

Thanks a lot.
Johny
Top achievements
Rank 1
 answered on 29 Nov 2011
1 answer
45 views
Can Any one Help me... I'm try this But the focus is Moving to page not to the next control.. so that i con't select state after selecting Country while im using in Keyboard..

<telerik:RadAjaxManager ID="ajaxManager1" runat="server" UpdatePanelsRenderMode="Block" >
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ajaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ddlCountry" />
                    <telerik:AjaxUpdatedControl ControlID="ddlCity" />
                    <telerik:AjaxUpdatedControl ControlID="ddlState" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ddlCountry">
            <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ddlCity" />
                    <telerik:AjaxUpdatedControl ControlID="ddlState" />
            </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ddlState">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ddlCity" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
O'Man
Top achievements
Rank 1
 answered on 29 Nov 2011
4 answers
165 views
Hello Telerik-Team,

I have some problems with the radupload:

First:
Please tell me, how to increase the width of the browse-button.

Second:
I have set the tabindex of the Rad upload Control with the property TabIndex="1", but it is not working.

I hope someone can help me
Peter Filipov
Telerik team
 answered on 29 Nov 2011
1 answer
141 views
Hi,

I'm struggling to put together what seems like it should be quite simple -

Enabling multiplefileselection on async upload and instead of simply seeing a list of 
files, seeing thumbnails for the newly-uploaded files instead.

Would anyone be able to provide me with some sample code to do this ?

Peter Filipov
Telerik team
 answered on 29 Nov 2011
2 answers
46 views
Please have a look at this jing video.

It shows 2 passes through the process of uploading documents in my app. The first pass is in IE8 native mode, the 2nd in Compatibility mode.

The page you can see is in a modal RadWindow. The page contains a Multipage control and the RadAsyncUpload control is on one of those tabs.

You will see that when more than a screenful of files is uploaded, the list tramples all over the page.

This, obviously, happens in IE7 too.

Whilst I'd be happy if the Gods made it so IE7 never happened, I'm instructed to ask if there is a way of fixing the behaviour of RadAsyncUpload in this environment.

--
Stuart
Peter Filipov
Telerik team
 answered on 29 Nov 2011
4 answers
683 views
I'm using the RadSocialShare control on a product details page in an eCommerce app and it was working fine for most products, but a few would not display the buttons.  In Chrome's javascript console I saw it was throwing the uncaught syntaxerror due to an apostrophe in the TitleToShare property's value.  As soon as I removed the apostrophe it started working....hope this helps someone else!
bojanv
Top achievements
Rank 2
 answered on 29 Nov 2011
5 answers
222 views
<script type="text/javascript">
    function focusItem(panelbar, args) {
        var item = args.get_item();
        if (item.get_level() == 0)
            item.focusFirstChild();
    }
 </script>
 
    <telerik:RadPanelBar ID="PostsRadPanelBar" runat="server" Skin="Web20"
        Font-Size="16px"  onclientitemfocus="focusItem"
        ExpandMode="SingleExpandedItem" >
        <Items>
            <telerik:RadPanelItem Text="Office" Expanded="True">
                <Items>
                    <telerik:RadPanelItem Text="Office Detail">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Addresses">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Communications">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Site Specifics">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
 
 
            <telerik:RadPanelItem Text="Positions">
                <Items>
                    <telerik:RadPanelItem Text="Position Detail">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Assignment Detail (FSO)">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
 
 
            <telerik:RadPanelItem Text="Products & Services">
                <Items>
                    <telerik:RadPanelItem Text="Products & Services Information">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
 
 
            <telerik:RadPanelItem Text="Residences">
                <Items>
                    <telerik:RadPanelItem Text="Residence Information">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
 
 
            <telerik:RadPanelItem Text="Vehicles">
                <Items>
                    <telerik:RadPanelItem Text="Vehicle Detail">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Purchase & Disposition">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
 
 
            <telerik:RadPanelItem Text="Security">
                <Items>
                    <telerik:RadPanelItem Text="Security Information">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
        </Items>
    </telerik:RadPanelBar>
I am implementing my first panelbar, simple with two levels only, at least so far. My goal is that:
(a) Page loads with the first top level item open and other items closed. (works)
(b) Page loads with the first second level item under the first top level item with focus. (doesn't work)
(c) When a second-level item is selected (including at load) Javascript is called in which I can implement an action (haven't worked on this yet)
(d) When a top level item is selected/expanded, the first second level item under that item is focused/selected (that is, I want it to highlight and also to implement an action). (this doesn't work, and is where I am mainly stuck now).

I have tried to implement the focus/highlight part of (d) through a code sample I found in the Telerik documentation using the onclientitemfocus event, and I get the following error:

htmlfile:  Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept focus.


I get this same error if I move the JS to onclientitemexpand event handler. And I get it if I set the panel bar so all the top level items are expanded.

What am I doing wrong? I have attached my code sample.

(Also, since some kind person who knows how this works is probably going to look at this, what do I need to do to get the font-size setting to make any difference? It looks like the font-size setting is ignored. Do I actually have to modify some skin class?)

Thank you very much.




Bozhidar
Telerik team
 answered on 29 Nov 2011
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?