This is a migrated thread and some comments may be shown as answers.

RadComboBox header with add new item inside a RadGrid

4 Answers 292 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Bill asked on 20 Aug 2012, 03:51 PM

Hello Everyone,

I need some help in figuring out how to implement a RadComboBox bound to a Linq datasource with a "add new item in the header of the radcombobox which adds an item to the datasource. The radcombobox in also inside a RadGrid. Here is a screen-shot of what I am trying to accomplish. If anyone could help or post a sample project I would appreciate it!

What I would like the behaviour to be is that on edit or insert to be able to add the item in the RadComboBox and do a postback to update the datasource bound to the RadComboBox. Ideally I would like to see two versions one for SQLDatasource and one for LinqDatasource to understand the differences.

I have no idea on how to implement this to work?
I tried to add a sample project but this post would not allow me to do so?

ASPX:

<div>

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

AllowAutomaticInserts="True" AllowAutomaticUpdates="True" CellSpacing="0"

DataSourceID="SqlDataSource1" GridLines="None" Width="800px">

<MasterTableView AutoGenerateColumns="False" CommandItemDisplay="Top"

DataKeyNames="ProblemID" DataSourceID="SqlDataSource1">

<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

<RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">

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

</RowIndicatorColumn>

<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">

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

</ExpandCollapseColumn>

<Columns>

<telerik:GridEditCommandColumn FilterControlAltText="Filter EditCommandColumn column">

</telerik:GridEditCommandColumn>

<telerik:GridBoundColumn DataField="ProblemID" DataType="System.Int32"

FilterControlAltText="Filter ProblemID column" HeaderText="ProblemID"

ReadOnly="True" SortExpression="ProblemID" UniqueName="ProblemID">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn DataField="DefectID" DataType="System.Int32"

FilterControlAltText="Filter DefectID column" HeaderText="DefectID"

SortExpression="DefectID" UniqueName="DefectID">

<EditItemTemplate>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" height="200px" width="300px">

<telerik:RadComboBox ID="DefectComboBox" runat="server" AllowCustomText="True"

AppendDataBoundItems="True" DataSourceID="SqlDataSource2"

DataTextField="Defect" DataValueField="DefectID" Height="150px"

HighlightTemplatedItems="True" SelectedValue='<%# Bind("DefectID") %>'

Skin="Windows7" Width="365px">

<Items>

<telerik:RadComboBoxItem Selected="True" Text="[Not Defined]" Value=""

Owner="DefectComboBox" />

</Items>

<WebServiceSettings>

<ODataSettings InitialContainerName="">

</ODataSettings>

</WebServiceSettings>

<HeaderTemplate>

<telerik:RadTextBox ID="RadTextBox1" Runat="server" AutoPostBack="True"

EmptyMessage="add a new defect" LabelWidth="" Text='<%# Bind("Defect") %>'

Width="185px">

</telerik:RadTextBox>

<telerik:RadButton ID="addDefect" runat="server" Text="Add">

<Icon PrimaryIconCssClass="rbAdd" />

</telerik:RadButton>

</HeaderTemplate>

<FooterTemplate>

<br />

</FooterTemplate>

</telerik:RadComboBox>

</telerik:RadAjaxPanel>

</EditItemTemplate>

<ItemTemplate>

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

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="ProblemName"

FilterControlAltText="Filter ProblemName column" HeaderText="ProblemName"

SortExpression="ProblemName" UniqueName="ProblemName">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ProblemDescription"

FilterControlAltText="Filter ProblemDescription column"

HeaderText="ProblemDescription" SortExpression="ProblemDescription"

UniqueName="ProblemDescription">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ProblemDate" DataType="System.DateTime"

FilterControlAltText="Filter ProblemDate column" HeaderText="ProblemDate"

SortExpression="ProblemDate" UniqueName="ProblemDate">

</telerik:GridBoundColumn>

</Columns>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>

</EditFormSettings>

</MasterTableView>

<FilterMenu EnableImageSprites="False">

<WebServiceSettings>

<ODataSettings InitialContainerName=""></ODataSettings>

</WebServiceSettings>

</FilterMenu>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">

<WebServiceSettings>

<ODataSettings InitialContainerName=""></ODataSettings>

</WebServiceSettings>

</HeaderContextMenu>

</telerik:RadGrid>

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

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

DeleteCommand="DELETE FROM [Problems] WHERE [ProblemID] = @ProblemID"

InsertCommand="INSERT INTO [Problems] ([DefectID], [ProblemName], [ProblemDescription], [ProblemDate]) VALUES (@DefectID, @ProblemName, @ProblemDescription, @ProblemDate)"

SelectCommand="SELECT * FROM [Problems]"

UpdateCommand="UPDATE [Problems] SET [DefectID] = @DefectID, [ProblemName] = @ProblemName, [ProblemDescription] = @ProblemDescription, [ProblemDate] = @ProblemDate WHERE [ProblemID] = @ProblemID">

<DeleteParameters>

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

</DeleteParameters>

<InsertParameters>

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

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

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

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

</InsertParameters>

<UpdateParameters>

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

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

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

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

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

</UpdateParameters>

</asp:SqlDataSource>

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

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

SelectCommand="SELECT [DefectID], [Defect] FROM [Defects]">

</asp:SqlDataSource>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

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

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

DeleteCommand="DELETE FROM [Defects] WHERE [DefectID] = @DefectID"

InsertCommand="INSERT INTO [Defects] ([Defect]) VALUES (@Defect)"

SelectCommand="SELECT [DefectID], [Defect] FROM [Defects]"

UpdateCommand="UPDATE [Defects] SET [Defect] = @Defect WHERE [DefectID] = @DefectID">

<DeleteParameters>

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

</DeleteParameters>

<InsertParameters>

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

</InsertParameters>

<UpdateParameters>

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

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

</UpdateParameters>

</asp:SqlDataSource>

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

Skin="Default">

</telerik:RadAjaxLoadingPanel>

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

DefaultLoadingPanelID="RadAjaxLoadingPanel1">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1"

LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

</div>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Web;

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

{

protected void Page_Load(object sender, EventArgs e)

{

}

//protected void addDefect_Click(object sender, EventArgs e)

//{

// DefectsTableAdapters.InsertDefectsTableAdapter instdfcts = new

// DefectsTableAdapters.InsertDefectsTableAdapter();

// int numRows = instdfcts.InsertDefects(RadTextBox1.Text);

//}

}

Thanks
Bill.

4 Answers, 1 is accepted

answered on 23 Aug 2012, 10:33 PM

Yes, I did give it a try and was unsuccessful, also the sample is with a footer and not a header template. If you noticed I did submit a post on that link that you provided as well. You were able to provide the solution for the footer template why can't you provide the solution for the header template since it makes more sense to put the "add button" in the header and not the footer.

Can you provide a solution, sample, video or code? Ideally all these solutions in my opinion should end up on Telerik TV as videos it would make the blogging for solutions less and help us developers to find solutions faster. Just a thought.

Regards,
Bill.