Questions on UI for ASP.NET AJAX Forum

7 answers

593 views

Text box value disappears while moving to another tab

Hi,

I am using tabstrib control in one of our pages.And when we are facing the following issue.

The tabstrib is having two tabs and each of them having a textbox.
After entering a value in tab1 textbox,we are moving to tab2 directly, and if we go back to tab1 the value entered in tab1 textbox is missing.
Please find the code as below..

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

<%@ 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>
        <telerik:RadTabStrip AutoPostBack="true" ID="TabStrip" runat="server" SelectedIndex="0"
            MultiPageID="MultiPage" Width="98%">
            <Tabs>
                <telerik:RadTab runat="server" Text="Tab1" Value="Details">
                </telerik:RadTab>
                <telerik:RadTab runat="server" Text="Tab2" Value="Communications">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="MultiPage" Width="100%" Height="520px" runat="server" SelectedIndex="0">
            <telerik:RadPageView ID="CampaignDetailsPageView" runat="server" Width="100%" Height="100%">
                <table>
                    <tr>
                        <td>
                            <telerik:RadTextBox ID="TextBoxTest" runat="server">
                            </telerik:RadTextBox>
                        </td>
                    </tr>
                </table>
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView1" runat="server" Width="100%" Height="100%">
                <table>
                    <tr>
                        <td>
                            <telerik:RadTextBox ID="RadTextBox2" runat="server">
                            </telerik:RadTextBox>
                        </td>
                    </tr>
                </table>
            </telerik:RadPageView>
        </telerik:RadMultiPage>
        <telerik:RadAjaxManager ID="AjaxManager" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="TabStrip">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="TabStrip" />
                        <telerik:AjaxUpdatedControl ControlID="MultiPage" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
    </div>
    </form>
</body>
</html>

This is happening only with version 2013.2.611.40, and its not happening in version 2013.1.417.40 with the same code.

Thank you in advance,
Muthukumar V

TabStrip

answered on 19 Aug 2020

4 answers

1.0K+ views

RadEditor in plain text mode only?

Is it possible to use the RadEditor in a plain text mode only, where the content going in and out of the editor is always treated as text and never as html? Currently, my application has a screen with a textarea element that the users use to input blocks of vbscript and perlscript commands that are saved in and out of a database and executed in other processes. I would like to migrate to the RadEditor and take advantage of some of its features such as copy,paste,undo,redo,find,replace,font changes,etc. But it seems that the editor always presents HTML, and I lose carriages returns, tabs, whitespace, etc when I originally load the text to display for the user. I see the .Text property will retrieve plain text, but I would like to be able to load the data as plain text too, without it ever being converted to html. Basically I want to use RadEditor as a text editor and not an HTML editor. I am not seeing a way to do this, am I missing something, or is it not possible?

Editor

answered on 18 Aug 2020

1 answer

160 views

ExpandCollapse Command Doesnt Fire

In Brief

The OnItemCommand ExpandCollapse event command doesn't fire when ClientSettings.AllowPostBackOnItemClick="true"

Detail

I am using a TreeList to display a company hierarchy. It is defined as follows.

<telerik:RadTreeList

ID="lstCompanyTree"

runat="server"

PageSize="12"

AllowLoadOnDemand="false"

AllowPaging="true"

Width="300px"

OnNeedDataSource="lstCompanyTree_NeedDataSource"

OnItemCommand="lstCompanyTree_ItemCommand"

OnDataBound="lstCompanyTree_DataBound"

OnItemDataBound="lstCompanyTree_ItemDataBound"

OnPageIndexChanged="lstCompanyTree_PageIndexChanged"

OnPreRender="lstCompanyTree_PreRender"

AutoGenerateColumns="false"

AllowSorting="false"

CssClass="CompanyListTree"

ShowTreeLines="true"

ExpandCollapseMode="Server"

DataKeyNames="CompanyID"

ParentDataKeyNames="ParentCompanyID"

ClientDataKeyNames="CompanyID,ObjectID"

>

<ClientSettings AllowPostBackOnItemClick="true" >

<Selecting AllowItemSelection="true" />

</ClientSettings>

<AlternatingItemStyle BackColor="Transparent" />

<ItemStyle BackColor="Transparent" />

<Columns>

<telerik:TreeListTemplateColumn >

<ItemTemplate>

<div class="CompanyListItem">

<div class="layoutRow" <%# Eval("Style") %>>

<div class="layoutCell dataCellMin200"><strong><%# Eval("Name") %></strong></div>

</div>

<div class="layoutRow">

<div class="layoutCell dataCellMin200"><%# Eval("SubHeading")%></div>

</div>

</ItemTemplate>

</telerik:TreeListTemplateColumn>

</Columns>

</telerik:RadTreeList>

I am trying to implement code when the Expand collapse button is clicked, and load the details of the company when an item is selected.

The problem is in the OnItemCommand event.

The ItemClick event command is overriding the ExpandCollapse command. If you disable AllowPostBackOnItemClick, then you get the ExpandCollapse command as expected.

that is, in this code block

protected void lstCompanyTree_ItemCommand(object sender, Telerik.Web.UI.TreeListCommandEventArgs e)

{

..

}

e.CommandName is always "ItemClick" when AllowPostBackOnItemClick is true.

if you disable AllowPostBackOnItemClick , then e.CommandName = "ExpandCollapse" when you click the ExpandCollapse button. I haven't been able to test the value when the item is clicked as the postback is disabled, but one would assume e.CommandName = "ItemClick" in this case.

TreeList

answered on 18 Aug 2020

1 answer

126 views

Using client-side diagram properties is not helpful

I am using the diagram control on the client side and I wanted to get the X and Y co-ordinates of a shape. Going by your documentation for the Kendu UI dataviz web page and using the code below for testing I felt confident this would work.

var diagram = GetRAD('rdMap').get_kendoWidget();

consolelog(diagram.shapes[0].x);

consolelog(diagram.shapes[0].y);

However, the result I got back was an error message of undefined in the console when checking the output. Even though on testing if I used the .id for the object it should the Id I had given it. So, after looking around for quite some time I can across the code for the bound change event which should the following very similar to the following line..

var myX = shape._bounds.x;

When I applied the code found to my web application I was able to read the X,Y position of each shape; the documentation about the use of properties for shapes/connections and the other structures means I am now at a loss for doing the simplest tasks client-side.

For example I need to be able to change the color of a shape; but I just dont know how to do it. As when I use the code shape.fill.color = #ff0000; the error message shown in the log is color is undefined and I have no idea when to look to find an example of this on the client side as the documentation for me does not help. I need to better examples of client side code from the point of view of someone who is using UI for ASP.NET AJAX or documentation along with code samples that work (ie.e the shapes.fill.color entry doers not help)..

For now can I have some help on coloring the shape as I currently have a diagram with 300 shapes and 400-500 connections; so when a use needs to highlight a shape through search a name I can highlight this in the diagram for matches.

Diagram

answered on 17 Aug 2020

2 answers

278 views

aspnet-scripts.telerikstatic.com using http to include libraries.

I have tried all the options listed in the documentation and not matter what I do I still get those script insecurely (http), having the browser naturally blocking the action. I have an old aspnet framework 4.5.2 app.

I tried this
<telerik:RadScriptManager
    runat="server"
    ID="RadScriptManager1"
    EnableCdn="true">
</telerik:RadScriptManager>
<telerik:RadStyleSheetManager
    runat="server"
    ID="RadStyleSheetManager1">
    <CdnSettings TelerikCdn="Enabled" />
</telerik:RadStyleSheetManager>

And this:
<appSettings>
    <add key="Telerik.ScriptManager.TelerikCdn" value="Enabled" />
    <add key="Telerik.StyleSheetManager.TelerikCdn" value="Enabled" />
</appSettings>

Am I missing something? Can I somehow force every request to be https?

I’d really appreciate some help in here!

Thanks!

General Discussions

answered on 17 Aug 2020

6 answers

417 views

RadEditor does not allow Text entry in Safari or Chrome (any version of either)

Inside an UpdatePanel, I have an ajax:ReorderList. In the ReorderList's InsertItemTemplate, I have a Panel with two RadEditors. I display the Panel in an ajax:ModalPopupExtender when the User clicks on a Button above the ReorderList.

Both RadEditors work just fine in IE versions 9 and up or in Firefox (tested versions 3.6.8, 8.0.1, 9.0.1, 27.0.1, and 28.0.1).

However, in Safari (version 4, 5, or 5.1.7) or Chrome 33, Users cannot enter Text into either RadEditor...

The generated HTML looks very similar in all browsers, a <textarea> is created, even though I have tried setting the Editors' EnableTextareaMode="false" in the markup.

Please help me figure out what I'm doing wrong...

Here is my aspx markup

<asp:UpdatePanel runat="server" ID="itemUpdatePanel" UpdateMode="Conditional">

<ContentTemplate>

<div class="buttonPanelLeft">

<SuperPanel:ContentButton ID="AddNewFAQItemButton" runat="server" CssClass="buttonShellWidthMedium"

Text="Add FAQ Item" OnClientClick="return CheckSelectedCategory();" meta:resourcekey="AddNewFAQItemButton"></SuperPanel:ContentButton>

</div>

<div class="pad10Clear">

</div>

<asp:Panel runat="server" ID="FAQContainerTitlePanel" Style="margin-top: 5px; margin-bottom: 5px;

font-weight: bold;">

<asp:Label ID="faqContainerTitleText" runat="server" Text="Frequently Asked Questions and Answers"

meta:resourcekey="faqContainerTitleText" />

</asp:Panel>

<ajax:ReorderList ID="itemList" PostBackOnReorder="True" DataSourceID="itemDataSource"

CssClass="itemList" DragHandleAlignment="Top" ItemInsertLocation="End" DataKeyField="FAQID"

CallbackCssStyle="callbackStyle" SortOrderField="SortOrder" runat="server" LayoutType="User"

AllowReorder="True" ShowInsertItem="True">

<DragHandleTemplate>

<div class="clear">

</div>

<div class="groupItemDragHandle" style="float: left; *margin-left: -4px;">

</div>

<div class="clear">

</div>

</DragHandleTemplate>

<EditItemTemplate>

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

<hr style="width: 100%;"></hr>

<div class="pad10Clear">

</div>

<div class="groupItemCommandBar">

<asp:Label ID="selectCategoryText" runat="server" meta:resourcekey="selectCategoryText"

Text="FAQ Category:"></asp:Label>

<div class="clear">

</div>

<asp:DropDownList ID="categoryList" runat="server" CssClass="groupItemDropDown" DataSourceID="categoryDataSource"

DataTextField="CategoryName" DataValueField="CategoryID" SelectedValue='<%# Bind("CategoryID") %>'>

</asp:DropDownList>

<div class="pad10Clear">

</div>

<div>

<asp:LinkButton ID="faqItemSaveButton" runat="server" CommandName="Update" CssClass="saveButton"

meta:resourcekey="faqItemSaveButton" OnClientClick="endItemEdit();ShowAddNewCategoryButton(true);"

Style="float: left;"></asp:LinkButton>

<asp:LinkButton ID="faqItemCancelButton" runat="server" CommandName="Cancel" CssClass="cancelButton"

meta:resourcekey="faqItemCancelButton" OnClientClick="endItemEdit();ShowAddNewCategoryButton(true);"

Style="float: left;"></asp:LinkButton>

</div>

<div class="pad5Clear">

</div>

<div class="groupItemQuestion">

<asp:Label ID="editQuestionLabel" runat="server" Style="font-size: 15pt;" meta:resourcekey="editQuestionLabel"

SkinID="BoldFormFieldLabel" Text="Q:"></asp:Label>

</div>

<div class="faqError">

<asp:RequiredFieldValidator ID="itemEditQuestionValidator" runat="server" ControlToValidate="questionEditor"

Display="Dynamic" meta:resourcekey="itemEditQuestionValidator" Text="Question is required."></asp:RequiredFieldValidator>

</div>

<div class="pad10Clear">

</div>

<div class="HtmlEditorItem">

<telerik:RadEditor ID="questionEditor" runat="server" Height="200px" Width="99%"

StripFormattingOnPaste="MSWordRemoveAll" Content='<%# Bind("Question") %>' EnableResize="False"

SkinID="BasicSetOfTools" EnableEmbeddedSkins="False">

</telerik:RadEditor>

</div>

<div class="pad10Clear">

</div>

<div class="groupItemQuestion">

<asp:Label ID="editAnswerLabel" runat="server" meta:resourcekey="editAnswerLabel"

Style="font-size: 15pt;" SkinID="BoldFormFieldLabel" Text="A:"></asp:Label>

</div>

<asp:RequiredFieldValidator ID="itemEditAnswerValidator" runat="server" ControlToValidate="answerEditor"

Display="Dynamic" meta:resourcekey="itemEditAnswerValidator" Text="Answer is required."></asp:RequiredFieldValidator>

<div class="pad10Clear">

</div>

<div class="HtmlEditorItem">

<telerik:RadEditor ID="answerEditor" runat="server" Height="200px" Width="99%" EnableResize="False"

StripFormattingOnPaste="MSWordRemoveAll" SkinID="BasicSetOfTools" Content='<%# Bind("Answer") %>'

EnableEmbeddedSkins="False">

</telerik:RadEditor>

</div>

<hr style="width: 100%;"></hr>

<div class="pad10Clear">

</div>

<asp:HiddenField ID="editSortOrderHiddenField" runat="server" Value='<%# Bind("SortOrder") %>' />

</asp:Panel>

</EditItemTemplate>

<InsertItemTemplate>

<asp:Panel ID="insertFAQItemPanel" runat="server" Style="display: none; width: 800px;

background-color: #FFFFFF; padding: 8px 8px 8px 8px;">

<SkinnedButton:SkinnedPanel ID="AddFAQItemSkinnedPanel" runat="server" CssClass="widthPx800"

GroupingText="Add FAQ Item" meta:resourcekey="AddFAQItemSkinnedPanel">

<div class="clear">

</div>

<div class="panelInsidePadding">

<div class="clear">

</div>

<asp:Panel ID="insertPanel" runat="server" CssClass="groupItem" Style="margin-top: 10px;">

<div>

<div class="groupItemQuestion">

<asp:RequiredFieldValidator ID="itemAddQuestionValidator" runat="server" ControlToValidate="itemAddQuestionEditor"

Display="Dynamic" meta:resourcekey="itemAddQuestionValidator" Text="Question is required."

ValidationGroup="InsertFAQItem"></asp:RequiredFieldValidator>

</div>

<div class="groupItemQuestion">

<asp:Label ID="enterQuestionText" runat="server" meta:resourcekey="enterQuestionText"

SkinID="BoldFormFieldLabel" Text="Enter Question:"></asp:Label>

</div>

<div class="HtmlEditorItem">

<div class="clearfix">

</div>

<telerik:RadEditor ID="itemAddQuestionEditor" runat="server" Height="250px" Width="99%"

Content='<%# Bind("Question") %>' SkinID="BasicSetOfTools" EnableResize="False"

StripFormattingOnPaste="MSWordRemoveAll" EnableTextareaMode="False">

<Modules>

<telerik:EditorModule Name="EditorStatsModule" Enabled="true" Visible="true" />

<telerik:EditorModule Name="RadEditorStatistics" Enabled="true" Visible="False" />

</Modules>

</telerik:RadEditor>

<div class="clearfix">

</div>

<div>

<div class="groupItemAnswer">

<asp:RequiredFieldValidator ID="itemAddAnswerValidator" runat="server" ControlToValidate="itemAddAnswerEditor"

Display="Dynamic" meta:resourcekey="itemAddAnswerValidator" Text="Answer is required."

ValidationGroup="InsertFAQItem"></asp:RequiredFieldValidator>

</div>

<div class="groupItemAnswer">

<asp:Label ID="enterAnswerText" runat="server" meta:resourcekey="enterAnswerText"

SkinID="BoldFormFieldLabel" Text="Enter Answer:"></asp:Label>

</div>

<div class="HtmlEditorItem">

<telerik:RadEditor ID="itemAddAnswerEditor" runat="server" Height="250px" Width="99%"

Content='<%# Bind("Answer") %>' SkinID="BasicSetOfTools" EnableResize="False"

StripFormattingOnPaste="MSWordRemoveAll" EnableTextareaMode="False">

<Modules>

<telerik:EditorModule Name="EditorStatsModule" Enabled="true" Visible="true" />

<telerik:EditorModule Name="RadEditorStatistics" Enabled="true" Visible="False" />

</Modules>

</telerik:RadEditor>

</div>

</asp:Panel>

<div class="clear">

</div>

<div class="buttonPanel" style="margin: 5px 2px 5px 5px;">

<SuperPanel:ContentButton ID="CancelAddFAQItemLinkButton" runat="server" CommandName="Cancel"

CssClass="buttonShellWidthRegular" ToolTip="Cancel" meta:resourcekey="CancelAddFAQItemLinkButton">

</SuperPanel:ContentButton>

<SuperPanel:ContentButton ID="SaveAddFAQItemLinkButton" runat="server" CommandName="Insert"

CssClass="buttonShellWidthRegular" meta:resourcekey="SaveAddFAQItemLinkButton"

ToolTip="Save" ValidationGroup="InsertFAQItem">

</SuperPanel:ContentButton>

</div>

<div class="clear">

</div>

</SkinnedButton:SkinnedPanel>

</asp:Panel>

<ajax:ModalPopupExtender ID="modalPopup" runat="server" BackgroundCssClass="popUpBackground"

BehaviorID="AddNewFAQItemButton" DynamicServicePath="" Enabled="True" PopupControlID="insertFAQItemPanel"

TargetControlID="AddNewFAQItemButton" OnLoad="modalPopup_OnLoad">

</ajax:ModalPopupExtender>

<div class="spacer">

</div>

</InsertItemTemplate>

<ItemTemplate>

<hr style="width: 100%;"></hr>

<div class="pad5Clear">

</div>

<div class="groupItem">

<asp:Panel ID="groupItemCommandBar" runat="server" CssClass="groupItemCommandBar">

<asp:LinkButton ID="itemEdit" runat="server" CommandName="Edit" CssClass="editButton"

meta:resourcekey="itemEdit" OnClientClick="beginItemEdit(this.id); ShowAddNewCategoryButton(false);"

Style="float: left;" ToolTip="Edit FAQ"></asp:LinkButton>

<div style="width: 5px; float: left;">

</div>

<asp:LinkButton ID="itemDelete" runat="server" CommandName="Delete" CssClass="deleteButton"

ToolTip="Delete FAQ" meta:resourcekey="itemDelete" Style="float: left;" Text=""></asp:LinkButton>

</asp:Panel>

<div class="pad5Clear">

</div>

<div class="groupItemQuestion">

<asp:Label ID="TheQuestionIsLabel" runat="server" meta:resourcekey="TheQuestionIsLabel"

SkinID="BoldFormFieldLabel" Text="Q:" Style="font-size: 15pt;"></asp:Label>

<div class="clear">

</div>

<asp:Label ID="questionLabel" runat="server" meta:resourcekey="questionLabel" Text='<%# Convert.ToString(Eval("Question")) %>'></asp:Label>

</div>

<div class="groupItemAnswer">

<asp:Label ID="TheAnswerIsLabel" runat="server" meta:resourcekey="TheAnswerIsLabel"

SkinID="BoldFormFieldLabel" Text="A:" Style="font-size: 15pt;"></asp:Label>

<div class="clear">

</div>

<asp:Label ID="answerLabel" runat="server" meta:resourcekey="answerLabel" Text='<%# Convert.ToString(Eval("Answer")) %>'></asp:Label>

</div>

</ItemTemplate>

<ReorderTemplate>

<div class="groupItemReorderCue">

</div>

</ReorderTemplate>

</ajax:ReorderList>

</ContentTemplate>

</asp:UpdatePanel>

Editor

answered on 16 Aug 2020

1 answer

229 views

Border Width issue Excel XLSX

Hello,

I am exporting an Excel file and I edit the style in InfrastructureExporting like described in the docs.
Everything works great beside the border width.

I use it like here:
e.ExportStructure.Tables[0].Cells[0, 1].Style.BorderTopWidth = 5;

and the size doesn't change. It's always 1.

Could you show a solution for this?

Regards

Grid

answered on 14 Aug 2020

1 answer

151 views

Default Value in RadListView

Hi Guys,

I need to generate a default value for a BinaryImage (in a RadListView) when the image source from the database is NULL.

This is the BinaryImage code in RadListView

<asp:PlaceHolder ID="badgeContainer" runat="server"></asp:PlaceHolder>

</LayoutTemplate>

<ItemTemplate>

<asp:LinkButton ID="lb1" runat="server" CommandName="content" CommandArgument='<%#Eval("bid") %>'>

<telerik:RadBinaryImage ID="rbImageBadge" runat="server" DataValue='<%# IIf(Eval("badge") IsNot DBNull.Value, Eval("badge"), New System.Byte(-1) {})%>'

AutoAdjustImageControlSize="false" Width="120px" Height="120px" ToolTip='<%#Eval("badgetitle", "{0}") %>'

AlternateText='<%#Eval("badgetitle", "{0}") %>' />

</asp:LinkButton>

''''''''''''''''''''''' etc

I have tried everything that I have read but just cannot get it to show a default image.
All help appreciated!

My Handler is

Imports System.Data.SqlClient

Public Class badgeImage : Implements IHttpHandler

Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest

Dim conn As SqlConnection = Nothing

conn = New SqlConnection(ConfigurationManager.ConnectionStrings("jbdata").ConnectionString)

context.Response.ContentType = "image/png"

Dim id As Integer = Convert.ToInt32(context.Request.QueryString("ID"))

Dim cmdText As String = "select badge from badges where bid=" & id

Dim command As New SqlCommand(cmdText, conn)

conn.Open()

Dim reader As SqlDataReader = command.ExecuteReader()

reader.Read()

If id > 0 Then

Dim image As Byte() = DirectCast(reader(0), Byte())

context.Response.BinaryWrite(image)

Else

Dim location As String = System.Web.HttpContext.Current.Server.MapPath("~/badgz/images/default.png")

System.Web.HttpContext.Current.Response.WriteFile(location)

End If

reader.Close()

conn.Close()

End Sub

Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable

Get

Return False

End Get

End Property

End Class

BinaryImage

answered on 14 Aug 2020

15 answers

3.3K+ views

How to change progmatically active Tab in RadTabStrip/RadMultiPage?

Hello All,
I use a lot Tabs (with RadTabStrip/RadMultiPage) in our WebApplication and I have situations where program logic in codebehind should change active Tab in RadTabStrip.

I have tried C# code like RadTabStrip.SelectedIndex = index but it doesn't seem to work.
I have also tried to activate tab calling Javascript from codebehind but doesn't succeeded.
Every time when I have progmatically tried to change active Tab page has started to work quite peculiar.
It either freeze or content doesn't change at all.

Tabbed pages have following structure:
RadTabStrip
RadMultiPage
RadPageView (Multiple RadPageViews)
UI Controls like RAdTextBoxes etc.

Can anyone tell how to activate Tab using C# or Javascript:

Thanks,
Michael

    
            <telerik:RadTabStrip ID="RadTabStrip1" runat="server"   
        
               MultiPageID="RadMultiPage1" SelectedIndex="0"   
        
               ontabclick="RadTabStrip1_TabClick">  
        
               <Tabs> 
        
                  <telerik:RadTab TabIndex="0" Text='Organization' PageViewID="RadPageViewOrganizationSearch"/>  
        
                  <telerik:RadTab TabIndex="1" Text='Person' PageViewID="RadPageViewPersonSearch"/>  
        
                  <telerik:RadTab TabIndex="2" Text='Ext.Search' PageViewID="RadPageViewExtendedSearch"/>  
        
                  <telerik:RadTab TabIndex="3" Text='Lists' PageViewID="RadPageViewDistributionListSearch"/>  
        
               </Tabs> 
        
            </telerik:RadTabStrip> 
        
            <telerik:RadMultiPage ID="RadMultiPage1" runat="server" BorderColor="Gray"   
        
               BorderStyle="Solid" BorderWidth="1px" Width="600px" SelectedIndex="0">  
        
               <telerik:RadPageView runat="server" ID="RadPageViewOrganizationSearch" Selected="true">  
        
                  <table id="Table1" runat="server" width="600px">  
        
                     <tr> 
        
                        <td colspan="2">  
        
                           <table class="ms-disc-bar" width="100%">  
        
                              <tr> 
        
                                 <td> 
        
                                    <asp:Label ID="Label2" CssClass="ms-standardheader" runat="server"   
        
                                       Text='Organization Values'/>  
        
                                 </td> 
        
                              </tr> 
        
                           </table> 
        
                        </td> 
        
                     </tr> 
        
                     <tr> 
        
                        <td class="ms-formlabel" style="width: 125px">  
        
                           <asp:Label ID="Label9" CssClass="ms-standardheader" runat="server"   
        
                              Text='Name'/>  
        
                        </td> 
        
                        <td class="ms-formbody">                             
        
                           <telerik:RadTextBox ID="RTBName" runat="server">  
        
                           </telerik:RadTextBox>                                         
        
                        </td>

TabStrip

answered on 13 Aug 2020

4 answers

177 views

Dynamic RadGrid column issue

I'm trying to create a dynamic datagrid for editing and updating, which is mostly working except that when I do a postback, it adds extra "datarow" columns to the grid. This also causes an error when I go to edit, with the message, "There is no column 'column'". At first, I didn't have NeedsDataSource, which was causing the grid to vanish when there was a post back. Now, it keeps adding columns.

ASPX:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ReferenceTables.aspx.vb" Inherits="Test.ReferenceTables" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
</head>
<body>
<form id="form1" runat="server">
<div>

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

<telerik:RadGrid ID="rgGridSearch"
runat="server"
AutoGenerateColumns="False"
ShowStatusBar="True"
Width="100%"
AllowAutomaticInserts="True"
AllowAutomaticUpdates="True"
AllowPaging="true"
PageSize="10"
Skin="WebBlue">

<GroupingSettings CollapseAllTooltip="Collapse all groups"></GroupingSettings>
<MasterTableView
EditMode="InPlace"
CommandItemDisplay="top"

>
<Columns>
<telerik:GridEditCommandColumn UniqueName="EditCommandColumnActivity">
<HeaderStyle Width="80px"></HeaderStyle>
<ItemStyle Width="80px"></ItemStyle>
</telerik:GridEditCommandColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>

<telerik:RadGrid
ID="rgGridTemplate"
runat="server"
DataSourceID="dsStaff"
AutoGenerateColumns="False"
ShowStatusBar="True"
Width="100%"
AllowAutomaticInserts="True"
AllowAutomaticUpdates="True"
Skin="WebBlue">

<GroupingSettings CollapseAllTooltip="Collapse all groups"></GroupingSettings>
<MasterTableView
EditMode="InPlace"
CommandItemDisplay="top"
DataKeyNames="Staff_Member_ID"
DataSourceID="dsStaff">
<Columns>
<telerik:GridEditCommandColumn UniqueName="EditCommandColumnActivity">

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

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

</telerik:GridEditCommandColumn>

<telerik:GridBoundColumn DataField="Staff_Member_ID" DataType="System.Int32" FilterControlAltText="Filter Staff_Member_ID column" HeaderText="Staff_Member_ID" ReadOnly="True" SortExpression="Staff_Member_ID" UniqueName="Staff_Member_ID"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Staff_Member_First_Name" FilterControlAltText="Filter Staff_Member_First_Name column" HeaderText="First Name" SortExpression="Staff_Member_First_Name" UniqueName="Staff_Member_First_Name"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Staff_Member_Last_Name" FilterControlAltText="Filter Staff_Member_Last_Name column" HeaderText="Last Name" SortExpression="Staff_Member_Last_Name" UniqueName="Staff_Member_Last_Name"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Staff_Member_Middle_Initial" FilterControlAltText="Filter Staff_Member_Middle_Initial column" HeaderText="Middle Initial" SortExpression="Staff_Member_Middle_Initial" UniqueName="Staff_Member_Middle_Initial"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Staff_Member_Email_Address" FilterControlAltText="Filter Staff_Member_Email_Address column" HeaderText="Email" SortExpression="Staff_Member_Email_Address" UniqueName="Staff_Member_Email_Address"></telerik:GridBoundColumn>
<telerik:GridCheckBoxColumn DataField="Staff_Member_Active" DataType="System.Boolean" FilterControlAltText="Filter Staff_Member_Active column" HeaderText="Active" SortExpression="Staff_Member_Active" UniqueName="Staff_Member_Active"></telerik:GridCheckBoxColumn>
</Columns>
</MasterTableView>

</telerik:RadGrid>

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

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

SelectCommand="SELECT
[Staff_Member_ID],
[Staff_Member_First_Name],
[Staff_Member_Last_Name],
[Staff_Member_Middle_Initial],
[Staff_Member_Email_Address],
[Staff_Member_Active]

FROM [buStaff_Member]"

DeleteCommand="
DELETE FROM [buStaff_Member]
WHERE [Staff_Member_ID] = @Staff_Member_ID"

InsertCommand="INSERT INTO [buStaff_Member]
([Staff_Member_First_Name],
[Staff_Member_Last_Name],
[Staff_Member_Middle_Initial],
[Staff_Member_Email_Address],
[Staff_Member_Active])

VALUES (@Staff_Member_First_Name,
@Staff_Member_Last_Name,
@Staff_Member_Middle_Initial,
@Staff_Member_Email_Address,
@Staff_Member_Active)"

UpdateCommand="UPDATE [buStaff_Member]
SET [Staff_Member_First_Name] = @Staff_Member_First_Name,
[Staff_Member_Last_Name] = @Staff_Member_Last_Name,
[Staff_Member_Middle_Initial] = @Staff_Member_Middle_Initial,
[Staff_Member_Email_Address] = @Staff_Member_Email_Address,
[Staff_Member_Active] = @Staff_Member_Active

WHERE [Staff_Member_ID] = @Staff_Member_ID">

<DeleteParameters>
<asp:Parameter Name="Staff_Member_ID" Type="Int32" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="Staff_Member_First_Name" Type="String" />
<asp:Parameter Name="Staff_Member_Last_Name" Type="String" />
<asp:Parameter Name="Staff_Member_Middle_Initial" Type="String" />
<asp:Parameter Name="Staff_Member_Email_Address" Type="String" />
<asp:Parameter Name="Staff_Member_Active" Type="Boolean" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="Staff_Member_First_Name" Type="String" />
<asp:Parameter Name="Staff_Member_Last_Name" Type="String" />
<asp:Parameter Name="Staff_Member_Middle_Initial" Type="String" />
<asp:Parameter Name="Staff_Member_Email_Address" Type="String" />
<asp:Parameter Name="Staff_Member_Active" Type="Boolean" />
<asp:Parameter Name="Staff_Member_ID" Type="Int32" />
</UpdateParameters>
</asp:SqlDataSource>

</div>
</form>
</body>
</html>

========================================================================================================================

VB code

========================================================================================================================

Imports System.Data.SqlClient
Imports Telerik.Web.UI

Public Class ReferenceTables
Inherits System.Web.UI.Page

Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init

If Not IsPostBack Then
SetupGrid()
End If

End Sub

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

End Sub

Private Sub SetupGrid()

Dim Gridtype As String = Request.QueryString("type").ToString

Select Case Gridtype
Case "Staff"
SetupStaffGrid()
' To Do - Other dynamic grids.

End Select

End Sub

#Region "Initialize Edit Grid"

Private Sub SetupStaffGrid()

' The datasource will eventually be dynamic. For now, use the datasource on the form.
' Dim dsStaff As New SqlDataSource(dbData.GetConnection.ConnectionString, "SELECT Staff_Member_ID, Staff_Member_First_Name, Staff_Member_Last_Name, Staff_Member_Email_Address FROM buStaff_Member")

rgGridSearch.DataSource = dsStaff
rgGridSearch.MasterTableView.DataKeyNames = New String() {"Staff_Member_ID"}
rgGridSearch.AllowPaging = True
rgGridSearch.Skin = "WebBlue"

'Add Staff table

Dim boundColumn As New GridBoundColumn()

SetupBoundColumn(rgGridSearch, "Staff_Member_ID", "Staff ID", False, True)
SetupBoundColumn(rgGridSearch, "Staff_Member_First_Name", "First Name")
SetupBoundColumn(rgGridSearch, "Staff_Member_Last_Name", "Last Name")
SetupBoundColumn(rgGridSearch, "Staff_Member_Middle_Initial", "Middle Initial")
SetupBoundColumn(rgGridSearch, "Staff_Member_eMail_Address", "Email")
SetupBoundColumn(rgGridSearch, "Staff_Member_Active", "Active")

End Sub

Private Sub SetupBoundColumn(rg As RadGrid, DataField As String, HeaderText As String, Optional Visible As Boolean = True, Optional ReadOnlyField As Boolean = False)

Dim boundColumn As New GridBoundColumn With {
.DataField = DataField,
.HeaderText = HeaderText,
.Visible = Visible,
.ReadOnly = ReadOnlyField
}
rg.MasterTableView.Columns.Add(boundColumn)

End Sub

Private Sub rgGridSearch_NeedDataSource(sender As Object, e As GridNeedDataSourceEventArgs) Handles rgGridSearch.NeedDataSource

SetupGrid()

End Sub

#End Region

End Class

Grid

answered on 13 Aug 2020