locked
Get Id of AutoComplete inside repeater RRS feed

  • Question

  • User1126057398 posted

    I had used RadAutoCompleteBox inside Repeater. I can get selected text but unable to get selected value. How can this be done?

    <telerik:RadAutoCompleteBox runat="server" ID="txtWeekdayActivity" CssClass="weekdayact" DropDownHeight="100" Width="250" TextSettings-SelectionMode="Single" EmptyMessage="Enter Activity Name to Search..." OnClientLoad="OnClientLoad"  Skin="Bootstrap">
    <WebServiceSettings Path="~/Service_Telerik.asmx" Method="GetPAActivitySearchListExtnAutoTelerik" />
    </telerik:RadAutoCompleteBox> 

    $(".btnweekadd").click(function (e) {
    if ($(this).parent().parent().find(".weekdayact").val() == '') {
    alert('Select Activity');
    return false;
    }
    if ($(this).parent().parent().find(".cduration").val() == '') {
    alert('Enter Duration');
    return false;
    }
    else {
    alert($(this).parent().parent().find(".weekdayact").val());   //displays selected text
    }
    return true;
    });

    Wednesday, June 26, 2019 9:07 AM

Answers

  • User1126057398 posted

    Resolved the issue like below:

    <asp:Repeater ID="repWeekDayActivity" runat="server">
    <HeaderTemplate>
    <table class="table table-hover" border="1">
    <tr>
    <th scope="col">Week Days</th>
    <th scope="col">Activity Name</th>
    <th scope="col">Duration(Min)</th>
    <th scope="col">&nbsp;</th>
    </tr>
    </HeaderTemplate>
    <ItemTemplate>
    <tr>
    <td>
    <a class="aweekdy" id="ancWeekday"><%#Eval("WeekDay") %></a>
    <asp:HiddenField ID="hfWeekDayId" Value='<%#Eval("WeekDayId") %>' runat="server" />
    </td>
    <td class="disablecol">
    <telerik:RadAutoCompleteBox runat="server" Enabled="false" ID="txtWeekdayActivity" CssClass="weekdayact" DropDownHeight="100" Width="250" TextSettings-SelectionMode="Single" EmptyMessage="Enter Activity Name to Search..." OnClientLoad="OnClientLoad" Skin="Bootstrap">
    <WebServiceSettings Path="~/Service_Telerik.asmx" Method="GetPAActivitySearchListExtnAutoTelerik" />
    </telerik:RadAutoCompleteBox>
    </td>
    <td class="disablecol">
    <asp:TextBox ID="txtDuration" Enabled="false" runat="server" onkeypress="return validateDecimal(event)" class="form-control cduration"></asp:TextBox></td>
    <td class="disablecol">
    <asp:Button ID="btnweekActivityAdd" Enabled="false" Text="Add" runat="server" CssClass="btn btn-primary btnweekadd" OnClick="AddSpecificWeekDayDtl" />
    </td>
    </tr>
    </ItemTemplate>
    <FooterTemplate>
    </table>
    </FooterTemplate>
    </asp:Repeater>

    $(".btnweekadd").click(function () { //Get RadAutoComplete Selected Value in Repeater
    var row = $(this).closest('tr');
    // alert(row.find(".weekdayact").val()); //Selected Text
    //alert(row.find(".weekdayact").html());
    var htmltext = row.find(".weekdayact").html(); alert(htmltext);
    var inputVal = $(htmltext).filter('input[type=hidden]').val(); //alert(inputVal);
    if ($.parseJSON(inputVal).logEntries.length > 0)
    {
    var dataobj = $.parseJSON(inputVal).logEntries[0].Data.value; // alert(JSON.stringify(dataobj));
    var selactval = JSON.stringify(dataobj); alert(selactval);
    if (selactval != '')
    $('#<%=hfActivityNameId.ClientID%>').val(selactval.split('|')[2]);
    // alert($('#<%=hfActivityNameId.ClientID%>').val()); //Selected Value

    if ($('#<%=hfActivityNameIds.ClientID%>').val() != '') {
    var arr = $('#<%=hfActivityNameIds.ClientID%>').val().split(',');
    var exists = arr.indexOf($('#<%=hfActivityNameId.ClientID%>').val().split('|')[0]);
    if (exists !== -1) // Original string contains value in hfActivityNameId
    {
    alert('Details corresponding to this activity already exists!!!');
    return false;
    }
    }
    }
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 9, 2019 12:27 PM

All replies

  • User475983607 posted

    Telerik is a paid for framework that many of us on this forum do not own and therefore cannot reproduce the issue.  I recommend visiting Telerik support for help with Telerik controls.  That would be your best option.

    Otherwise, do basic troubleshooting.  Use the browser's dev tools (F12) to inspect the HTML generated by the RadAutoCompleteBox.  Then verify the actual selector needed to access the autocomplete selected value.  I assume the value is located in a hidden field.  Keep in mind that Telerik could probably has a property or method to fetch the value  being RadAutoCompleteBox is a JavaScript control.  Just read the docs!

    Wednesday, June 26, 2019 11:25 AM
  • User1126057398 posted

    Any  Suggestion......

    Though I can do it like below if not placed inside Repeater. But when I place it inside Repeater I can't access like $find("<%= txtSearchActivity.ClientID %>"). How can this be done?

      var autoCompleteBox = $find("<%= txtSearchActivity.ClientID %>");
    autoCompleteBox.get_entries().getEntry(0).get_text()
    autoCompleteBox.get_entries().getEntry(0).get_value()
    Wednesday, June 26, 2019 11:33 AM
  • User475983607 posted

    Of course the following will not work because there are many controls not 1.  Plus an ID selector will find the first one.

     var autoCompleteBox = $find("<%= txtSearchActivity.ClientID %>");

    For the second time, use the browser's Dev Tools to inspect the HTML.  You can right click on a element and copy the selector.  The selector will be exact while you need "find" but it should provide the path that you need.  Please use your debugging tools.

    Wednesday, June 26, 2019 11:49 AM
  • User1126057398 posted

    No. This is not working because 'txtSearchActivity' is inside repeater.

    Thursday, June 27, 2019 9:06 AM
  • User475983607 posted

    No. This is not working because 'txtSearchActivity' is inside repeater.
    

    I'm not sure what's "not working".  I assume you are having some difficulty using the browser's dev tools.  

    Can you share the actual HTML?  Not the aspx markup but the HTML in browser. 

    Thursday, June 27, 2019 11:37 AM
  • User1126057398 posted

    Autocomplete inside repeater create Html like below when I select say 'Activity1'. What I want to get is Autocomplete value ie.  11|16|5149|2.5|No Exercise/Very less Exercise

    <td class="" disabled="disabled">
    <div id="ctl00_head_UC_Diet_PhysicalActivity_Plan1_repWeekDayActivity_ctl04_txtWeekdayActivity" disabled="disabled" class="RadAutoCompleteBox RadAutoCompleteBox_Bootstrap weekdayact" style="width:250px;">
    <div class="racTokenList racDisabled">
    <span class="racToken">Activity1<a class="racRemoveTokenLink" title="Remove token"><span class="p-icon p-i-close"></span></a></span><input class="racInput radPreventDecorate" name="ctl00$head$UC_Diet_PhysicalActivity_Plan1$repWeekDayActivity$ctl04$txtWeekdayActivity" type="text" id="ctl00_head_UC_Diet_PhysicalActivity_Plan1_repWeekDayActivity_ctl04_txtWeekdayActivity_Input" autocomplete="off" size="32" style="width: 10px;"><span class="racLoadingIcon" style="display: none;"></span>
    </div><input id="ctl00_head_UC_Diet_PhysicalActivity_Plan1_repWeekDayActivity_ctl04_txtWeekdayActivity_ClientState" name="ctl00_head_UC_Diet_PhysicalActivity_Plan1_repWeekDayActivity_ctl04_txtWeekdayActivity_ClientState" type="hidden" value="{&quot;enabled&quot;:false,&quot;logEntries&quot;:[{&quot;Type&quot;:1,&quot;Index&quot;:0,&quot;Data&quot;:{&quot;text&quot;:&quot; Activity1&quot;,&quot;value&quot;:&quot;11|16|5149|2.5|No Exercise/Very less Exercise&quot;}}]}" autocomplete="off">
    </div>
    </td>

    Tuesday, July 9, 2019 7:55 AM
  • User1126057398 posted

    Resolved the issue like below:

    <asp:Repeater ID="repWeekDayActivity" runat="server">
    <HeaderTemplate>
    <table class="table table-hover" border="1">
    <tr>
    <th scope="col">Week Days</th>
    <th scope="col">Activity Name</th>
    <th scope="col">Duration(Min)</th>
    <th scope="col">&nbsp;</th>
    </tr>
    </HeaderTemplate>
    <ItemTemplate>
    <tr>
    <td>
    <a class="aweekdy" id="ancWeekday"><%#Eval("WeekDay") %></a>
    <asp:HiddenField ID="hfWeekDayId" Value='<%#Eval("WeekDayId") %>' runat="server" />
    </td>
    <td class="disablecol">
    <telerik:RadAutoCompleteBox runat="server" Enabled="false" ID="txtWeekdayActivity" CssClass="weekdayact" DropDownHeight="100" Width="250" TextSettings-SelectionMode="Single" EmptyMessage="Enter Activity Name to Search..." OnClientLoad="OnClientLoad" Skin="Bootstrap">
    <WebServiceSettings Path="~/Service_Telerik.asmx" Method="GetPAActivitySearchListExtnAutoTelerik" />
    </telerik:RadAutoCompleteBox>
    </td>
    <td class="disablecol">
    <asp:TextBox ID="txtDuration" Enabled="false" runat="server" onkeypress="return validateDecimal(event)" class="form-control cduration"></asp:TextBox></td>
    <td class="disablecol">
    <asp:Button ID="btnweekActivityAdd" Enabled="false" Text="Add" runat="server" CssClass="btn btn-primary btnweekadd" OnClick="AddSpecificWeekDayDtl" />
    </td>
    </tr>
    </ItemTemplate>
    <FooterTemplate>
    </table>
    </FooterTemplate>
    </asp:Repeater>

    $(".btnweekadd").click(function () { //Get RadAutoComplete Selected Value in Repeater
    var row = $(this).closest('tr');
    // alert(row.find(".weekdayact").val()); //Selected Text
    //alert(row.find(".weekdayact").html());
    var htmltext = row.find(".weekdayact").html(); alert(htmltext);
    var inputVal = $(htmltext).filter('input[type=hidden]').val(); //alert(inputVal);
    if ($.parseJSON(inputVal).logEntries.length > 0)
    {
    var dataobj = $.parseJSON(inputVal).logEntries[0].Data.value; // alert(JSON.stringify(dataobj));
    var selactval = JSON.stringify(dataobj); alert(selactval);
    if (selactval != '')
    $('#<%=hfActivityNameId.ClientID%>').val(selactval.split('|')[2]);
    // alert($('#<%=hfActivityNameId.ClientID%>').val()); //Selected Value

    if ($('#<%=hfActivityNameIds.ClientID%>').val() != '') {
    var arr = $('#<%=hfActivityNameIds.ClientID%>').val().split(',');
    var exists = arr.indexOf($('#<%=hfActivityNameId.ClientID%>').val().split('|')[0]);
    if (exists !== -1) // Original string contains value in hfActivityNameId
    {
    alert('Details corresponding to this activity already exists!!!');
    return false;
    }
    }
    }
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 9, 2019 12:27 PM