Questions on UI for ASP.NET AJAX Forum

5 answers

147 views

Sorting Problem

RadControls version 2011.3.1305.35

I have a very simple RadGrid example that allows column sorting. I have added checkboxes to each column header. I am experiencing 2 issues when attempting to sort. The 1st, 3rd, 5th, ... (every other time) times that I click on the column header, my checkboxes disappear and the data does not sort. This is undesired behavior. The 2nd, 4th, 6th, ... times that I click on the column header, it sorts as expected and my checkboxes are visible as expected. What I would like to accomplish is:

#1 - Everytime I click on a column header, the grid sorts. I would expect the SortCommand event to get raised each time.
#2 - Everytime I click on a column header, the checkboxes are visible.

Please watch this video clip to see the what I have decribed as the issue. I would expect my breakpoint to be hit on every column sort.

http://screencast.com/t/V8OTlSGMdXSL

Here is my code:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="RadGridSorting.aspx.vb" Inherits="RadGridSorting" %>

<!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">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager runat="server" ID="mgrJS">

</telerik:RadScriptManager>

<telerik:RadGrid runat="server" ID="dgHeader" Skin="Web20" AllowSorting="true" >

<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>

</form>

</body>

</html>

Partial Class RadGridSorting

Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If Not Page.IsPostBack Then

Dim dtHeader As New DataTable

dtHeader.Columns.Add(New DataColumn("COL_ID", GetType(String)))

Dim colRow As DataRow = dtHeader.NewRow

colRow(0) = "1234567"

dtHeader.Rows.Add(colRow)

colRow = dtHeader.NewRow

colRow(0) = "2345678"

dtHeader.Rows.Add(colRow)

colRow = dtHeader.NewRow

colRow(0) = "3456789"

dtHeader.Rows.Add(colRow)

colRow = dtHeader.NewRow

colRow(0) = "4567890"

dtHeader.Rows.Add(colRow)

colRow = dtHeader.NewRow

colRow(0) = "5678901"

dtHeader.Rows.Add(colRow)

colRow = dtHeader.NewRow

colRow(0) = "6789012"

dtHeader.Rows.Add(colRow)

colRow = dtHeader.NewRow

colRow(0) = "7890123"

dtHeader.Rows.Add(colRow)

'Define columns of master table view.

For Each row As DataRow In dtHeader.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

Session("header") = dtHeader

End If

End Sub

Protected Sub dgHeader_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles dgHeader.ItemDataBound

If e.Item.ItemType = GridItemType.Header Then

Dim hdrItem As GridHeaderItem = CType(e.Item, GridHeaderItem)

For i As Integer = 2 To hdrItem.Cells.Count - 1

Dim ctrl As LinkButton = CType(hdrItem.Cells(i).Controls(0), LinkButton)

If ctrl IsNot Nothing Then

Dim val As Integer = 0

Integer.TryParse(ctrl.Text, val)

If val > 0 Then

Dim chk As New CheckBox

chk.ID = "chk" & val

hdrItem.Cells(i).Controls.Clear()

hdrItem.Cells(i).Controls.Add(chk)

hdrItem.Cells(i).Controls.Add(ctrl)

hdrItem.Cells(i).HorizontalAlign = HorizontalAlign.Center

End If

Next

End If

End Sub

Protected Sub dgHeader_NeedDataSource(ByVal source As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles dgHeader.NeedDataSource

If Session("data") Is Nothing Then

Session("data") = CreateTable()

End If

dgHeader.DataSource = Session("data")

End Sub

Private Function CreateTable() As DataTable

Dim dtHeader As DataTable = Session("header")

Dim dtData As New DataTable

For Each dr As DataRow In dtHeader.Rows

dtData.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

For i As Integer = 0 To 9

r = dtData.NewRow

For j As Integer = 0 To 6

r(j) = Generator.Next(0, 100)

Next

dtData.Rows.Add(r)

Next

Return dtData

End Function

Protected Sub dgHeader_SortCommand(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridSortCommandEventArgs) Handles dgHeader.SortCommand

Dim s As String = ""

End Sub

End Class

Thanks.

Grid

answered on 01 Feb 2012

1 answer

608 views

Disable button to avoid double-click

Hi,

I'm trying to disable the button by clicking submit (In order to avoid double-click from the user). Below the code which I'm using:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function RequestStart(sender, args) {

var submitButton = $get("<%= EditButton.ClientID %>");

submitButton.disabled = true;

}

</script>

</telerik:RadCodeBlock

<telerik:RadAjaxPanel ID="MainRadAjaxPanel" runat="server" LoadingPanelID="MainRadAjaxLoadingPanel" ClientEvents-OnRequestStart="RequestStart" >

....... The form controls ....

<asp:Button ID="EditButton" runat="server" Text="Edit" SkinID="NormalButton" OnClick="EditButton_Click" />

</telerik:RadAjaxPanel>

Since the above javascript function is needed to be used in many pages in the website, and the submit button name may be changed (For example: EditButton, SubmitButton, ChangeButton ....), I'm wonder If it is possible to find the submit button name and to disable it using the above javascript.

Please, I need your help.

Regards,
Bader

Ajax

answered on 01 Feb 2012

1 answer

35.8K+ views

Apple-interchange-newline class appearing in RadEditor

Hello,

While trying to debug an issue with the RadEditor that we're having I ran into this and am not sure why or where it's coming from.
In Design mode I create a table, for example a 2x2 table with a number in each cell.
I go into HTML mode and remove the <p><br /></p> tags.

So all I have in the HTML is the following:
<table>
<tbody>
<tr>
<td>1 </td>
<td>2 </td>
</tr>
<tr>
<td>3 </td>
<td>4 </td>
</tr>
</tbody>
</table>

Now I got back into Design mode, press the Enter key, and copy and paste the existing table.
The result is the following:
<table>
<tbody>
<tr>
<td>1 </td>
<td>2 </td>
</tr>
<tr>
<td>3 </td>
<td>4 </td>
</tr>
</tbody>
</table>
<div style="padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px; background-image: none; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">
<table>
<tbody>
<tr>
<td>1 </td>
<td>2 </td>
</tr>
<tr>
<td>3 </td>
<td>4 </td>
</tr>
</tbody>
</table>
</div>
<br class="Apple-interchange-newline">
<br>

Where did that class reference come from and why is it there?
FYI, we are using version 2011.3.1305.40. I am using the RadEditor on Chrome on a Windows 7.

Any ideas would be good.

One side question: what does FixEnclosingP literally do when you disable it? What does it do when you enable it?

Thanks,
Cameron

Editor

answered on 01 Feb 2012

1 answer

99 views

LoadingPanel and custom paging

Problem: LoadingPanel does not display when using custom paging with a RadDataPager and a RadListView.

This is on a User Control using RadAjaxManagerProxy to configure Ajax settings. The manager is working correctly because the ListView does postback and page correctly. It's just the loading panel that will not display.

The outline of the control is as follows:

-RadAjaxManagerProxy
-RadAjaxLoadingPanel
-RadTabStrip
-RadMultiPage
   -RadPageView
      -RadListView
          -RadDataPager (on ListView ItemTemplate)

I've tried moving the Loading Panel around, changing how the manager updates the controls, etc. I have not been able to make the LoadingPanel appear in any scenario. Any thoughts on what could be causing this problem?

Ajax

answered on 01 Feb 2012

3 answers

133 views

Raddock height at client side

Hi all,
How to determine the RadDock height at codebehind and also clientside.
I am not setting RAdDock height explicitly,and I'm creating docks dynamicaly from code behind.
Depending on the controls in RadDock and the content in the Controls its height varies.
Even Edit of RadDock changes the height of RAdDock.
So can anyone help me in accessing the height everytime i make changes at runtime .(Both codebehind and Clientside)
pls help me asap.its very imp
Note:I'm using dock and old raddockableobject
Thank you.

Dock

answered on 01 Feb 2012

1 answer

43 views

How to enable the xhtml code allowed in Radeditor?

Hi,

How to enable the RadEditor so that it will allow the Xhtml code also.

Thanks

General Discussions

answered on 01 Feb 2012

7 answers

669 views

resize radwindow based on content NOT onload

Hi,

I need some help. I have a radwindow with contenttemplate. i want it to behave like a regular div, or lets say like the jquery ui window where the window height increases LIVE based on html instead of calling autosize or setting width and height on every move.

what i have inside is a radasync upload, when you upload files in async, the list of files uploaded gets appended and a scroll bar appears, instead i want the window size to increase. i know i could use the client side api of radasync upload to trigger window size, but i'm interested in a clean method where the radwindow behaves like a div.

is there a hack to do it? like setting height to auto or to set display as table or something? if not, can telerik introduce such feature? i wanted to use the jquery ui, but to be consistent with the theme and ability to post back / control state from server end, i prefer radwindow.

please let me know if there is a solution.

thanks.

Window

answered on 01 Feb 2012

1 answer

49 views

Problem in RadWindow as a Content Container

Hi
I've used a RadWindow as a content container of a form.
I've placed a ComboBox in it's ContentTemplate but it seems there are some javascript problems and my ComboBox control does Not work correctly.

Thank you

General Discussions

answered on 01 Feb 2012

1 answer

147 views

View State Mode Disabled shows Select Column on Radgrid

I have created a radgrid and have set it's view state mode to disabled. Problem is it generates an extra 'select' column and cannot seem to remove it. If I remove the view state then the column disappears.

Tried setting the columns auto generate to false yet it remains persistant. Also tried forcing it to be invisible as follows...

<telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" visible="false" />

Yet it remains there.

What can I do to remove it please?

Pasted my code below. Thanks in advance for your help.

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True"

GridLines="None" AllowFilteringByColumn="True" AllowSorting="True" Height="300px"

PageSize="7" OnItemDataBound="RadGrid1_ItemDataBound"

ViewStateMode="Disabled" OnDataBound="RadGrid1_DataBound" AutoGenerateColumns="false"

SelectedItemStyle-Width="0px" CellSpacing="0">

<MasterTableView>

<Columns>

<telerik:GridBoundColumn

DataField="CODE"

HeaderText="Code"

ReadOnly="True"

SortExpression="CODE" UniqueName="CODE">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn

DataField="NAME"

HeaderText="Code"

ReadOnly="True"

SortExpression="NAME" UniqueName="NAME">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<ClientSettings>

<Selecting AllowRowSelect="True" UseClientSelectColumnOnly="false" />

<ClientEvents OnRowSelected="RowSelected" />

</ClientSettings>

</telerik:RadGrid>

Grid

answered on 01 Feb 2012

1 answer

85 views

redering problem in latest Chrome version

HI

Just today I have started seeing a strange in in Chrome browser version 16.0.912.77m on windows 7
On hover, the buttons in all skins have a grey or black line at the top (attached screen image) .

Everything is OK in Firefox, Safari, and Internet Explorer.

I can only think that the latest version has introduced the problem. Has anyone else seen this?
And what is the answer? Is there a css workaround?

I am using Q2 2010 version of the dll

Thanks

Clive

Button

answered on 01 Feb 2012