RadAutoCompleteBox inside RadGrid

12 posts, 0 answers
  1. Anders
    Anders avatar
    9 posts
    Member since:
    Feb 2011

    Posted 19 Jun 2014 Link to this post

    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>
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 19 Jun 2014 in reply to Anders Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Anders
    Anders avatar
    9 posts
    Member since:
    Feb 2011

    Posted 19 Jun 2014 in reply to Princy Link to this post

    It's working.
    But I only want it when I insert a new value.
    How do I do that?
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 19 Jun 2014 in reply to Anders Link to this post

    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.
  6. Anders
    Anders avatar
    9 posts
    Member since:
    Feb 2011

    Posted 23 Jun 2014 in reply to Princy Link to this post

    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>
  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 23 Jun 2014 in reply to Anders Link to this post

    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
  8. Anders
    Anders avatar
    9 posts
    Member since:
    Feb 2011

    Posted 23 Jun 2014 in reply to Princy Link to this post

    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>
  9. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 23 Jun 2014 in reply to Anders Link to this post

    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
  10. Anders
    Anders avatar
    9 posts
    Member since:
    Feb 2011

    Posted 24 Jun 2014 Link to this post

    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
  11. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 25 Jun 2014 in reply to Anders Link to this post

    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

     

  12. BoddaGetta
    BoddaGetta avatar
    5 posts
    Member since:
    Dec 2012

    Posted 05 Feb 2015 in reply to Princy Link to this post

    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 ?
  13. BoddaGetta
    BoddaGetta avatar
    5 posts
    Member since:
    Dec 2012

    Posted 05 Feb 2015 in reply to BoddaGetta Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017