Questions on UI for ASP.NET AJAX Forum

1 answer

368 views

Hi,
We've got a RadGrid that users need to be able to add/remove columns, then export to pdf. The issue is that if there are too many columns selected, it truncates the rightmost information. Is there some way to tell the export function to either create additional pages with the extra data or compress the data to fit the page width that is set?
Thanks,
Dan Norton

Grid

answered on 22 Sep 2011

3 answers

157 views

Grid / Google Like Filtering doesn't work

Hi, I'm try to create project like "Google like filtering" and I'm using code same this demo (http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandcombo/defaultvb.aspx?product=grid)

But when I type words on RadComboBox it's doesn't auto complete I don't know how to solve it please help me

My Code
"TemplateGoogleSuggestPage.aspx"

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="TemplateGoogleSuggestPage.aspx.vb" Inherits="Template_Web_TemplateGoogleSuggestPage" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolderHeader" Runat="Server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<div id="main-content">

<div class="headName">

TemplateGoogleSuggestPage

</div>

<div class="divGrid" runat="server">

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="rg_Task">

<UpdatedControls>

<telerik:AjaxUpdatedControl LoadingPanelID="RadAjaxLoadingPanel1" ControlID="rg_Task" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server"

Skin="Telerik">

</telerik:RadAjaxLoadingPanel>

<telerik:RadGrid ID="rg_Task" runat="server" AutoGenerateColumns="False">

</telerik:RadGrid>

<asp:Button ID="bt_Confirm" runat="server" Text="ตกลง" />

<asp:Button ID="bt_Cancel" runat="server" Text="ยกเลิก" />

</div>

</asp:Content>

"TemplateGoogleSuggestPage.aspx.vb"

Imports Telerik.Web.UI

Imports TimesheetConnector.Command.TEST

Imports TimesheetEntities.Entities.TS

Imports System.Data

Imports System.Web.Services

Partial Class Template_Web_TemplateGoogleSuggestPage

Inherits System.Web.UI.Page

Dim DbConn As TEST001

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

Try

If Not IsPostBack Then

DbConn = New TEST001

ViewState("Data") = DbConn.GetFirstData

ViewState("SqlCommand") = New List(Of String)

Me.rg_Task.MasterTableView.Columns.Clear()

'RadGrid Properties

With rg_Task

'General properties

.AutoGenerateColumns = False

'Paging style

.AllowPaging = True

.PagerStyle.Mode = GridPagerMode.NextPrevAndNumeric

.MasterTableView.PageSize = 10

.PagerStyle.AlwaysVisible = True

.Width = Unit.Pixel(560)

.AllowFilteringByColumn = True

.MasterTableView.EditMode = GridEditMode.InPlace

.MasterTableView.DataKeyNames = {"taskID"}

.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.Bottom

.MasterTableView.CommandItemSettings.AddNewRecordText = "เพิ่ม"

.MasterTableView.CommandItemSettings.ShowRefreshButton = False

'Drag/Drop

.ClientSettings.AllowDragToGroup = False

End With

Dim column1 As New MyCustomFilteringColumnVB(DirectCast(ViewState("Data"), Data.DataTable))

rg_Task.MasterTableView.Columns.Add(column1)

column1.ItemStyle.Width = Unit.Percentage(1)

column1.DataField = "TaskID"

column1.HeaderText = "รหัสงาน"

column1.Visible = False

Dim column2 As New MyCustomFilteringColumnVB(DirectCast(ViewState("Data"), Data.DataTable))

rg_Task.MasterTableView.Columns.Add(column2)

column2.ItemStyle.Width = Unit.Percentage(5)

column2.DataField = "TaskName"

column2.HeaderText = "ชื่องาน"

Dim column3 As New GridEditCommandColumn

rg_Task.MasterTableView.Columns.Add(column3)

column3.ItemStyle.Width = Unit.Percentage(1)

Dim column4 As New GridButtonColumn

rg_Task.MasterTableView.Columns.Add(column4)

column4.ItemStyle.Width = Unit.Percentage(1)

column4.CommandName = "Delete"

column4.ConfirmText = "คุณต้องการลบข้อมูลชุดนี้หรือไม่?"

column4.ConfirmTitle = "คำเตือน!"

column4.Text = "ลบ"

column4.UniqueName = "DeleteColumn"

Else

rg_Task.MasterTableView.Columns(0).ItemStyle.Width = Unit.Percentage(1)

rg_Task.MasterTableView.Columns(1).ItemStyle.Width = Unit.Percentage(5)

End If

'Add ajax trigger

'Me.RadAjaxManager1.AjaxSettings.AddAjaxSetting(rg_Task, rg_Task)

Me.RadAjaxLoadingPanel1.Transparency = 30

rg_Task.DataSource = DirectCast(ViewState("Data"), Data.DataTable)

Catch ex As Exception

End Try

bt_Confirm.OnClientClick() = "javascript:confirm('คุณต้องการ ""บันทึก"" ข้อมูลหรือไม่?')"

End Sub

Protected Sub rg_Task_ColumnCreating(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridColumnCreatingEventArgs) Handles rg_Task.ColumnCreating

If e.ColumnType = GetType(MyCustomFilteringColumnVB).Name Then

e.Column = New MyCustomFilteringColumnVB(DirectCast(ViewState("Data"), DataTable))

End If

End Sub

Protected Sub rg_Task_ItemCommand(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles rg_Task.ItemCommand

If (e.CommandName = RadGrid.InitInsertCommandName) Then

rg_Task.MasterTableView.ClearEditItems()

End If

If e.CommandName = RadGrid.EditCommandName Then

e.Item.OwnerTableView.IsItemInserted = False

End If

If (e.CommandName = RadGrid.FilterCommandName) Then

For Each column As GridColumn In e.Item.OwnerTableView.Columns

column.CurrentFilterValue = String.Empty

column.CurrentFilterFunction = GridKnownFunction.NoFilter

Next

End If

End Sub

Protected Sub rg_Task_UpdateCommand(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles rg_Task.UpdateCommand

Dim editedItem As GridEditableItem = TryCast(e.Item, GridEditableItem)

Dim TaskID As String = editedItem.OwnerTableView.DataKeyValues(editedItem.ItemIndex)("taskID").ToString

Dim TaskName As String = (TryCast(editedItem("TaskName").Controls(0), TextBox)).Text

'เก็บ data ที่ยังไม่ confirm ลงใน DataTable

Dim dt As DataTable = ViewState("Data")

dt.Rows(editedItem.ItemIndex).Item("TaskName") = TaskName

ViewState("Data") = dt

rg_Task.DataSource = ViewState("Data")

rg_Task.DataBind()

'เก็บ sql command ลงใน List Of String

DbConn = New TEST001

Dim lstSQL As List(Of String) = TryCast(ViewState("SqlCommand"), List(Of String))

lstSQL.Add(DbConn.SqlCmd_UpdateTask(TaskID, TaskName))

ViewState("SqlCommand") = lstSQL

End Sub

Protected Sub rg_Task_InsertCommand(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles rg_Task.InsertCommand

Dim insertedItem As GridEditableItem = DirectCast(e.Item, GridEditableItem)

Dim TaskName As String = (TryCast(insertedItem("TaskName").Controls(0), TextBox)).Text

'เก็บ data ที่ยังไม่ confirm ลงใน DataTable

Dim dt As DataTable = ViewState("Data")

Dim lastTaskID As Integer = GetLastTaskID(dt)

Dim dr As DataRow = dt.NewRow

dr.Item("TaskName") = TaskName

dr.Item("TaskID") = lastTaskID

dt.Rows.Add(dr)

ViewState("Data") = dt

rg_Task.DataSource = ViewState("Data")

rg_Task.DataBind()

'เก็บ sql command ลงใน List Of String

DbConn = New TEST001

Dim lstSQL As List(Of String) = TryCast(ViewState("SqlCommand"), List(Of String))

lstSQL.Add(DbConn.SqlCmd_InsertTask(lastTaskID, TaskName))

ViewState("SqlCommand") = lstSQL

End Sub

Protected Sub rg_Task_DeleteCommand(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles rg_Task.DeleteCommand

Dim item As GridDataItem = DirectCast(e.Item, GridDataItem)

Dim TaskID As String = item.OwnerTableView.DataKeyValues(item.ItemIndex)("taskID").ToString

'Delete data ที่ยังไม่ confirm ลงใน DataTable

Dim dt As DataTable = ViewState("Data")

dt.Rows.RemoveAt(e.Item.DataSetIndex)

ViewState("Data") = dt

rg_Task.DataSource = ViewState("Data")

rg_Task.DataBind()

'เก็บ sql command ลงใน List Of String

DbConn = New TEST001

Dim lstSQL As List(Of String) = TryCast(ViewState("SqlCommand"), List(Of String))

lstSQL.Add(DbConn.SqlCmd_DeleteTask(TaskID))

ViewState("SqlCommand") = lstSQL

End Sub

Protected Sub bt_Confirm_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles bt_Confirm.Click

DbConn = New TEST001

DbConn.CustomExcecuteNonQuery(TryCast(ViewState("SqlCommand"), List(Of String)))

ViewState("Data") = DbConn.GetTask

ViewState("SqlCommand") = New List(Of String)

rg_Task.DataSource = ViewState("Data")

rg_Task.DataBind()

End Sub

Protected Sub bt_Cancel_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles bt_Cancel.Click

DbConn = New TEST001

ViewState("Data") = DbConn.GetTask

ViewState("SqlCommand") = New List(Of String)

rg_Task.DataSource = ViewState("Data")

rg_Task.DataBind()

End Sub

Protected Function GetLastTaskID(ByVal dataTable As DataTable) As Integer

Dim lastID As Integer = -1

If dataTable.Rows.Count <> 0 Then

For Each dr As DataRow In dataTable.Rows

If lastID < CInt(dr.Item("TaskID")) Then

lastID = CInt(dr.Item("TaskID"))

End If

Next

End If

Return lastID + 1

End Function

End Class

"MyCustomFilteringColumnVB.vb"

Imports Microsoft.VisualBasic

Imports Telerik.Web.UI

Imports System.Data

Public Class MyCustomFilteringColumnVB

Inherits GridBoundColumn

Dim dtSource As DataTable

Dim sName As String

Sub New(ByVal dataTable As DataTable)

' TODO: Complete member initialization

dtSource = dataTable

End Sub

Protected Overrides Sub SetupFilterControls(ByVal cell As TableCell)

MyBase.SetupFilterControls(cell)

cell.Controls.RemoveAt(0)

Dim rcbb_GoogleLikeFilter As New RadComboBox()

'Set combobox properties

With rcbb_GoogleLikeFilter

.ID = Me.UniqueName

.ShowToggleImage = False 'Default = False

.Skin = "Office2007"

.EnableLoadOnDemand = True 'Default = True

.AutoPostBack = True

.MarkFirstMatch = True 'Default = True

.Width = Unit.Pixel(150)

.EmptyMessage = "Search items"

.MaxHeight = Unit.Pixel(150)

End With

'Event Handling

AddHandler rcbb_GoogleLikeFilter.ItemsRequested, AddressOf Me.list_ItemRequested

AddHandler rcbb_GoogleLikeFilter.SelectedIndexChanged, AddressOf Me.list_SelectedIndexChanged

'Add ComboBox Filter

cell.Controls.AddAt(0, rcbb_GoogleLikeFilter)

cell.Controls.RemoveAt(1)

End Sub

Protected Overrides Sub SetCurrentFilterValueToControl(ByVal CustomCell As TableCell)

MyBase.SetCurrentFilterValueToControl(CustomCell)

Dim rcbb_GoogleLikeFilter As RadComboBox = DirectCast(CustomCell.Controls(0), RadComboBox)

If (Me.CurrentFilterValue <> String.Empty) Then

rcbb_GoogleLikeFilter.Text = Me.CurrentFilterValue

End If

End Sub

Protected Overrides Function GetCurrentFilterValueFromControl(ByVal CustomCell As TableCell) As String

Dim rcbb_GoogleLikeFilter As RadComboBox = DirectCast(CustomCell.Controls(0), RadComboBox)

Return rcbb_GoogleLikeFilter.Text

End Function

#Region "--- Event Handling ---"

Private Sub list_ItemRequested(ByVal o As Object, ByVal e As RadComboBoxItemsRequestedEventArgs)

DirectCast(o, RadComboBox).DataTextField = Me.DataField

DirectCast(o, RadComboBox).DataValueField = Me.DataField

DirectCast(o, RadComboBox).DataSource = dtSource

DirectCast(o, RadComboBox).DataBind()

End Sub

Private Sub list_SelectedIndexChanged(ByVal o As Object, ByVal e As RadComboBoxSelectedIndexChangedEventArgs)

Dim giFilterItem As GridFilteringItem = DirectCast(DirectCast(o, RadComboBox).NamingContainer, GridFilteringItem)

If (Me.UniqueName = "Index") Then

giFilterItem.FireCommandEvent("Filter", New Pair("EqualTo", Me.UniqueName))

End If

giFilterItem.FireCommandEvent("Filter", New Pair("Contains", Me.UniqueName))

End Sub

#End Region

End Class

Grid

answered on 22 Sep 2011

2 answers

70 views

Why chart is not change when Grid SelectedIndexChanged event??

protected void RadGrid1_SelectedIndexChanged(object sender, EventArgs e)

{

MakeChart(int.Parse(RadGrid1.SelectedIndexes[RadGrid1.SelectedIndexes.Count-1]));

}

private void MakeChart(int selind)

{

DataTable chartdt = new DataTable();

//Make Chart DataSource Here..

RadChart1.DataSource = chartdt;

RadChart1.DataBind();

}

It is simple...
One Grid , One Chart in page.
When User Click Grid's Row...
Chart does not change!!!!
Give me some help.....!!!!

Grid

answered on 22 Sep 2011

1 answer

265 views

Clear RadListView on client-side

Hi,

What is the way to delete all items from RadListView on client-side? I suppose I can use deleteItem() method but it requires an index so I need to get at least items count somehow.

I also have tried to use get_clientDataKeyValue() method but it doesn't return what I expect (array of actual items).

Thanks,
Andrey

ListView

answered on 22 Sep 2011

1 answer

110 views

Add linespace Dropdown in Rad editor

Hello Sir,
i am using rad editor control in asp.net application...when i added the dropdown of linespace then at run tiome it only shows a dropdown of linespace all other controls in radeditor get hide

so pls send me the code file that contain a line space dropdowm in editor tool bar
also i need a sample code for the selection of the items in drop downs .

regards,
Bhushan

Editor

answered on 22 Sep 2011

2 answers

122 views

Inconsistent alignment in RadGrid column



Hello,



We are experiencing strange alignment problem in one (numeric) rad grid column. Please see attached picture.

Given HorizontalAlign="Right"  and AllowScroll="True", the alignment changes after PageSize rows.  
How can we work around this?








<

telerik:RadGrid id="RadGridTreb" runat="server" AutoGenerateColumns="False"

AllowMultiRowSelection="True" AllowSorting="True" GridLines="None"

Culture="ru-RU"

Width="100%" EnableEmbeddedSkins="False" OnPreRender="RadGrid_PreRender"

Height="300px" EnableViewState="False" OnInit="RadGridTreb_Init">

<ExportSettings FileName="PlatCalendar"> </ExportSettings>

<ClientSettings AllowColumnHide="True" AllowRowHide="True" AllowColumnsReorder="True" ReorderColumnsOnClient="True">

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

<DataBinding FilterParameterType="Linq" Location="FinanceService.asmx"

SelectMethod="GetRowsTableLinq" SortParameterType="Linq">

</DataBinding>

<Scrolling AllowScroll="True" SaveScrollPosition="True" />

<Columns>

* * *

<telerik:GridCalculatedColumn DataFields="CRE_AMOUNT_EFFECT"

HeaderText="Сумма" DataType="System.Decimal"

UniqueName="CRE_AMOUNT_EFFECT" Expression="{0}">

<HeaderStyle Width="80px" HorizontalAlign="Center" ></HeaderStyle>

<ItemStyle Width="80px" HorizontalAlign="Right" ></ItemStyle >

</telerik:GridCalculatedColumn>

* * *



Best regards,

Maxim

Grid

answered on 22 Sep 2011

1 answer

100 views

VerticalLeft on nested Tabs

I have a question about how to control layout on nested tabs.

This page shows the children tabs directly below the parent tabs (my desired effect).
http://www.telerik.com/help/aspnet-ajax/tabstrip-appearance-layout.html

But when I apply orientation="VerticalLeft", the child tabs flyout to the right of the parent Tabs, see screenshot attached

How do I specify that I would prefer the layout in the documentation?

Here is my code

<telerik:RadTabStrip runat="server" ID="rtsReportMenu" Skin="Web20" Orientation="VerticalLeft" MultiPageID="RadMultiPage1">

<Tabs >

<telerik:RadTab runat="server" value="rtCourse" Text="Training Reports">

<Tabs>

<telerik:RadTab runat="server" value="rtCourseCompare" Text="Training Comparison Reports" PageViewID="RadPageViewBarCompare" >

</telerik:RadTab>

<telerik:RadTab runat="server" value="rtCourseTrend" Text="Training Trending Reports" PageViewID="RadPageViewBarTrend" >

</telerik:RadTab>

<telerik:RadTab runat="server" value="rtCourseTrend" Text="Outlier Reports" PageViewID="RadPageViewBottom5">

</telerik:RadTab>

</Tabs>

</telerik:RadTab>

<telerik:RadTab runat="server" value="rtSurvey" Text="Survey Reports" >

<Tabs>

<telerik:RadTab runat="server" value="rtSurveyCompare" Text="Survey Comparison Reports" PageViewID="RadPageViewBarCompare">

</telerik:RadTab>

<telerik:RadTab runat="server" value="rtSurveyTrend" Text="Survey Trending Reports" PageViewID="RadPageViewLineTrend">

</telerik:RadTab>

</Tabs>

</telerik:RadTab>

<telerik:RadTab runat="server" value="rtUsage" Text="Usage Reports" PageViewID="RadPageViewUsageLine">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

TIA

TabStrip

answered on 22 Sep 2011

1 answer

56 views

Load on Demand issue

Hi,
Just implemented my first RADTreeList using load on demand as I have a pretty deep and large structure. My tree will be displaying a number of distinct types of node. Some of which can have children and others never can. My problem is that at the time of populating the tree I do not seem to be able to flag that specific nodes cannot be expanded. As such the tree looks a bit messy as probably only about 30% of the nodes support expansion.

My previous toolkit from Infragistics did allow the rowcreating event to be trapped at which point you could change characteristics such as clearing the 'expand allowed' flag. Is this possible or will I have to live with the fact that the expansion indicators will be visible for all nodes?

TreeList

answered on 22 Sep 2011

4 answers

79 views

Telerik Menu

hi ,

i am not being able to set proper width of the child dropdown items in the menu . also getting an extra vertical line , something like a separator .
Following is the css used -

.RadMenu_Css4,
.RadMenu_Css4.rmGroup li
{
background-image: url(../Images/Menutab_normal.png);
    font-family: Arial;
    font-size: 11px;
    text-decoration: none;
    color:White;
    Width: 145px;
    Height: 20px;
    text-align:left;
    text-indent:8px;
    font-weight:normal;
}

ASPX code
-------------

<telerik:RadMenu ID="RadMenu1" runat="server" Width="100%" EnableShadows="true" EnableEmbeddedSkins="false"
                         OnClientItemClicking="fnMenuClick" OnClientMouseOver="fnSubMenuDisplay" Skin="Css4">

                    <Items>

                        <telerik:RadMenuItem Text="My WhiteBoard" Width="14%">
                        </telerik:RadMenuItem>

                        <telerik:RadMenuItem Text="Job Activity" Width="14%">
                            <Items>
                                <telerik:RadMenuItem Text="Job Management">
                                 <GroupSettings Width="120px" />
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Tool Collar Order">
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Shipping Monitor">
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Bit Run Activity">
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Daily Activity Report">
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Rig Packet Log">
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Status Board">
                                </telerik:RadMenuItem>
                            </Items>
                        </telerik:RadMenuItem>

</Items>
</telerik:RadMenu>

secondly , need to know how can i use an arrow in the dropdown menu .

Regards,
Anu

Menu

answered on 22 Sep 2011

3 answers

303 views

RadAjaxManager updates all controls on post-back

I am trying to configure RadAjaxManager to update some RadDockZones in the page while not updating an IFrame.

When I configure RadAjaxManager like below, everything works fine and the RadDockZones do not cause the IFrame to update.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="pnlDockZoneLeft">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlDockZoneContent" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="pnlDockZoneContent">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlDockZoneLeft" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

If I attempt to add another AjaxSetting to update the IFrame when the filter panel is updated, like so:

<telerik:AjaxSetting AjaxControlID="filterPane">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlIFrame" />

</UpdatedControls>

</telerik:AjaxSetting>

Any update to any of the Ajaxified controls causes the IFrame to update and lose its settings. Here is part of the response body from the post-back when I click on one of the RadDocks:

504|updatePanel|pnlDockZoneContentPanel|<div id="pnlDockZoneContent">

<div id="dockZoneContent" class="RadDockZone RadDockZone_Outlook rdVertical" style="border-width:0px;min-width:10px;min-height:10px;display:none;">

<div class="RadDock RadDock_Default rdPlaceHolder" id="dockZoneContent_D" style="display:none;">

</div><input id="dockZoneContent_ClientState" name="dockZoneContent_ClientState" type="hidden" />

</div>

</div>|362|updatePanel|pnlIFramePanel|<div id="pnlIFrame" class="content" style="width:100%;">

<iframe id="IFrame1" name="IFrame1" frameborder="0" marginwidth="0" scrolling="no" style="margin: 0; height: 525px" width="100%" height="100%" src="Profile.aspx?Redirect=True">

</iframe>

</div>

Is there any way to set RadAjaxManager to only update panels that are in the UpdatedControls list and leave the ones that are ajaxified but not in the UpdatedControls list?

Ajax

answered on 22 Sep 2011