Questions on UI for ASP.NET AJAX Forum

3 answers

130 views

[Solved] problem with updating table in SQL database using radgrid

hi i have a vb web app. im using a radgrid to display the information from a SQL view and the popup edit form to edit the information in a SQL table the radgrid works and the data from the table is binded to the edit components but when i click the update button it returns a message in visual studio i have attached a screen print.
Any help to get the update working would be much appreciated.

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

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

<script type="text/javascript">

function RowDblClick(sender, eventArgs) {

sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical());

}

</script>

</telerik:RadCodeBlock>

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

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

</telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

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

IsSticky="True">

</telerik:RadAjaxLoadingPanel>

<div style="position: static">

<telerik:RadGrid ID="RadGrid1" Skin="Office2010Blue" runat="server"

AllowAutomaticInserts="True" AllowAutomaticUpdates="True"

DataSourceID="SqlDataSource1"

CellSpacing="0" GridLines="None"

AutoGenerateColumns="false">

<MasterTableView EditMode="PopUp" CommandItemDisplay="Top"

DataKeyNames="Log_ID">

<Columns>

<telerik:GridEditCommandColumn HeaderStyle-Width="40px">

</telerik:GridEditCommandColumn>

<telerik:GridBoundColumn DataField="Log_ID" HeaderText="Log_ID" UniqueName="Log_ID" HeaderStyle-Width="50px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="VUpdated" HeaderText="Updated" UniqueName="VUpdated">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="VWho" HeaderText="Who" UniqueName="VWho">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="VCompany" HeaderText="Company" UniqueName="VCompany">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="VContact" HeaderText="Contact" UniqueName="VContact">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn DataField="VNotes" HeaderText="Notes" UniqueName="VNotes">

<ItemTemplate>

<div style="width:70px;height:19px;overflow:hidden">

<%# DataBinder.Eval(Container.DataItem, "VNotes")%>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="VSR" HeaderText="SR" UniqueName="VSR">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="VLocation" HeaderText="Location" UniqueName="VLocation">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="VDue_Date" HeaderText="Due_Date" UniqueName="VDue_Date">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="VComplete_Flag" HeaderText="Complete" UniqueName="VComplete_Flag">

</telerik:GridBoundColumn>

</Columns>

<EditFormSettings InsertCaption="Add new item" CaptionFormatString="Edit Log_ID: {0}" CaptionDataField="Log_ID" EditFormType="Template" PopUpSettings-Modal="true">

<PopUpSettings Modal="true" Width="900px" />

<FormTemplate>

<table id="table1" cellspacing="1" cellpadding="1" width="250" border="0">

<tr>

<td>

Log_ID:

</td>

<td>

<asp:Label ID="lblLog_ID" runat="server" Text='<%# Bind( "Log_ID" ) %>'></asp:Label>

</td>

<td rowspan="9">

<telerik:RadGrid ID="RadGrid2" runat="server" Width="400px" DataSourceID="SqlDataSource2" AutoGenerateColumns="False">

<MasterTableView>

<Columns>

<telerik:GridBoundColumn DataField="Who" HeaderText="Who" UniqueName="Who"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Created" HeaderText="Created" UniqueName="Created"></telerik:GridBoundColumn>

<telerik:GridTemplateColumn DataField="Comments" HeaderText="Comments" UniqueName="Comments">

<ItemTemplate>

<asp:ListBox ID="ListBox1" runat="server"></asp:ListBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="Action_Type" HeaderText="Action" UniqueName="Action_Type"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Action_Date" HeaderText="Action_Date" UniqueName="Action_Date"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Due_Date" HeaderText="Due_Date" UniqueName="Due_Date"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Complete_Flag" HeaderText="Complete" UniqueName="Complete_Flag"></telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</td>

</tr>

<tr>

<td>

Updated:

</td>

<td>

<asp:Label ID="lblUpdated" runat="server" Text='<%# Bind( "Updated" ) %>'></asp:Label>

</td>

</tr>

<tr>

<td>

Who:

</td>

<td>

<asp:Label ID="lblWho" runat="server" Text='<%# Bind( "Who" ) %>'></asp:Label>

</td>

</tr>

<tr>

<td>

Company:

</td>

<td>

<asp:TextBox ID="txtCompany" runat="server" Text='<%# Bind( "Company") %>' TabIndex="2">

</asp:TextBox>

</td>

</tr>

<tr>

<td>

Contact

</td>

<td>

<asp:TextBox ID="txtContact" Text='<%# Bind( "contact") %>' runat="server" TabIndex="9">

</asp:TextBox>

</td>

</tr>

<tr>

<td>

Header

</td>

<td>

<asp:TextBox ID="txtNotes" Text='<%# Bind( "Notes") %>' runat="server" TabIndex="8">

</asp:TextBox>

</td>

</tr>

<tr>

<td>

SR:

</td>

<td>

<asp:TextBox ID="txtSR" Text='<%# Bind( "SR") %>' runat="server" TabIndex="9">

</asp:TextBox>

</td>

</tr>

<tr>

<td>

Location:

</td>

<td>

<asp:TextBox ID="txtLocation" Text='<%# Bind( "Location") %>' runat="server" TabIndex="11">

</asp:TextBox>

<%--<telerik:RadComboBox ID="RadComboBox1" SelectedValue='<%# Bind( "Location") %>' runat="server" Skin="Office2010Blue">

</telerik:RadComboBox>--%>

</td>

</tr>

<tr>

<td>

Due_Date:

</td>

<td>

<telerik:RadDateTimePicker ID="RadDateTimePicker1" DbSelectedDate='<%# Bind( "Due_Date") %>' runat="server">

<Calendar ID="Calendar2" runat="server" EnableKeyboardNavigation="true">

</Calendar>

<DateInput ToolTip="Date input" runat="server"></DateInput>

</telerik:RadDateTimePicker>

</td>

</tr>

<tr>

<td>

Complete:

</td>

<td>

<telerik:RadComboBox ID="RadDropDownList1" SelectedValue='<%# Bind( "Complete_Flag") %>' runat="server" Skin="Office2010Blue">

<Items>

<telerik:RadComboBoxItem Value="1" Text="Yes" />

<telerik:RadComboBoxItem Value="2" Text="No" />

</Items>

</telerik:RadComboBox>

</td>

</tr>

</Table>

<table id="Table2" style="width: 100%">

<tr>

<td align="right" colspan="2">

<asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="images/btnUpdate.png" CausesValidation="False" CommandName='<%# Iif (TypeOf Container is GridEditFormInsertItem, "PerformInsert", "Update") %>'/>

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="images/btnCancel.png" CausesValidation="False" CommandName="Cancel"/>

</td>

</tr>

</table>

</FormTemplate>

</EditFormSettings>

</MasterTableView>

<ClientSettings>

<Resizing AllowColumnResize="False" ClipCellContentOnResize="true" AllowResizeToFit="True" />

<ClientEvents OnRowDblClick="RowDblClick"></ClientEvents>

<Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="550px" />

</ClientSettings>

<FilterMenu EnableImageSprites="False"></FilterMenu>

</telerik:RadGrid>

</div>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:MYSQL_ISDB %>"

ProviderName="<%$ ConnectionStrings:MYSQL_ISDB.ProviderName %>"

SelectCommand="SELECT t_diary_all.Log_ID, vrqsummary.VUpdated, vrqsummary.VWho, vrqsummary.VCompany, vrqsummary.VContact, vrqsummary.VNotes, vrqsummary.VSR, vrqsummary.VLocation, vrqsummary.VDue_Date, vrqsummary.VComplete_Flag,

t_diary_all.Updated, t_diary_all.Who, t_diary_all.Company, t_diary_all.Contact, t_diary_all.Notes, t_diary_all.SR, t_diary_all.Location, t_diary_all.Due_Date, t_diary_all.Complete_Flag FROM t_diary_all INNER JOIN vrqsummary ON t_diary_all.Log_ID = vrqsummary.Log_ID"

InsertCommand="INSERT INTO [t_diary_all] ([Log_ID], [Updated], [Who], [Company], [contact], [Notes], [SR], [Loc], [Due_Date], [Complete_Flag]) VALUES (@Log_ID, @Updated, @Who, @Company, @contact, @header, @SR, @Loc, @Due_Date, @Complete)"

UpdateCommand="UPDATE [t_diary_all] SET [Updated] = @Updated, [Who] = @Who, [Company] = @Company, [Contact] = @Contact, [Notes] = @Notes, [SR] = @SR, [Loc] = @Loc, [Due_Date] = @Due_Date, [Complete_Flag] = @Complete_Flag WHERE [Log_ID] = @Log_ID">

<InsertParameters>

<asp:Parameter Name="Updated" Type="DateTime" />

<asp:Parameter Name="Who" Type="String" />

<asp:Parameter Name="Company" Type="String" />

<asp:Parameter Name="Contact" Type="Int32" />

<asp:Parameter Name="Notes" Type="String" />

<asp:Parameter Name="SR" Type="String" />

<asp:Parameter Name="Location" Type="Int32" />

<asp:Parameter Name="Due_Date" Type="DateTime" />

<asp:Parameter Name="Complete_Flag" Type="Int32" />

</InsertParameters>

<UpdateParameters>

<asp:Parameter Name="Updated" Type="DateTime" />

<asp:Parameter Name="Who" Type="String" />

<asp:Parameter Name="Company" Type="String" />

<asp:Parameter Name="Contact" Type="Int32" />

<asp:Parameter Name="Notes" Type="String" />

<asp:Parameter Name="SR" Type="String" />

<asp:Parameter Name="Location" Type="Int32" />

<asp:Parameter Name="Due_Date" Type="DateTime" />

<asp:Parameter Name="Complete_Flag" Type="Int32" />

<asp:Parameter Name="Log_ID" Type="Int32" />

</UpdateParameters>

</asp:SqlDataSource>

<asp:SqlDataSource ID="SqlDataSource2" runat="server"

ConnectionString="<%$ ConnectionStrings:T_Diary_Actions %>"

ProviderName="<%$ ConnectionStrings:T_Diary_Actions.ProviderName %>"

SelectCommand="SELECT Log_Line_ID, Log_ID, Who, Created, Comments, Action_Type, Action_Date, Due_Date, Complete_Flag FROM t_diary_actions WHERE Log_ID = '4108'">

</asp:SqlDataSource>

Grid

answered on 24 Apr 2013

3 answers

460 views

demo shopping cart

Hi,

I found a demo of a shopping cart (url:http://demos1x.telerik.com/aspnet/Controls/Examples/Integration/Ajax/GridAndTabstrip/DefaultVB.aspx?product=controls)

Is there any way that i can download the project?

Greetings,

Frank

General Discussions

answered on 24 Apr 2013

1 answer

73 views

Find Nested Radgrid from button click

I want to refresh or rebind a nested radgrid from a radbutton located outside of the grid. How do I get to the nested radgrid from here?

    Private Sub rbtnSave_Click(sender As Object, e As System.EventArgs) Handles rbtnSave.Click
        Try
            If SaveBuilding() Then
                'Dim GrantProjectID As Integer = Convert.ToInt32(Session(Const_Session.SELECTED_GRANT_PROJECT_ID).ToString)
                'grvGroupBuildings.DataSource = GetGroupAgenciesDataSource(GrantProjectID)
                'grvGroupBuildings.DataBind()
                ShowMessage("Update saved!")
            End If
        Catch ex As Exception
            ShowError(ex.Message)
        End Try
    End Sub

Grid

answered on 24 Apr 2013

1 answer

121 views

Radgrid grouping doesn't work

i'm using radgrid but the grouping doesn't work
Here's my code:

<telerik:RadGrid ID="gvEvenement" runat="server" AllowPaging="True" CellSpacing="0"

Culture="fr-FR" AllowSorting="True" AutoGenerateColumns="False" OnNeedDataSource="gvEvenement_NeedDataSource"

Skin="WebBlue" GridLines="None" OnPreRender="gvEvenement_PreRender" AllowMultiRowSelection="True"

ShowFooter="True" AllowAutomaticInserts="True" AllowCustomPaging="True" AllowFilteringByColumn="True"

ShowGroupPanel="True" >

<ClientSettings EnablePostBackOnRowClick="false" EnableRowHoverStyle="true" AllowColumnsReorder="true"

AllowDragToGroup="True">

Grid

answered on 24 Apr 2013

3 answers

119 views

Change row background to picture

I am trying to change the row background to a picture if the cell text equals EOL. Tried changing the attributes but cannot find the correct syntax. and is there a way to format the size of the jpg doing this as well to change the height and width.

Protected Sub myRadGrid_ItemDataBound(sender As Object, e As GridItemEventArgs) Handles myRadGrid.ItemDataBound

If TypeOf e.Item Is GridDataItem Then

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

Dim Cell As TableCell = item("Type")

Dim text As String = Cell.Text

If text = "EOL" Then

item.Attributes.Add(Style.background = "../Images/wallpaper_big-wDD_cs.jpg")

End If

End Sub

Grid

answered on 24 Apr 2013

4 answers

121 views

Show 100 Char's for GridHTMLEditorColumn ?

Hi,

I am binding html content to GridHTMLEditorColumn in the radgrid.

aspx :

<telerik:GridHTMLEditorColumn ShowSortIcon="true" SortExpression="Message" FilterControlAltText="Filter Message column"

DataField="Message" FilterControlWidth="250px" DataType="System.String" UniqueName="Message"

HeaderText="Email Message">

</telerik:GridHTMLEditorColumn>

I would like to show only 100 char's for GridHTMLEditorColumn.
example : Miss X, please identify who is the most adapt in using the system.Then prepare for an online demonstration during...

If I am using SearchGrid_ItemDataBound then it's not working...

If TypeOf e.Item Is GridDataItem Then

Dim dataBoundItem As GridDataItem = TryCast(e.Item, GridDataItem)

If dataBoundItem("Message").Text.Length > 100 Then

dataBoundItem("Message").Text = dataBoundItem("Message").Text.Substring(0, 100) & "..."

End If

Please help me on this.. .Thanks

Grid

answered on 24 Apr 2013

3 answers

106 views

Edit Form Java Script Error

When I double click on an appoitment to open the edit form, I get the following error:

Unhandled exception at line 1, column 10602 in http://localhost:49934/bundles/WebFormsJs?v=q9E9g87bUDaS624mcBuZsBaM8xn2E5zd-f4FCdIk2cA1

0x800a1391 - Microsoft JScript runtime error: 'Page_Validators' is undefined

Could someone please help me fix this issue?

Thank you.

Scheduler

answered on 24 Apr 2013

6 answers

119 views

[Solved] Server Side Open with Animation

HI,

I'm not sure if there are other controls that might do this better than the panel but here goes....

I have a search panel. When the user has entered all the search parameters and clicked 'search' - I'd like the search panel to close "with animation" and the results panel to open "with animation". Obviously the search function needs to be processed on the server during this,
I've looked around and tried the ACT but no joy as yet.

All help appreciated.

Cheers,
Jon

PanelBar

answered on 24 Apr 2013

5 answers

136 views

[Solved] RadDocks & Dynamic TabStrip

Hi there.

What I'm trying to achieve here is to get a dynamic TabStrip to which I can create new tabs.
Each of those tabs include a pageview.
Each of those pageview embeds a usercontrol.
Those usercontrols are consisting in a RadDockLayout + RadDockZone + a Button to create new docks on the current selected tab/pageview.

So far nothing that sounds too fancy or hard to create. The current code works fine:

Here's my "Default.aspx". You can notice that I'm not currently using the RadAjaxManager to Ajaxify my controls.
In this page I'm creating my dynamic TabStrip control that let you create and close tabs via a close button.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

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

<link href="css/lines.css" rel="stylesheet" type="text/css" />

<link href="css/colorpicker.css" rel="stylesheet" type="text/css" />

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />

</head>

<body>

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

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

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script src="js/colorpicker.js" type="text/javascript"></script>

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

<script type="text/javascript">

function closeTab(tabText) {

try {

var tabStrip = $find("<%= rtsLines.ClientID %>");

var multiPage = $find("<%= mpLines.ClientID %>");

var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");

var tab = tabStrip.findTabByText(tabText);

var pageView = tab.get_pageView();

var tabToSelect = tab.get_nextTab();

if (!tabToSelect)

tabToSelect = tab.get_previousTab();

tabStrip.get_tabs().remove(tab);

multiPage.get_pageViews().remove(pageView);

if (ajaxManager != null) {

ajaxManager.ajaxRequest("CloseTab|" + tabText);

} else {

console.log("ajaxManager is null");

}

if (tabToSelect)

tabToSelect.set_selected(true);

}

catch (err) {

console.log(err.message);

}

</script>

</telerik:RadCodeBlock>

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

<%-- <AjaxSettings>

<telerik:AjaxSetting AjaxControlID="rbtAddLine">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rtsLines"/>

<telerik:AjaxUpdatedControl ControlID="mpLines" LoadingPanelID="ralpLines" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>--%>

</telerik:RadAjaxManager>

<telerik:RadButton ID="rbtAddLine" runat="server" OnClick="rbtAddLine_Clicked" Text="New">

</telerik:RadButton>

<div>

<telerik:RadTabStrip ID="rtsLines" runat="server" CssClass="rtsLines" MultiPageID="mpLines"

OnTabCreated="rtsLines_TabCreated">

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="mpLines" runat="server" CssClass="multiPageViewContent"

Height="400" Width="900" OnPageViewCreated="mpLines_PageViewCreated">

</telerik:RadMultiPage>

<telerik:RadAjaxLoadingPanel ID="ralpLines" runat="server">

</telerik:RadAjaxLoadingPanel>

</div>

</form>

</body>

</html>

Here's the code behind:

using System;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Configuration;

using System.Web.Security;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using Telerik.Web.UI;

using System.Collections.Generic;

using TabsStrips.usercontrol;

public partial class Default : System.Web.UI.Page

{

private static int _id = 0;

private string tabName;

protected void Page_Load(object sender, EventArgs e)

{

}

protected void rbtAddLine_Clicked(object sender, EventArgs e)

{

try

{

tabName = "New_" + _id++;

rtsLines.Tabs.Add(new RadTab(tabName));

var pv = new RadPageView();

pv.ID = "pv" + tabName;

pv.Height = Unit.Pixel(200);

pv.Width = Unit.Pixel(800);

mpLines.PageViews.Add(pv);

}

catch (Exception ex)

{

throw;

}

protected void rtsLines_TabCreated(object sender, RadTabStripEventArgs e)

{

try

{

HtmlImage img1 = new HtmlImage();

img1.Src = "~/images/close.gif";

img1.Attributes.Add("class", "closeTab");

Label lbl = new Label();

lbl.Text = e.Tab.Text;

img1.Attributes.Add("onclick", "closeTab('" + e.Tab.Text + "');");

e.Tab.Controls.Add(img1);

e.Tab.Controls.Add(lbl);

}

catch (Exception ex)

{

throw;

}

protected void mpLines_PageViewCreated(object sender, RadMultiPageEventArgs e)

{

UserControl LineBuilder = (UserControl)this.LoadControl("usercontrol/LineBuilderV2.ascx");

LineBuilder.ID = "LineBuilder_" + e.PageView.UniqueID;

e.PageView.Controls.Add(LineBuilder);

}

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)

{

try

{

var command = e.Argument.Split('|')[0];

var args = e.Argument.Split('|').Length > 0 ? e.Argument.Split('|')[1] : null;

switch (command)

{

case "CloseTab":

var tab = rtsLines.FindTabByText(args, true);

var pv = tab.PageView;

rtsLines.Tabs.Remove(tab);

mpLines.PageViews.Remove(pv);

break;

default:

break;

}

catch (Exception ex)

{

throw;

}

Here's now the content of my usercontrol embedding the RadDockZone:
Note that I'm using a "hidden" but still "visible" asp update panel to create my new docks, as described in most of the Telerik online examples

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="LineBuilderV2.ascx.cs"

Inherits="TabsStrips.usercontrol.LineBuilderV2" %>

<telerik:RadAjaxLoadingPanel ID="RalpLineBuilder" runat="server" MinDisplayTime="500">

</telerik:RadAjaxLoadingPanel>

<telerik:RadScriptBlock ID="rsbLine" runat="server">

<script type="text/javascript">

$(document).ready(function() {

var elt = $('#<%= PCommands.ClientID %>');

var stops = $('#<%= RdzLineBuilder.ClientID %>');

$(elt).find(".colorpicker2").ColorPicker({

color: '#0000ff',

onShow: function(colpkr) {

$(colpkr).fadeIn(500);

return false;

},

onHide: function(colpkr) {

$(colpkr).fadeOut(500);

return false;

},

onChange: function(hsb, hex, rgb) {

$(elt).find(".colorpicker2 div").css('backgroundColor', '#' + hex);

$(stops).find(".<%= RdzLineBuilder.ClientID %>").css('backgroundColor', '#' + hex);

}

});

var currentLoadingPanel = null;

var currentUpdatedControl = null;

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

function BeginRequestHandler(sender, args) {

currentLoadingPanel = $find("<%= RalpLineBuilder.ClientID %>");

currentUpdatedControl = $find("<%= PLineBuilder.ClientID %>");

currentLoadingPanel.show(currentUpdatedControl);

}

function EndRequestHandler(sender, args) {

if (currentLoadingPanel != null)

currentLoadingPanel.hide(currentUpdatedControl);

currentUpdatedControl = null;

currentLoadingPanel = null;

}

});

</script>

</telerik:RadScriptBlock>

<asp:Button ID="ButtonAddStop" runat="server" OnClick="ButtonAddStop_Click" Text="Add Stop" />

<asp:UpdatePanel ID="UpLineBuilder" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional" >

<ContentTemplate>

<asp:Panel ID="PLineBuilder" runat="server" Width="800px">

<telerik:RadDockLayout ID="RdlLineBuilder" runat="server" OnSaveDockLayout="RdlLineBuilder_SaveDockLayout"

OnLoadDockLayout="RdlLineBuilder_LoadDockLayout">

<telerik:RadDockZone ID="RdzLineBuilder" runat="server" Width="100%" Height="200px"

Orientation="Horizontal">

</telerik:RadDockZone>

</telerik:RadDockLayout>

</asp:Panel>

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTrigger ControlID="ButtonAddStop" EventName="Click" />

</Triggers>

</asp:UpdatePanel>

<asp:Panel ID="PCommands" runat="server">

<div class="colorpicker2">

<div>

</div>

</asp:Panel>

<div style="width: 0px; height: 0px; overflow: hidden; position: absolute; left: -10000px;">

Hidden UpdatePanel, which is used to help with saving state when minimizing, moving

and closing docks. This way the docks state is saved faster (no need to update the

docking zones).

<asp:UpdatePanel ID="UpLineBuilderHidden" runat="server">

</asp:UpdatePanel>

</div>

Here's the code behind:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Web.UI;

using System.Web.UI.HtmlControls;

namespace TabsStrips.usercontrol

{

public partial class LineBuilderV2 : System.Web.UI.UserControl

{

private string _suffixID;

private List<DockState> CurrentDockStates

{

get

{

//Store the info about the added docks in the session. For real life

// applications we recommend using database or other storage medium

// for persisting this information.

List<DockState> _currentDockStates = (List<DockState>)Session["CurrentDockStates_" + this.ID];

if (Object.Equals(_currentDockStates, null))

{

_currentDockStates = new List<DockState>();

Session["CurrentDockStates_" + this.ID] = _currentDockStates;

}

return _currentDockStates;

}

set

{

Session["CurrentDockStates_" + this.ID] = value;

}

protected void Page_Load(object sender, EventArgs e)

{

_suffixID = this.ClientID.Replace("-", "").Replace("$", "");

this.Page.LoadComplete += new EventHandler(Page_LoadComplete);

}

void Page_LoadComplete(object sender, EventArgs e)

{

ScriptManager.RegisterStartupScript(this, this.GetType(), "LineBuilder_" + _suffixID,

@"var currentLoadingPanel = null;

var currentUpdatedControl = null;

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

function BeginRequestHandler(sender, args) {

currentLoadingPanel = $('#" + RalpLineBuilder.ClientID + @"');

currentUpdatedControl = $('#" + PLineBuilder.ClientID + @"');

currentLoadingPanel.show(currentUpdatedControl);

}

function EndRequestHandler(sender, args) {

if (currentLoadingPanel != null)

currentLoadingPanel.hide(currentUpdatedControl);

currentUpdatedControl = null;

currentLoadingPanel = null;

}", true);

}

protected void Page_Init(object sender, EventArgs e)

{

//Recreate the docks in order to ensure their proper operation

for (int i = 0; i < CurrentDockStates.Count; i++)

{

RadDock dock = CreateRadDockFromState(CurrentDockStates[i]);

//We will just add the RadDock control to the RadDockLayout.

// You could use any other control for that purpose, just ensure

// that it is inside the RadDockLayout control.

// The RadDockLayout control will automatically move the RadDock

// controls to their corresponding zone in the LoadDockLayout

// event (see below).

RdlLineBuilder.Controls.Add(dock);

//We want to save the dock state every time a dock is moved.

CreateSaveStateTrigger(dock);

if (CurrentDockStates[i].Closed == true)

{

dock.Visible = false;

}

protected void RdlLineBuilder_LoadDockLayout(object sender, DockLayoutEventArgs e)

{

//Populate the event args with the state information. The RadDockLayout control

// will automatically move the docks according that information.

foreach (DockState state in CurrentDockStates)

{

e.Positions[state.UniqueName] = state.DockZoneID;

e.Indices[state.UniqueName] = state.Index;

}

protected void RdlLineBuilder_SaveDockLayout(object sender, DockLayoutEventArgs e)

{

//Save the dock state in the session. This will enable us

// to recreate the dock in the next Page_Init.

CurrentDockStates = RdlLineBuilder.GetRegisteredDocksState();

}

private RadDock CreateRadDockFromState(DockState state)

{

HtmlGenericControl div = new HtmlGenericControl("div");

div.Attributes.Add("class", RdzLineBuilder.ClientID);

div.Style.Add("width", "100px");

div.Style.Add("height", "100px");

div.Style.Add("background-color", "White");

RadDock dock = new RadDock();

dock.DockMode = DockMode.Docked;

dock.ID = string.Format("RadDock{0}", state.UniqueName);

dock.ApplyState(state);

dock.ContentContainer.Controls.Add(div);

dock.Command += new DockCommandEventHandler(dock_Command);

dock.Commands.Add(new DockCloseCommand());

return dock;

}

void dock_Command(object sender, DockCommandEventArgs e)

{

if (e.Command.Name == "Close")

{

ScriptManager.RegisterStartupScript(

UpLineBuilderHidden,

this.GetType(),

"RemoveDock",

string.Format(@"function _removeDock() {{

Sys.Application.remove_load(_removeDock);

$find('{0}').undock();

$get('{1}').appendChild($get('{0}'));

$find('{0}').doPostBack('DockPositionChanged');

}};

Sys.Application.add_load(_removeDock);", ((RadDock)sender).ClientID, UpLineBuilderHidden.ClientID),

true);

CurrentDockStates.Remove(((RadDock)sender).GetState());

}

private RadDock CreateRadDock()

{

HtmlGenericControl div = new HtmlGenericControl("div");

div.Attributes.Add("class", RdzLineBuilder.ClientID);

div.Style.Add("width", "100px");

div.Style.Add("height", "100px");

div.Style.Add("background-color", "White");

RadDock dock = new RadDock();

dock.DockMode = DockMode.Docked;

dock.UniqueName = Guid.NewGuid().ToString().Replace("-", "a");

dock.ID = string.Format("RadDock{0}", dock.UniqueName);

dock.Title = "Stop";

dock.Text = string.Format("Added at {0}\n{1}", DateTime.Now, dock.UniqueName);

dock.ContentContainer.Controls.Add(div);

dock.Width = Unit.Pixel(220);

dock.Height = Unit.Pixel(200);

dock.Command += new DockCommandEventHandler(dock_Command);

dock.Commands.Add(new DockCloseCommand());

return dock;

}

private void CreateSaveStateTrigger(RadDock dock)

{

//Ensure that the RadDock control will initiate postback

// when its position changes on the client or any of the commands is clicked.

//Using the trigger we will "ajaxify" that postback.

dock.AutoPostBack = true;

dock.CommandsAutoPostBack = true;

AsyncPostBackTrigger saveStateTrigger = new AsyncPostBackTrigger();

saveStateTrigger.ControlID = dock.ID;

saveStateTrigger.EventName = "DockPositionChanged";

UpLineBuilderHidden.Triggers.Add(saveStateTrigger);

saveStateTrigger = new AsyncPostBackTrigger();

saveStateTrigger.ControlID = dock.ID;

saveStateTrigger.EventName = "Command";

UpLineBuilderHidden.Triggers.Add(saveStateTrigger);

}

protected void ButtonAddStop_Click(object sender, EventArgs e)

{

RadDock dock = CreateRadDock();

//adding the dock to the docklayout and then docking it to the zone to avoid ViewState issues on subsequent postback

RdlLineBuilder.Controls.Add(dock);

//UpLineBuilderHidden.ContentTemplateContainer.Controls.Add(dock);

ScriptManager.RegisterStartupScript(

dock,

this.GetType(),

"AddDock",

string.Format(@"function _addDock() {{

Sys.Application.remove_load(_addDock);

$find('{1}').dock($find('{0}'),{2});

$find('{0}').doPostBack('DockPositionChanged');

}};

Sys.Application.add_load(_addDock);", dock.ClientID, RdzLineBuilder.ClientID, 0),

true);

CreateSaveStateTrigger(dock);

}

As I said, this works fine. But what I want to achieve is to ajaxify the whole lot, i.e Use my RadAjaxManager on my default.aspx page.
Right now, as soon as I create a new tab, it postback the page and I'm losing some info (plus the page flicks on Chrome, FF is alright)

If I enable my AjaxManager I get the following error message that plenty of people have seen before:
"Sys.InvalidOperationException: Sys.InvalidOperationException: Could not find UpdatePanel with ID 'LineBuilder_pvNew_0_UpLineBuilderHidden'. If it is being updated dynamically then it must be inside another UpdatePanel"

Although I've found many people with the same issue of having an Update Panel within an Ajaxified usercontrol (see here for Telerik explanation) I can't get my mind around this to get a fully ajaxify project.

Another behavior I would like to code is to get an horizontal scrolling bar to appear when adding new docks rather than having them stacking on a new row and a vertical scroll bar.

You can download the project source as zip from here

Any idea / help would be much appreciated.

Cheers everyone,

Chris

Dock

answered on 23 Apr 2013

1 answer

244 views

Radtextbox (onBlur event) in GridDataItem passing values and finding values question...

I have a radgrid.
The dataitem row has several controls but two in particular have values I need for a javascript ajax call I need to make.
The user story is this...
A user sees a series of rows with a CampusID - a simple label and a copiesNeeded - a radnumerictextbox.
The ROW is NOT in edit mode, nor will it be...
The user clicks in the radtextbox and enters a value.
When they leave the textbox an onBlur event is fired.

Now in a client side javascript function I want to get the value they have entered in the radnumerictextbox and determine the value of the CampusID from the CampusNameLabel-- unless of course there is an easier means to do this clientside...
For example:

//================================================

//=== Save the value entered in the grid for copies needed.

//================================================

function saveCopiesNeeded(src, args) {

// Get the row the user had made changes in so I can get the campusID

// Get the radNumericTextbox so I can get the value the user typed

}

<telerik:GridTemplateColumn FilterControlAltText="Filter column" UniqueName="CampusID"

HeaderText="Campus ID" SortExpression="CampusID">

<ItemTemplate>

<asp:Label ID="CampusIDLabel" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"CampusID") %>'></asp:Label>

</ItemTemplate>

<HeaderStyle HorizontalAlign="Center" />

<ItemStyle HorizontalAlign="Center" Wrap="False" VerticalAlign="Middle" />

</telerik:GridTemplateColumn>

telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn column" UniqueName="TemplateColumn">

<ItemTemplate>

<telerik:RadNumericTextBox ID="CopiesToOrderRadNumericTextbox" runat="server" Culture="en-US" DbValueFactor="1" LabelWidth="64px" MinValue="0" Width="70px">

<NumberFormat DecimalDigits="0" ZeroPattern="n" />

<ClientEvents OnBlur="saveCopiesNeeded"></ClientEvents>

</telerik:RadNumericTextBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

Grid