RadComboBox - получение объекта ComboBox из его выпадающего DOM-элемента и наоборот - PullRequest
Новая
       7

RadComboBox - получение объекта ComboBox из его выпадающего DOM-элемента и наоборот

0 голосов
/ 08 февраля 2011

(Это копия сообщения, которое я добавил на форумы Telerik )

Я создаю элемент управления, расширяющий RadComboBox для использования RadTreeView в качестве дочернего элемента (этокомбинированный список, в основном - http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/treeviewcombobox/defaultcs.aspx).

Элемент управления использует множество клиентского JavaScript для обеспечения таких вещей, как автозаполнение и ввод произвольного текста для элементов, помеченных для принятия «другого» текста.

Все отлично работает, за исключением проблем, которые я искал один объект от другого в JS. Разметка является стандартом, который Telerik использует в своей демонстрации и предлагает в своих образцах материалов: 

<div class="MyControl">
<asp:Label AssociatedControlID="RadComboBox1" Text="Field label: " runat="server" ID="treeListLabel" />
<telerik:RadComboBox ID="RadComboBox1" runat="server" CssClass="SearchableTreeCombo">
    <ItemTemplate>
        <div id="div1">
            <telerik:RadTreeView ID="RadTreeView" runat="server" CssClass="SearchableTreeView" />
        </div>
    </ItemTemplate>
    <Items>
        <telerik:RadComboBoxItem runat="server" Value="RadComboBoxItem1" />
    </Items>
</telerik:RadComboBox>
</div>

HTMLоднако получаемый сигнал выглядит следующим образом: 

<html>
  <body>
    <form>
      <div class="rcbSlide">
        <div id="RadComboBox1_DropDown" class="RadComboBoxDropDown" ></div>
      </div>

      <div class="MyCustomControl">
        <label for="RadComboBox1" id="treeListLabel">Field Label: </label>
        <div id="RadComboBox1" class="RadComboBox RadComboBox_Default SearchableTreeCombo">
          <input id="RadComboBox1_ClientState" name="RadComboBox1_ClientState" type="hidden">
        </div>
      </div>
    </form>
  </body>
</html>

Проблема заключается в том, что RadComboBox, по-видимому, вводит раскрывающееся содержимое далеко от фактического элемента управления (они находятся в элементе 'rcbSlide' непосредственно после формытег открыт).

Поскольку это элемент управления, он может появляться несколько раз в одной форме, поэтому я хотел бы использовать JaVaScript, который работает с использованием относительного положения.Чтобы усложнить ситуацию, я также динамически помещаю эти элементы управления в коде позади.Это делает отслеживание идентификаторов управления гораздо более утомительным (но все же выполнимым).

Например, я хочу иметь такую ​​функцию: 

function GetRadComboBoxFromRadTreeViewElement(treeViewElement) {
    var htmlRoot = $(treeViewElement).closest('div.MyCustomControl'); // walk up to control container
    var comboBoxDiv = $(htmlRoot).find('div.SearchableTreeCombo'); // find ComboBox container
    return $find($(comboBoxDiv).attr('id')); // look up ComboBox object from containing div id
}

По сути, учитывая некоторый элемент изTreeView (который находится в выпадающем списке «rcbSlide»), я хотел бы пройтись по дереву DOM, пока не попаду в контейнер управления, и оттуда я могу найти div, где живут ComboBox или TreeView, и загрузить их через $ findчтобы получить доступ к их API на стороне клиента.

Это взрывается, поскольку раскрывающийся список отображается вне контейнера элемента управления - я не могу использовать этот метод для поиска одного или другого.

Итак,Мой вопрос состоит из двух частей: 1. Можете ли вы изменить, где RadComboBox выдает свои выпадающие элементы?В частности, могу ли я заставить их отображаться внутри (или в пределах уровня) фактического RadComboBox?2. Есть ли другая стратегия, которую я могу использовать, чтобы заставить мой JS вести себя относительно?

Единственное решение, которое я могу придумать, - создать копию JavaScript для каждого экземпляра элемента управления и задать конкретные идентификаторы элемента управления для каждой копии JS (используя выражение форматирования строки при визуализации элемента управления).Это, очевидно, раздувает HTML и добавляет потенциально десятки килобайт избыточного JavaScript к каждой странице, которая отличается только в нескольких небольших местах.

1 Ответ

0 голосов
/ 09 февраля 2011

Я понял, что клиентский API предоставляет все необходимое для выполнения одностороннего поиска от ComboBox до его выпадающего элемента.Остальное можно сделать с помощью jQuery и функции each (): 

// given an HTML element somewhere inside the TreeView, gets the RadComboBox object
function GetRadComboBoxFromRadTreeViewElement(treeViewElement) {
    var treeViewBaseElement = $(treeViewElement).closest('div.SearchableTreeView'); // this is the container div for the RadTreeView
    var comboBox;
    $('div.MyControl div.SearchableTreeCombo').each(
    function () {
        var someComboBox = $find($(this).attr('id'));
        var someTreeViewContainer = $(someComboBox.get_dropDownElement()).find('div.SearchableTreeView');

        if ($(treeViewBaseElement).attr('id') == $(someTreeViewContainer).attr('id')) {
            comboBox = someComboBox;
            return false;
        }
    }
    );
    return comboBox;
}

// given an HTML element inside a combobox, gets the treeview associated with it
function GetRadTreeViewFromRadComboBox(comboBox) {
    var treeViewElement = $(comboBox.get_dropDownElement()).find('div.SearchableTreeView');
    return $find($(treeViewElement).attr('id'));
}

Я добавил чуть больше описания на форумах Telerik (см. Ссылку в моем вопросе).

Вряд ли кто-то сможет когда-либо это нужно для чего угодно, но я оставляю код здесь на всякий случай - этот заставил меня чесать голову в течение нескольких дней.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...