RadAutoCompleteBox inside RadGrid

[Anders]

How excactly is it done? 
How do I use RadAutoCompleteBox on my ItemNo column?

  <telerik:RadGrid ID="RadGrid1" runat="server" AllowAutomaticDeletes="True" AllowAutomaticInserts="True"
        AllowAutomaticUpdates="True" AllowSorting="True" DataSourceID="SqlDataSource1"
        ShowGroupPanel="True" AutoGenerateEditColumn="True"
        ShowStatusBar="True" AutoGenerateColumns="False" CellSpacing="-1"
        GridLines="Both" AllowMultiRowEdit="True">
        <ExportSettings>
            <Pdf PageWidth="">
            </Pdf>
        </ExportSettings>
        <ClientSettings AllowDragToGroup="True" Selecting-AllowRowSelect="True">
<Selecting AllowRowSelect="True"></Selecting>
        </ClientSettings>
        <MasterTableView AutoGenerateColumns="False" DataSourceID="SqlDataSource1"
            CommandItemDisplay="Top" DataKeyNames="Id">
            <Columns>
                <telerik:GridBoundColumn DataField="Id" FilterControlAltText="Filter Id column"
                    HeaderText="Id" SortExpression="Id" UniqueName="Id"
                    DataType="System.Int32" ReadOnly="True" Visible="False">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Whs" FilterControlAltText="Filter Whs column"
                    HeaderText="Whs" SortExpression="Whs" UniqueName="Whs">
                </telerik:GridBoundColumn>

                <telerik:GridBoundColumn DataField="ItemNo" FilterControlAltText="Filter ItemNo column"
                    HeaderText="ItemNo" SortExpression="ItemNo" UniqueName="ItemNo">
                </telerik:GridBoundColumn>

[Princy]

Hi Anders,

I guess you want to add a RadAutoCompleteBox inside the RadGrid. Please take a look into the below code snippet. Here the RadAutoCompleteBox has been added inside an ItemTemplate of GridTemplateColumn, to show the RadAutoCompleteBox in view mode of RadGrid.

ASPX:

<telerik:GridTemplateColumn UniqueName="TemplateColumn" HeaderText="AutoCompleteColumn">
    <ItemTemplate>
        <telerik:RadAutoCompleteBox ID="RadAutoCompleteItemNo" DataSourceID="SqlDataSource1" runat="server"     DataTextField="ItemNo" DataValueField="ItemNo">
        </telerik:RadAutoCompleteBox>
    </ItemTemplate>
</telerik:GridTemplateColumn>

Let me know if there is any concern.

Thanks,
Princy.

[Anders]

It's working.
But I only want it when I insert a new value.
How do I do that?

[Princy]

Hi Anders,

Please try adding the Control inside the InsertItemTemplate of the GridTemplateColumn as follows.

ASPX:

<telerik:GridTemplateColumn UniqueName="TemplateColumn" HeaderText="AutoCompleteColumn">
    <ItemTemplate>
        <asp:Label ID="lblItemNo" runat="server" Text='<%#Eval("ItemNo")%>'></asp:Label>
    </ItemTemplate>
    <InsertItemTemplate>
        <telerik:RadAutoCompleteBox DataSourceID="SqlDataSource1" runat="server" DataTextField="ItemNo"
            DataValueField="ItemNo" ID="RadAutoCompleteItemNo">
        </telerik:RadAutoCompleteBox>
    </InsertItemTemplate>
</telerik:GridTemplateColumn>

Thanks,
Princy.

[Anders]

Almost there, but how do I pass the value from AutoCompleteBox into the correct db field. 
Right now I only enter a value in my RadAutoCompleteItemNo and the db complains that value cannot be null.
How do I use the GridTemplateColumn alone and without my GridBoundColumn?

Thanks.

<telerik:GridBoundColumn DataField="ItemNo" FilterControlAltText="Filter ItemNo column"
    HeaderText="ItemNo" SortExpression="ItemNo" UniqueName="ItemNo">
</telerik:GridBoundColumn>


<telerik:GridTemplateColumn UniqueName="TemplateColumn" HeaderText="AutoCompleteColumn">
    <ItemTemplate>
        <asp:Label ID="lblItemNo" runat="server" Text='<%#Eval("ItemNo")%>'></asp:Label>
    </ItemTemplate>
    <InsertItemTemplate>
        <telerik:RadAutoCompleteBox ID="RadAutoCompleteItemNo" DataSourceID="sqlDS_mitmas"
            runat="server" DataTextField="ItemNo" DataValueField="ItemNo" TextSettings-SelectionMode="Single"
            InputType="Text" Filter="StartsWith">
        </telerik:RadAutoCompleteBox>
    </InsertItemTemplate>
</telerik:GridTemplateColumn>

[Princy]

Hi Anders,

You can use GridTemplateColumn alone, access the RadAutoCompleteBox in the code behind and insert that record into db.

C#:

protected void RadGrid1_InsertCommand(object sender, GridCommandEventArgs e)
{
 GridEditableItem insertItem = (GridEditableItem)e.Item;
 //Access the RadAutoCompleteBox and get its value
 RadAutoCompleteBox rautocompletetboxItemNo = (RadAutoCompleteBox)insertItem.FindControl("RadAutoCompleteItemNo");
 string itemNo = rautocompletetboxItemNo.Text;
}

Thanks,
Princy

[Anders]

I'm completely lost right now.
Can I use you code in my existing code somewhere?

Protected Sub RadGrid1_ItemDataBound(sender As Object, e As Telerik.Web.UI.GridItemEventArgs) Handles RadGrid1.ItemDataBound
       Dim loggedInUser = User.Identity.Name.ToString()
       Dim currentDateTime As Date = Now()
       Dim trimmedUser As String = loggedInUser.Replace("MYDOMAIN\", "")

       If TypeOf e.Item Is GridEditableItem AndAlso e.Item.IsInEditMode Then

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

           Dim txtLastUpdatedBy As TextBox = DirectCast(edit("LastUpdatedBy").Controls(0), TextBox)
           Dim txtLastUpdated As TextBox = DirectCast(edit("LastUpdated").Controls(0), TextBox)
           txtLastUpdatedBy.Text = trimmedUser
           txtLastUpdated.Text = currentDateTime
       End If

       If TypeOf e.Item Is GridDataItem Then
           Dim dataItem As GridDataItem = CType(e.Item, GridDataItem)

           Dim whs As String = dataItem("Whs").Text
           Dim itemno As String = dataItem("ItemNo").Text
           Dim itemname As String = dataItem("ItemName").Text
           Dim planner As String = dataItem("Planner").Text
           Dim supwhs As String = dataItem("SupWhs").Text
           Dim cause As String = dataItem("Cause").Text
           Dim prelbackinstock As String = dataItem("PrelBackInStock").Text
           Dim quality As String = dataItem("Quality").Text
           Dim supwhssign As String = dataItem("SupWhsSign").Text
           Dim confbackinstock As String = dataItem("ConfBackInStock").Text
           Dim lastupdated As String = dataItem("LastUpdated").Text
           Dim lastupdatedby As String = dataItem("LastUpdatedBy").Text


           Dim button As LinkButton = CType(dataItem("DeleteColumn").Controls(0), LinkButton)
           button.Attributes("onclick") = "return confirm('Are you sure you want to delete " + itemno + " " + itemname + "?')"

       End If
   End Sub

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

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">
            </asp:ScriptReference>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">
            </asp:ScriptReference>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">
            </asp:ScriptReference>
        </Scripts>
    </telerik:RadScriptManager>
    <h1>
        Bristlistan</h1>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:SQL01_ConnString %>"
        DeleteCommand="DELETE FROM myTable WHERE [Id] = ?"
        InsertCommand="INSERT INTO myTable ([Whs], [ItemNo], [ItemName], [SupWhs], [Cause], [PrelBackInStock], [Quality], [SupWhsSign], [ConfBackInStock], [LastUpdated], [LastUpdatedBy], [Planner]) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)"
        ProviderName="<%$ ConnectionStrings:SQL01_ConnString.ProviderName %>"
        SelectCommand="SELECT Id, UPPER(Whs) AS Whs, UPPER(ItemNo) AS ItemNo, UPPER(ItemName) AS ItemName, UPPER(SupWhs) AS SupWhs, Cause, PrelBackInStock, Quality, SupWhsSign, ConfBackInStock, LastUpdated, LastUpdatedBy, UPPER(Planner) AS Planner FROM myTable"
        UpdateCommand="UPDATE myTable SET [Whs] = ?, [ItemNo] = ?, [ItemName] = ?, [SupWhs] = ?, [Cause] = ?, [PrelBackInStock] = ?, [Quality] = ?, [SupWhsSign] = ?, [ConfBackInStock] = ?, [LastUpdated] = ?, [LastUpdatedBy] = ?, [Planner] = ? WHERE [Id] = ?">
        <DeleteParameters>
            <asp:Parameter Name="Id" Type="Int32" />
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="Whs" Type="String" />
            <asp:Parameter Name="ItemNo" Type="String" />
            <asp:Parameter Name="ItemName" Type="String" />
            <asp:Parameter Name="SupWhs" Type="String" />
            <asp:Parameter Name="Cause" Type="String" />
            <asp:Parameter Name="PrelBackInStock" Type="String" />
            <asp:Parameter Name="Quality" Type="String" />
            <asp:Parameter Name="SupWhsSign" Type="String" />
            <asp:Parameter Name="ConfBackInStock" Type="DateTime" />
            <asp:Parameter Name="LastUpdated" Type="DateTime" />
            <asp:Parameter Name="LastUpdatedBy" Type="String" />
            <asp:Parameter Name="Planner" Type="String" />
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="Whs" Type="String" />
            <asp:Parameter Name="ItemNo" Type="String" />
            <asp:Parameter Name="ItemName" Type="String" />
            <asp:Parameter Name="SupWhs" Type="String" />
            <asp:Parameter Name="Cause" Type="String" />
            <asp:Parameter Name="PrelBackInStock" Type="String" />
            <asp:Parameter Name="Quality" Type="String" />
            <asp:Parameter Name="SupWhsSign" Type="String" />
            <asp:Parameter Name="ConfBackInStock" Type="DateTime" />
            <asp:Parameter Name="LastUpdated" Type="DateTime" />
            <asp:Parameter Name="LastUpdatedBy" Type="String" />
            <asp:Parameter Name="Planner" Type="String" />
            <asp:Parameter Name="Id" Type="Int32" />
        </UpdateParameters>
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="sqlDS_mitmas" runat="server" ConnectionString="<%$ ConnectionStrings:SQL01_ConnString %>"
        ProviderName="<%$ ConnectionStrings:SEMO01SQL01_Movex_ConnString.ProviderName %>"
        SelectCommand="SELECT M.MMITNO AS ITEMNO, M.MMITDS AS ITEMNAME, B.MBSUWH AS SUPWHS, M.MMRESP AS ITEMPLANNER FROM MovexData.dbo.MITMAS AS M INNER JOIN MovexData.dbo.MITBAL AS B ON M.MMITNO = B.MBITNO WHERE (M.MMSTAT = 20)">
    </asp:SqlDataSource>
    <telerik:RadGrid ID="RadGrid1" runat="server" AllowAutomaticDeletes="True" AllowAutomaticInserts="True"
        AllowAutomaticUpdates="True" AllowSorting="True" Culture="sv-SE" DataSourceID="SqlDataSource1"
        ShowGroupPanel="True" AutoGenerateEditColumn="True" ShowStatusBar="True" AutoGenerateColumns="False"
        CellSpacing="-1" GridLines="Both" AllowMultiRowEdit="True">
        <ExportSettings>
            <Pdf PageWidth="">
            </Pdf>
        </ExportSettings>
        <ClientSettings AllowDragToGroup="True" Selecting-AllowRowSelect="True">
            <Selecting AllowRowSelect="True"></Selecting>
        </ClientSettings>
        <MasterTableView AutoGenerateColumns="False" DataSourceID="SqlDataSource1" CommandItemDisplay="Top"
            DataKeyNames="Id">
            <Columns>
                <telerik:GridBoundColumn DataField="Id" FilterControlAltText="Filter Id column" HeaderText="Id"
                    SortExpression="Id" UniqueName="Id" DataType="System.Int32" ReadOnly="True" Visible="False">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Whs" FilterControlAltText="Filter Whs column"
                    HeaderText="Whs" SortExpression="Whs" UniqueName="Whs">
                </telerik:GridBoundColumn>




                <%--<telerik:GridBoundColumn DataField="ItemNo" FilterControlAltText="Filter ItemNo column"
                    HeaderText="ItemNo" SortExpression="ItemNo" UniqueName="ItemNo">
                </telerik:GridBoundColumn>--%>


                <telerik:GridTemplateColumn UniqueName="TemplateColumn" HeaderText="AutoCompleteColumn">
                    <ItemTemplate>
                        <asp:Label ID="lblItemNo" runat="server" Text='<%#Eval("ItemNo")%>'></asp:Label>
                    </ItemTemplate>
                    <InsertItemTemplate>
                        <telerik:RadAutoCompleteBox ID="RadAutoCompleteItemNo" DataSourceID="sqlDS_mitmas"
                            runat="server" DataTextField="ItemNo" DataValueField="ItemNo" TextSettings-SelectionMode="Single"
                            InputType="Text" Filter="StartsWith">
                        </telerik:RadAutoCompleteBox>
                    </InsertItemTemplate>
                </telerik:GridTemplateColumn>






                <telerik:GridBoundColumn DataField="ItemName" FilterControlAltText="Filter ItemName column"
                    HeaderText="ItemName" SortExpression="ItemName" UniqueName="ItemName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Planner" FilterControlAltText="Filter Planner column"
                    HeaderText="Planner" SortExpression="Planner" UniqueName="Planner" InsertVisiblityMode="AlwaysHidden">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="SupWhs" FilterControlAltText="Filter SupWhs column"
                    HeaderText="SupWhs" SortExpression="SupWhs" UniqueName="SupWhs" InsertVisiblityMode="AlwaysHidden">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Cause" FilterControlAltText="Filter Cause column"
                    HeaderText="Cause" SortExpression="Cause" UniqueName="Cause">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="PrelBackInStock" FilterControlAltText="Filter PrelBackInStock column"
                    HeaderText="PrelBackInStock" SortExpression="PrelBackInStock" UniqueName="PrelBackInStock">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Quality" FilterControlAltText="Filter Quality column"
                    HeaderText="Quality" SortExpression="Quality" UniqueName="Quality">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="SupWhsSign" FilterControlAltText="Filter SupWhsSign column"
                    HeaderText="SupWhsSign" SortExpression="SupWhsSign" UniqueName="SupWhsSign">
                </telerik:GridBoundColumn>
                <telerik:GridDateTimeColumn DataField="ConfBackInStock" FilterControlAltText="Filter ConfBackInStock column"
                    HeaderText="ConfBackInStock" SortExpression="ConfBackInStock" UniqueName="ConfBackInStock"
                    DataType="System.DateTime" DataFormatString="{0:yyyy-MM-dd}">
                </telerik:GridDateTimeColumn>
                <telerik:GridBoundColumn DataField="LastUpdated" FilterControlAltText="Filter LastUpdated column"
                    HeaderText="LastUpdated" SortExpression="LastUpdated" UniqueName="LastUpdated"
                    DataType="System.DateTime">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="LastUpdatedBy" FilterControlAltText="Filter LastUpdatedBy column"
                    HeaderText="LastUpdatedBy" SortExpression="LastUpdatedBy" UniqueName="LastUpdatedBy">
                </telerik:GridBoundColumn>
                <telerik:GridButtonColumn CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">
                </telerik:GridButtonColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
</asp:Content>

[Princy]

Hi Anders,

I see that you are using Automatic Crud operation for you Grid. I suggest that you use GridAutoCompleteColumn rather than RadAutoCompleteBox in GridTemplateColumn. When in browser mode, the column looks and behaves like GridBoundColumn. It renders text inside the cell, depending on the DataField of the column and the data source of the owner GridTableView. In insert/edit mode, it displays RadAutoCompleteBox for each edited cell in the column.

ASPX:

<telerik:GridAutoCompleteColumn DataTextField="ItemNo" DataValueField="ItemNo" DataField="ItemNo" DataSourceID="SqlDataSource1" Filter="StartsWith" InputType="Text" HeaderText="ItemNo">
</telerik:GridAutoCompleteColumn>

Thanks,
Princy

[Anders]

Thank you very much Princy.
It's working perfectly.

Last question: Is there an easy way to fill the ItemName, Planner, SupWhs textbox depending on what value I've selected in the ItemNo textbox?
Or maybe hide them in edit mode and take care of that on INSERT in the code-behind?

-Anders

[Princy]

Hi Anders,

• To hide columns in EditMode you can try the following code snippet:

C#:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
  if (e.Item is GridEditableItem && e.Item.IsInEditMode && !e.Item.OwnerTableView.IsItemInserted)
  {
   GridEditableItem editItem = (GridEditableItem)e.Item;
   //Hide columns in editmode using UniqueName
   editItem["ItemName"].Parent.Visible = false;
   editItem["Planner"].Parent.Visible = false;
  }
}

• To set text to other TextBox values depending on the selected value in RadAutoCompleteBox, try the following

C#:      

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridEditableItem && e.Item.IsInEditMode)
    {
        GridEditableItem editItem = (GridEditableItem)e.Item;
        RadAutoCompleteBox rautocompleteboxItemNo = (RadAutoCompleteBox)editItem["ItemNo"].Controls[0];
        rautocompleteboxItemNo.AutoPostBack = true;
        // if RadAutoCompleteBox InputType="Token" use
        rautocompleteboxItemNo.EntryAdded += new AutoCompleteEntryEventHandler(rautocompleteboxItemNo_EntryAdded);
        // if RadAutoCompleteBox InputType="Text" use
        rautocompleteboxItemNo.TextChanged+=new AutoCompleteTextEventHandler(rautocompleteboxItemNo_TextChanged);
    }
}

void rautocompleteboxItemNo_EntryAdded(object sender, AutoCompleteEntryEventArgs e)
{
    RadAutoCompleteBox rautocompleteboxItemNo = (RadAutoCompleteBox)sender;
    GridEditableItem editItem = (GridEditableItem)rautocompleteboxItemNo.NamingContainer;
    TextBox txtItemName = (TextBox)editItem["ItemName"].Controls[0];
    txtItemName.Text = "Set Text";
}
void rautocompleteboxItemNo_TextChanged(object sender, AutoCompleteTextEventArgs e)
{
    //Same code as in EntryAdded function
}

Thanks,
Princy

 

[BoddaGetta]

This works great, but I need to update several columns in the database record when they change the entry in the RadAutoCompleteBox.  Is there a way to get the DataKeyValue for the changed record, maybe similar to they way it's done with GridEditableItem ?

[BoddaGetta]

Please ignore my last post.  I just realized this thread is not the same one I looked at yesterday, and this one might solve my problem.