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

GridAutoCompleteColumn - JQuery Autocomplete?

1 Answer 27 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ben
Top achievements
Rank 1
Ben asked on 28 Mar 2017, 02:19 AM

I used to have a page with a JQuery Autocomplete. It used 2 textboxes, one for the text search, and one for the returned value.

It was setup like this

//AutoComplete functions
        $(document).ready(function () {
 
            $(function () {
                initializer();
            });
 
            var prmInstance = Sys.WebForms.PageRequestManager.getInstance();
            prmInstance.add_endRequest(function () {
 
                initializer();
 
            });
 
            jQuery(function ($) {
 
                $('#<%=txtPBId.ClientID%>').change(function (e) {
                    var val = $(this).val();
                    if (val == '')
                        $('#<%=hdnPBId.ClientID%>').val("");
                });
 
            });
 
            // Setup AutoComplete
            function initializer() {
 
                $('#<%=txtPBId.ClientID%>').autocomplete({
                    cacheLength: 1,
                    source: function (request, response) {
                        $.ajax({
                            url: "../WS/AutoComplete.aspx",
                            dataType: "json",
                            data: {
                                term: request.term,
                                ref: 1,
                                random: new Date().getTime()
                            },
                            success: function (data) {
                                response(data);
                                $('#<%=hdnPBId.ClientID%>').val("");
                            },
                            error: function (model, error) {
                                $('#<%=hdnPBId.ClientID%>').val("");
                                //alert("No code found.");
                            }
 
                        });
                    },
                    select: function (event, ui) {
                        $('#<%=hdnPBId.ClientID%>').val(ui.item.idval);
                    }
                });
 
            }
 
        });

 

I now want to use a RadGrid with InPlace Editing. Is there any way of tying a GridAutoCompleteColumn to the above?

I can't use Datasources/Tablenames etc.

1 Answer, 1 is accepted

Sort by
0
Ben
Top achievements
Rank 1
answered on 29 Mar 2017, 05:12 AM

Just to update .. 

Used a GridTemplateColumn, with a textbox in. Uses 'onfocus' to add the AutoComplete.

<asp:TextBox class="standardTextBox" ID="txtSM" runat="server" onfocus="OnFocus(this,event)"/>

Then in the ItemTemplate, I added a RadScriptBlock

<telerik:RadScriptBlock ID="RadScriptBlockServiceMaster" runat="server">
                                                            <script type="text/javascript">
                                                                function OnFocus(sender, args) {
                                                                    var txt = sender;
                                                                    $(txt).autocomplete({
                                                                            cacheLength: 1,
                                                                            source: function (request, response) {
                                                                                $.ajax({
                                                                                    url: "../WS/AutoComplete.aspx",
                                                                                    dataType: "json",
                                                                                    data: {
                                                                                        term: request.term,
                                                                                        ref: 1,
                                                                                        random: new Date().getTime()
                                                                                    },
                                                                                    success: function (data) {
                                                                                        response(data);
                                                                                        $('#<%=hdnValue.ClientID%>').val("");
                                                                                        $('#<%=hdnLabel.ClientID%>').val("");
                                                                                    },
                                                                                    error: function (model, error) {
                                                                                        $('#<%=hdnValue.ClientID%>').val("");
                                                                                        $('#<%=hdnLabel.ClientID%>').val("");
                                                                                        //alert("No code found.");
                                                                                    }
 
                                                                                });
                                                                            },
                                                                        select: function (event, ui) {
                                                                            $('#<%=hdnValue.ClientID%>').val(ui.item.idval);
                                                                            $('#<%=hdnLabel.ClientID%>').val(ui.item.label);
                                                                            $('#<%=btnChanged.ClientID%>').click();
                                                                        }
                                                                    });
                                                                }
 
                                                            </script>
                                                        </telerik:RadScriptBlock>

Then tucked away outside the Grid, objects to store the Value / Description, and call the ServerSide

<asp:HiddenField ID="hdnLabel" runat="server" />
<asp:HiddenField ID="hdnValue" runat="server" />
<asp:Button ID="btnChanged" CssClass="wilsarButton" runat="server" Text="Hidden Action Refresh" CausesValidation="false" style="display: none;" />

Server side I then put the values where I need them.

 

Tags
Grid
Asked by
Ben
Top achievements
Rank 1
Answers by
Ben
Top achievements
Rank 1
Share this question
or