Выпадающий список внутри Gridview не сохраняет цвет фона при обратной передаче

У меня есть <asp:DropDownList> внутри <asp:TemplateField>в GridView:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="DatosTablaHandoff">
        <Columns>
            <asp:TemplateField HeaderText="STATUS">
                <ItemTemplate>
                    <asp:DropDownList ID="DropDownGV" runat="server" onchange="SetDropDownListColor(this);">
                    <asp:ListItem>Select...</asp:ListItem>
                    <asp:ListItem>Complete</asp:ListItem>
                    <asp:ListItem>Running</asp:ListItem>
                    <asp:ListItem>Waiting in SEV 1</asp:ListItem>
                    <asp:ListItem>No Batch</asp:ListItem>
                </asp:DropDownList>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

И у меня есть скрипт в js для установки «цвета фона элемента» в зависимости от выбранного элемента:

function SetDropDownListColor(ddl) {
        for (var i = 0; i < ddl.options.length; i++) {
            if (ddl.options[i].selected) {
                switch (i) {
                    case 0:
                        ddl.style.backgroundColor = 'White';
                        return;
                    case 1:
                        ddl.style.backgroundColor = 'lightgreen';
                        return;
                    case 2:
                        ddl.style.backgroundColor = 'Yellow';
                        return;
                    case 3:
                        ddl.style.backgroundColor = 'orangered';
                        return;
                    case 4:
                        ddl.style.backgroundColor = 'Grey';
                        return;
                }
            }
        }
    }

Он работает нормально. Но при постбэке цвет уходит. DropDown в каждой строке остается с выбранным значением, как я хочу, но с белым цветом фона.

У меня есть этот другой скрипт (вне функции), чтобы «сохранить» цвет при обратной передаче, но он работает только в том случае, если DropDownList находится за пределами GridView:

window.addEventListener('load', function () { SetDropDownListColor(document.getElementById('<%= DropDownList1.ClientID %>')); }, false);

javascript drop-down-menu dropdown gridview asp.net
person Denis Soto    schedule 04.05.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете дать всем своим DropDownList CssClass, а затем пройтись по этой коллекции элементов, чтобы вызвать вашу функцию SetDropDownListColor.

Что-то вроде этого:

.СЕТЬ

<asp:DropDownList ID="DropDownGV" runat="server" CssClass="ddl" onchange="SetDropDownListColor(this);">

JS

    window.addEventListener('load', function () {
        var ddls = document.querySelectorAll(".ddl");
        for (var i = 0, length = ddls.length; i < length; i++) {
            SetDropDownListColor(ddls[i]);
        }
    }, false);
person zgood    schedule 04.05.2016
comment
Проблема в том, что вы пытаетесь привязать событие загрузки к раскрывающемуся списку шаблона, которого не существует. Как говорит zgood, вы должны предоставить какой-то способ идентификации каждого из различных раскрывающихся списков. Класс является типичным и самым простым способом сделать это. - person fermin.saez; 04.05.2016
comment
Спасибо! это не на 100% правильно, потому что мне пришлось внести некоторые изменения, но это очень помогает! Вот что у меня работает: getElementsByTagName('select');for (var i = 0; i ‹ dropdowns.length; i++) { SetDropDownListColor(dropdowns[i]); } }, false); - person Denis Soto; 04.05.2016

arrow_upward
1
arrow_downward

Спасибо! это не на 100% правильно, потому что мне пришлось внести некоторые изменения, но это очень помогает! Это то, что работает для меня:

window.addEventListener('load', function () {
var dropdowns = new Array(); 
var gridview = document.getElementById('<%= GridView1.ClientID %>'); 
dropdowns = gridview.getElementsByTagName('select'); 
for (var i = 0; i < dropdowns.length; i++) { 
SetDropDownListColor(dropdowns[i]); } }, false);
person Denis Soto    schedule 04.05.2016