Questions on UI for ASP.NET AJAX Forum

1 answer

223 views

I implemented the second type of virtual scrolling on the following page.
http://www.telerik.com/help/aspnet-ajax/grid-virtual-scrolling.html
I created a more flexible implementation while adding 100% height functionality.

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

<style type="text/css">

html, body, form

{

height: 100%;

width: 100%;

margin: 0px;

padding: 0px;

}

</style>

</head>

<body>

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

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

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

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />

<script type="text/javascript">

var activeGrid;

function RadGrid1_OnGridCreated(sender, e) {

activeGrid = sender;

RadGrid1_Resize();

}

function RadGrid1_Resize() {

setTimeout(function () {

if (!activeGrid) return;

var scrollDiv = activeGrid.GridDataDiv;

if (scrollDiv) {

var scrollHeight = document.body.offsetHeight - scrollDiv.offsetTop;

var footer = activeGrid.GridFooterDiv;

if (footer) {

scrollHeight -= footer.offsetHeight;

}

var pager = activeGrid.PagerControl;

if (pager) {

scrollHeight -= pager.offsetHeight;

}

scrollDiv.style.height = scrollHeight - 2 + "px";

}

}, 0);

}

window.onresize = window.onload = RadGrid1_Resize;

function RadGrid1_OnScroll(sender, eventArgs) {

if (eventArgs.isOnBottom) {

var masterTableView = sender.MasterTableView;

if (masterTableView.PageSize * (masterTableView.CurrentPageIndex + 1) < masterTableView.get_virtualItemCount()) {

masterTableView.fireCommand("PageSizeIncrease", "50");

}

</script>

test

<div>

<telerik:RadGrid ID="RadGrid1" runat="server" Height="100%" PageSize="50" AllowPaging="True" AllowCustomPaging="true">

<MasterTableView Width="100%" />

<PagerStyle Visible="false" />

<ClientSettings>

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

<ClientEvents OnGridCreated="RadGrid1_OnGridCreated" OnScroll="RadGrid1_OnScroll" />

</ClientSettings>

</telerik:RadGrid>

</div>

</form>

</body>

</html>

Private Sub RadGrid1_ItemCommand(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles RadGrid1.ItemCommand

Select e.CommandName

Case "PageSizeIncrease"

RadGrid1.PageSize += e.CommandArgument

RadGrid1.Rebind()

End Select

End Sub

Private Sub RadGrid1_NeedDataSource(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles RadGrid1.NeedDataSource

Dim Table As New DataTable

Table.Columns.Add(New DataColumn("Id", GetType(Integer)))

Dim nStart As Integer = (RadGrid1.CurrentPageIndex * RadGrid1.PageSize) + 1

Dim nEnd As Integer = (RadGrid1.CurrentPageIndex + 1) * RadGrid1.PageSize

For i As Integer = nStart To nEnd

Dim Row As DataRow = Table.NewRow

Row("Id") = i

Table.Rows.Add(Row)

Next

RadGrid1.DataSource = Table

RadGrid1.VirtualItemCount = "1000"

End Sub

Grid

answered on 05 Jul 2011

1 answer

90 views

Radgrid selected Item to Selected_item table in databas.

Hi Guru's
I am working on the RadGrid control & stuck at a point where I want to basically do the following operation:

I have a button named "Update"
then a radgrid

The requirement is as follow: The user visits the site on load of the page he will see the grid with the selected items that he had selected in his last visit... we have these values from the database,

Now when he selects the new row I have a table in the database named : "userselected" I want that his userID should be added in the list with this new itemno that he has selected..

I am using entity framework to communicate to the database.

thanks in advance
SPTECH

Grid

answered on 05 Jul 2011

2 answers

168 views

radmaskedtextbox ontextchanged

<telerik:RadMaskedTextBox ID="PostalCode" runat="server" Text='<%#Bind("PostalCode")%>' 
                                  Mask="L#L #L#"  OnTextChanged="PostalCode_OnTextChanged" AutoPostBack="true" Width="50" />
I'm having trouble with the ontextchanged event of the radmaskedtextbox.

I enter my postal code into the mask and tab to the next field. It posts back and calls the ontextchanged event.
However, the first time is posts back, the text value is blank "". 
If i enter the postal code a second time, the ontextchanged event picks up the value.

It seems it needs a postback to actually change the value in the  page, but the ontextchanged event runs before the value has been changed.

Is there a workaround for this behaviour?

Input

answered on 05 Jul 2011

3 answers

53 views

TabStrip with Export Grid problem and Submit Form problem

I'm using a tabstrip control with 3 tabs.

- tab 1 is static content - works fine

- tab 2 is a RadGrid (data loads fine, paging is fine, details all fine, however commanditem export doesnt work.
- note i put the same grid in a page by itself (no tabs) and export work just fine.

- tab 3 is a form of user fields with a submit button (in buttonclick event, data is saved to sql db). When debugging form seems to work fine. i can set a break point on ButtonClick and it gets called everytime and data is properly saved. When the page is put on production server buttonClick event doesnt seem to fire. I put the exact same code outside the tabcontrol and it work perfect on production server and debug. buttonclick always fires.

I'm using whatever the newest version of rad controls is, as of this post.

thoughts?

jason

TabStrip

answered on 05 Jul 2011

4 answers

159 views

GridTemplateColumn Cascading RadComboBox Binding

Hello Everyone...

I have a problem Binding ComboBoxes. Here is my example:-
I have a table in my database which has a list of company vehicles. Another table has a complete list of any vehicles ID, vehicleMake, vehicleModel, vehicleEngineSize.

In edit mode the company vehicles can be changed colour etc. Also there are three comboboxes. 1: List all the possible Makes. Ford, Volvo etc. The second all Models and the final one all engine sizes.

So that the user is only able to select the correct combination the boxes load by EnableLoadOnDemand. I used the Telerik help file here: Help File

Ok so my problem comes when I want to update any possible changes.

THIS WORKES:-

<

telerik:GridTemplateColumn DataField="vehicleModel" HeaderText="vehicleModel"

SortExpression="vehicleModel" UniqueName="vehicleModel">

<EditItemTemplate>

<telerik:RadComboBox ID="rcb_vehicleModel" runat="server"

Text='<%#DataBinder.Eval(Container.DataItem,"vehicleModel")%>' EnableLoadOnDemand="True" OnItemsRequested="rcb_vehicleModel_ItemsRequested" AutoPostBack="true">

</telerik:RadComboBox>

</EditItemTemplate>

<ItemTemplate>

<asp:Label ID="lbl_vehicleModel" runat="server" Text='<%# Eval("vehicleModel") %>'></asp:Label>

</ItemTemplate>

<HeaderStyle Width="6em" />

</telerik:GridTemplateColumn

DOES NOT WORK:-

<

telerik:GridTemplateColumn DataField="vehicleModel" HeaderText="vehicleModel"

SortExpression="vehicleModel" UniqueName="vehicleModel">

<EditItemTemplate>

<telerik:RadComboBox ID="rcb_vehicleModel" runat="server" DataSourceID="sqlds_vehicleModel" DataTextField="vehicleModel"

DataValueField="vehicleMake" SelectedValue="<%# bind('vehicleModel') %>" AutoPostBack="True">

</telerik:RadComboBox>

</EditItemTemplate>

<ItemTemplate>

<asp:Label ID="lbl_vehicleModel" runat="server" Text='<%# Eval("vehicleModel") %>'></asp:Label>

</ItemTemplate>

<HeaderStyle Width="6em" />

</telerik:GridTemplateColumn>

As you can see in the first example there is no SelectedValue="<%# bind('vehicleModel') %>" in the above template. If I include this i get the error:-

Databinding methods such as Eval(), XPath(), and Bind() can only be used in the context of a databound control

But without the Bind the changes obviously are not returned to the table

Protected Sub rcb_vehicleModel_ItemsRequested(ByVal sender As Object, ByVal e As RadComboBoxItemsRequestedEventArgs)

Dim editedItem As GridEditableItem = CType(CType(sender, RadComboBox).NamingContainer, GridEditableItem)

Dim ddl_make As RadComboBox = DirectCast(editedItem.FindControl("rcb_vehicleMake"), RadComboBox)

Dim ddl_model As RadComboBox = DirectCast(editedItem.FindControl("rcb_vehicleModel"), RadComboBox)

Dim ddl_vehicleEngine As RadComboBox = DirectCast(editedItem.FindControl("rcb_vehicleEngineSize"), RadComboBox)

Dim SQLstr As String

SQLstr = "SELECT DISTINCT vehicleModel FROM dbo.vehicleTypes WHERE (vehicleMake = '" & ddl_make.SelectedValue.ToString & "')"

' change the data source for ContactTitle with custom code here

sqlds_vehicleModel.SelectCommand = SQLstr

ddl_model.DataValueField = "vehicleModel"

ddl_model.DataTextField = "vehicleModel"

ddl_model.DataSource = sqlds_vehicleModel

ddl_model.DataBind() '********@ERROR HERE AS ABOVE: Databinding methods such as Eval(), XPath(), and Bind() can only be used in the context of a databound control

End Sub

My question therefore is how do I rebind the changes back to the database. I think the error above is because I am calling the Bind to early but I'm not sure... Hopefully someone will have the answer as this problem is driving me mad!!!

Thanx for looking. Marcus

PS Can any code suggestions be in VB pls

Grid

answered on 05 Jul 2011

1 answer

142 views

RadPanelbar Parent item properties

Hi,

I am using RadPanelbar as menu item in my app. The PanelBar is getting created dynamically from the database. I would like to differentiate parent and child menu items. The following is what I would like to do. Please let me how I can get this functionality.

1) User should not be able to click on the Parent item.
2) Add 2 different icons to Parent and Child menu items.

The following is my code.

Public Sub BindPanelBar(ByVal ds As DataSet)
        RadPanelBar1.DataTextField = "description"
        RadPanelBar1.DataNavigateUrlField = ""
        RadPanelBar1.DataFieldID = "id"
        RadPanelBar1.DataFieldParentID = "PARENT_ID"
        RadPanelBar1.DataValueField = "Code"
        RadPanelBar1.DataSource = ds
        RadPanelBar1.DataBind()

End Sub

Protected Sub RadPanelBar1_ItemDataBound(ByVal sender As Object, ByVal e As RadPanelBarEventArgs) Handles RadPanelBar1.ItemDataBound
        Dim row As DataRowView = DirectCast(e.Item.DataItem, DataRowView)
        e.Item.Enabled = [Boolean].Parse(row("enable_status").ToString())
        e.Item.Expanded = True
        e.Item.ToolTip = e.Item.Text

End Sub

Thank you,

PanelBar

answered on 05 Jul 2011

2 answers

70 views

Rad Ajax problems in IE 8 on local machine

Hi,

I am using Telerik.Web.UI.dll 2008.02.1001.20 version of Telerik ASP.NET AJAX and finding some strange issues with only on IE 8 browser on local machine where applicaiton is deployed on both Windows 7 and Windows 2008 machine. It does not happen if the site is accessed remotely from other machines in IE 8. The examples of issues are, with RadCombobox reducing the width during AJAX call or chaning the selection. Or RadGrid disappears during AJAX refresh or when RadToolTip is displayed in AJAX. The below are the different environments tried.

In IIS 7.5, run applicaiton pool under Integrated mode and classic modes.
Windows 7 and Windows 2008 servers
specifing localhost or machinename in the url

In above different senarios, some combination resolves some issues and other combination solves other issues. But I could not figure out any one setting which resolves all these Telerik issues. (BTW, I only get these issues with telerik controls when tried with IE 8 in local machines.) As said before everything works fine when the site is accessed remotely from other machines through IE 8.

Can you please provide any workaround to solve this issue? There is no option to upgrade the telerik control to later version for me due to project schedule. also as it is working fine remotely, it seems that there are some issues with IE 8 and telerik control only in local machine.

I truly appreciate your help to resolve this issue. thanks in advance!

Ajax

answered on 05 Jul 2011

3 answers

87 views

unable to get new values from rad grid on update

Dear Team

i tried almost all the ways which i could find on internet but still unable to get the updated values from bound grid column.

plz check out my code lines.

aspx coding

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="frmViewUnitMaster.aspx.vb" Inherits="iTourism.WebForm1" %>

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

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

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

</telerik:RadScriptManager>

<div>

<table style="width:100%;">

<tr>

<td>

</td>

<td>

<asp:Button ID="btnAdd" runat="server" Text="Add" Width="69px" />

<asp:Label ID="lblMessage" runat="server" Text="Label"></asp:Label>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="UMGrid">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="UMGrid" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadGrid ID="UMGrid" runat="server" AutoGenerateColumns="False" GridLines="None"

AllowFilteringByColumn="True" AllowSorting="True" AutoGenerateEditColumn="True"

AllowPaging="True" Width="60%" ViewStateMode="Enabled" CellPadding="10"

CellSpacing="10" onupdatecommand="UMGrid_UpdateCommand" >

<ClientSettings>

<Selecting AllowRowSelect="True" />

<Scrolling AllowScroll="True" />

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

</ClientSettings>

<MasterTableView EditMode="EditForms" DataKeyNames="UnitCode">

<Columns>

<telerik:GridBoundColumn DefaultInsertValue="" UniqueName="UnitCode"

HeaderText="UnitCode" DataField="UnitCode" ReadOnly="True">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DefaultInsertValue="" UniqueName="UnitDesc"

HeaderText ="Unit Description" DataField="Description" >

</telerik:GridBoundColumn>

</Columns>

<EditFormSettings EditFormType="AutoGenerated" >

</EditFormSettings>

</MasterTableView>

</telerik:RadGrid>

</td>

<td>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

Vb Code

Imports System

Imports System.Data

Imports Telerik.Web.UI

Imports System.Data.SqlClient

Public Class WebForm1

Inherits System.Web.UI.Page

Dim objclsUnitMaster As New clsUnitMaster

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

UMGrid.AutoGenerateDeleteColumn = True

UMGrid.AutoGenerateEditColumn = True

UMGrid.DataSource = (objclsUnitMaster.GetUnitCodeList).Tables("UnitMaster")

UMGrid.DataBind()

End Sub

Protected Sub btnAdd_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnAdd.Click

Response.Redirect("frmUnitMaster.aspx")

End Sub

Private Sub UMGrid_ItemCommand(ByVal source As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles UMGrid.ItemCommand

If (e.CommandName = RadGrid.UpdateCommandName) Then

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

Dim newValues As New Hashtable

e.Item.OwnerTableView.ExtractValuesFromItem(newValues, editedItem)

'not getting the updated value

lblMessage.Text = newValues("Description").ToString

End If

End Sub

Private Sub UMGrid_NeedDataSource(ByVal source As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles UMGrid.NeedDataSource

UMGrid.DataSource = (objclsUnitMaster.GetUnitCodeList).Tables("UnitMaster")

UMGrid.DataBind()

End Sub

Public Sub UMGrid_UpdateCommand(ByVal source As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles UMGrid.UpdateCommand

' Dim editedItem As GridEditableItem = CType(e.Item, GridEditableItem)

'Dim MyUserControl As UserControl = CType(e.Item.FindControl(GridEditFormItem.EditFormUserControlID), UserControl)

Dim _UnitCode As Integer = 0

Dim _Description As String = ""

Dim _Result As Long = 0

Dim _item As GridEditableItem

_item = e.Item

Try

_UnitCode = Convert.ToInt32(DirectCast(_item("UnitCode").Controls(0), TextBox).Text)

'Unable to Get Updated Value using this also

_Description = DirectCast(_item("Description").Controls(0), TextBox).Text

_Result = objclsUnitMaster.UpdateUnitByCode(_UnitCode, _Description)

If _Result = 0 Then

lblMessage.Text = "Record Saved Successfully"

Else

lblMessage.Text = "Error While Saving Record" & " - " & _Result

End If

'UMGrid.Rebind()

Catch ex As Exception

lblMessage.Text = ex.Message

End Try

End Sub

End Class

Grid

answered on 05 Jul 2011

2 answers

188 views

open popup

Hello,

I'm trying to open a popup window (file.aspx?BillID=X) from a grid when i click the preview button but i'm not able too (i don't want to open a RadWindow)

any hint?

<telerik:RadGrid ID="DataGrid" runat="server" ClientSettings-AllowColumnsReorder="true" ClientSettings-ReorderColumnsOnClient="true" AllowPaging="True" ShowFooter="True" HorizontalAlign="NotSet" PageSize="100" Width="100%" BorderWidth="0px" FilterItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" FilterItemStyle-VerticalAlign="middle" AllowSorting="True" AllowFilteringByColumn="true">

<MasterTableView Dir="RTL" AutoGenerateColumns="False" AllowAutomaticDeletes="false" AllowAutomaticInserts="false" AllowAutomaticUpdates="false" AllowMultiColumnSorting="true" ClientDataKeyNames="BillID" DataKeyNames="BillID" CommandItemDisplay="Top">

<HeaderStyle HorizontalAlign="Center" />

<FilterItemStyle HorizontalAlign="Center" />

<NoRecordsTemplate>No Records Found.</NoRecordsTemplate>

<CommandItemTemplate>

<table id="headertable" runat="server" align="center">

<tr>

<td>

<asp:ImageButton ID="btnAdd" CommandName="Insert" ImageUrl="~/Styles/images/button_Client.jpg"

runat="server" CausesValidation="false" Style="cursor: hand" AlternateText="Insert New Loan" />

</td>

</tr>

</table>

</CommandItemTemplate>

<Columns>

<telerik:GridButtonColumn UniqueName="Edit" CommandName="Edit" ButtonType="ImageButton" ImageUrl="~/Styles/images/icon_edit.gif" Text="تعديل" HeaderText="تعديل">

<HeaderStyle Width="35px" HorizontalAlign="center" />

</telerik:GridButtonColumn>

<telerik:GridButtonColumn UniqueName="Preview" CommandName="Preview" ButtonType="ImageButton" ImageUrl="~/Styles/images/icon_preview.gif" Text="فاتورة" HeaderText="فاتورة">

<HeaderStyle Width="35px" HorizontalAlign="center" />

</telerik:GridButtonColumn>

<telerik:GridBoundColumn DataField="BillID" Visible="False" HeaderText="BillID" ReadOnly="True" SortExpression="BillID" UniqueName="BillID" />

<telerik:GridBoundColumn DataField="BillNumber" Visible="true" HeaderText="الرقم"

ReadOnly="True" SortExpression="BillNumber" UniqueName="BillNumber" />

<telerik:GridBoundColumn DataField="BillFile" Visible="true" HeaderText="الملف" ReadOnly="True"

SortExpression="BillFile" UniqueName="BillFile" />

<telerik:GridBoundColumn DataField="ClientName" Visible="true" HeaderText="اسم الزبون"

ReadOnly="True" SortExpression="ClientName" UniqueName="ClientName" />

<telerik:GridBoundColumn DataField="ClientCode" Visible="true" HeaderText="رمز الزبون"

ReadOnly="True" SortExpression="ClientCode" UniqueName="ClientCode" />

<telerik:GridBoundColumn DataField="Weight" Visible="true" HeaderText="الوزن كلغ"

ReadOnly="True" SortExpression="Weight" UniqueName="Weight" />

<telerik:GridBoundColumn DataField="BillValue" Visible="true" HeaderText="القيمة"

ReadOnly="True" SortExpression="BillValue" UniqueName="BillValue" />

<telerik:GridBoundColumn DataField="ClosingDate" Visible="true" HeaderText="تاريخ إغلاق الفاتورة"

ReadOnly="True" SortExpression="ClosingDate" UniqueName="ClosingDate" />

<telerik:GridBoundColumn DataField="ReleaseDate" Visible="true" HeaderText="السنة" ReadOnly="True" SortExpression="ReleaseDate" UniqueName="ReleaseDate" />

</Columns>

<ExpandCollapseColumn ButtonType="ImageButton" UniqueName="ExpandColumn" Visible="False">

<HeaderStyle Width="19px" />

</ExpandCollapseColumn>

<PagerStyle Mode="NextPrevNumericAndAdvanced" PageButtonCount="20" />

</MasterTableView>

<GroupPanel>

<PanelItemsStyle CellSpacing="2" />

</GroupPanel>

<ClientSettings AllowColumnsReorder="True" EnableRowHoverStyle="true">

<Selecting AllowRowSelect="true" />

</ClientSettings>

</telerik:RadGrid>

Thanks

Grid

answered on 05 Jul 2011

2 answers

79 views

Code to Show and Appointment in the Edit Form

Hi,
Is there to cause a certain appointment to open in the Advanced Form onPageLoad? Either with the codebehind or with javascript will work. If nothing else, Is there a way to simulate a click on an appointment in the collection?

Thanks,
Dan

Scheduler

answered on 05 Jul 2011