I am using a couple of jquery chosen dropdowns in a nested gridview. When I call the .change event, the only way I can identify the chosen dropdowns is to use $("select"). The problem is that I have one dropdown that is not a chosen type and the initial value of this dropdown is set to the empty string and I don't want that has an option for this dropdown. So, when it displays, it is shown as very narrow.
This is the function call:
$(function () {
bindEvents();
});
//This change function is when the Device grid is in Insert Mode
function bindEvents() {
$(document).on("change", "#recdevgvDDListDeviceNameInsert", function () {
$("select").prop("disabled", false);
$("select:not(.chosen-select, .no-chosen)").chosen({
search_contains: true,
width: "200px",
no_results_text: "Sorry, no match!"
});
var DeviceSelValue = $(this).val();
//This is the problem...
//I need to set the dropdown to the empty string
//this function call does not work
// $("#recdevgvDDListServiceNameInsert").val('');
//This function call does work but sets all of the dropdowns to empty.
$("select").val('');
// $("#recdevgvDDListServiceNameInsert").children("option").hide();
$("select").children("option").hide();
$("select").trigger("chosen:updated");
//$("#recdevgvDDListServiceNameInsert").trigger("chosen:updated");
switch (DeviceSelValue) {
case "1":
// $("#recdevgvDDListServiceNameInsert option[value*='cell']").show();
// $("#recdevgvDDListServiceNameInsert").trigger("chosen:updated");
$("select option[value*='cell']").show();
$("select").trigger("chosen:updated");
$("#recdevgvAddressExtInsert").hide();
break;
case "2":
// $("#recdevgvDDListServiceNameInsert option[value*='email']").show();
// $("#recdevgvDDListServiceNameInsert").trigger("chosen:updated");
$("select option[value*='email']").show();
$("select").trigger("chosen:updated");
$("#recdevgvAddressExtInsert").hide();
break;
case "3":
// $("#recdevgvDDListServiceNameInsert option[value*='page']").show();
// $("#recdevgvDDListServiceNameInsert").trigger("chosen:updated");
$("select option[value*='page']").show();
$("select").trigger("chosen:updated");
$("#recdevgvAddressExtInsert").hide();
break;
default:
break;
}
});
};
This is the markup of the nested gridview:
<asp:UpdatePanel ID="updatePnlDeviceNestedGrid" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="div<%# Eval("RecipientID") %>" style="display:none">
<asp:GridView ID="RecipientDeviceGridView" runat="server" AutoGenerateColumns="false" CssClass="grid" ShowFooter="true" Caption="Device Information"
CaptionAlign="Top" AllowPaging="true" PageSize="3" HorizontalAlign="Left"
onpageindexchanging="RecipientDeviceGridView_PageIndexChanging"
OnPageIndexChanged="RecipientDeviceGridView_PageIndexChanged"
onrowcommand="RecipientDeviceGridView_RowCommand"
onrowediting="RecipientDeviceGridView_RowEditing"
onrowupdating="RecipientDeviceGridView_RowUpdating"
OnRowCancelingEdit="RecipientDeviceGridView_RowCancelingEdit"
OnRowDeleting="RecipientDeviceGridView_RowDeleting"
OnRowDataBound="RecipientDeviceGridView_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="DeviceID">
<ItemTemplate>
<asp:Label ID="recdevgvLblDeviceID" runat="server" Text='<%# Bind("DeviceID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Device" ItemStyle-Wrap="false">
<ItemTemplate>
<asp:Label ID="recdevgvDeviceID" runat="server" Visible="false" Text='<%# Bind("DeviceID") %>'></asp:Label>
<asp:Label ID="recdevgvLblDeviceName" runat="server" Text='<%# Bind("DeviceName") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="recdevgvEditDeviceID" runat="server" Visible="false" Text='<%# Bind("DeviceID") %>'></asp:Label>
<asp:Label ID="recdevgvEditDeviceName" runat="server" Visible="false" Text='<%# Bind("DeviceName") %>'></asp:Label>
<asp:DropDownList ID="recdevgvDDListDeviceName" runat="server" ClientIDMode="Static"
data-placeholder="Choose device…" class="chosen-single">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="recdevReqValueDDLDeviceNameEdit" runat="server"
ControlToValidate="recdevgvDDListDeviceName" ValidationGroup="recdevEditDeviceValidation"
ErrorMessage="Selection required." CssClass="message-error-dropdown">
</asp:RequiredFieldValidator>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="recdevgvDDListDeviceNameInsert" runat="server" ClientIDMode="Static"
data-placeholder="Choose device..." class="chosen-single">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="recdevReqValueDDLDeviceNameInsert" runat="server" InitialValue="0"
ControlToValidate="recdevgvDDListDeviceNameInsert" ValidationGroup="recdevInsertDeviceValidation"
ErrorMessage="Selection required." CssClass="message-error-dropdown">
</asp:RequiredFieldValidator>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Service Provider">
<ItemTemplate>
<asp:Label ID="recdevgvLblServiceName" runat="server" Text='<%# Bind("ServiceName") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="recdevgvEditServiceName" runat="server" Visible="false" Text='<%# Bind("ServiceName") %>'></asp:Label>
<asp:DropDownList ID="recdevgvDDListServiceName" runat="server" ClientIDMode="Static"
OnSelectedIndexChanged="RecipientDeviceGridView_SelectedIndexChanged_EditServiceName" AutoPostBack="true" EnableViewState="true"
data-placeholder="Choose service…" class="chosen-single">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="recdevReqValueDDLServiceNameEdit" runat="server"
ControlToValidate="recdevgvDDListServiceName" ValidationGroup="recdevEditDeviceValidation"
ErrorMessage="Selection required." CssClass="message-error-dropdown">
</asp:RequiredFieldValidator>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="recdevgvDDListServiceNameInsert" runat="server" ClientIDMode="Static" Enabled="false"
OnSelectedIndexChanged="RecipientDeviceGridView_SelectedIndexChanged_InsertServiceName" AutoPostBack="true" EnableViewState="true"
data-placeholder="Choose service…" class="chosen-single">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="recdevReqValueDDLServiceNameInsert" runat="server" InitialValue="0"
ControlToValidate="recdevgvDDListServiceNameInsert" ValidationGroup="recdevInsertDeviceValidation"
ErrorMessage="Selection required." CssClass="message-error-dropdown">
</asp:RequiredFieldValidator>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Address">
<ItemTemplate>
<asp:Label ID="recdevgvLblAddress" runat="server" Text='<%# Bind("Address") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="recdevgvTxtBoxAddress" runat="server" Text='<%# Bind("Address") %>' ClientIDMode="Static"></asp:TextBox>
<asp:Label ID="recdevgvEditAddressExt" runat="server" Visible="false" Text='<%# Bind("ServiceExtension") %>'
ClientIDMode="Static">
</asp:Label>
<asp:RequiredFieldValidator ID="recdevReqValueAddressEdit" runat="server"
ControlToValidate="recdevgvTxtBoxAddress" ValidationGroup="recdevEditDeviceValidation"
ErrorMessage="Required field." CssClass="message-error">
</asp:RequiredFieldValidator>
<asp:CustomValidator ID="recdevCustomValAddressEdit" runat="server" ControlToValidate="recdevgvTxtBoxAddress" CssClass="message-error"
ErrorMessage="*" ClientValidationFunction="ValidateAddressEdit" EnableClientScript="true"
ValidationGroup="recdevEditDeviceValidation">
</asp:CustomValidator>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="recdevgvTxtBoxAddressInsert" runat="server" ClientIDMode="Static"></asp:TextBox>
<asp:Label ID="recdevgvAddressExtInsert" runat="server" Visible="false" ClientIDMode="Static"></asp:Label>
<asp:RequiredFieldValidator ID="recdevReqValueAddressInsert" runat="server"
ControlToValidate="recdevgvTxtBoxAddressInsert" ValidationGroup="recdevInsertDeviceValidation"
ErrorMessage="Required field." CssClass="message-error">
</asp:RequiredFieldValidator>
<asp:CustomValidator ID="recdevCustomValAddressInsert" runat="server" ControlToValidate="recdevgvTxtBoxAddressInsert" CssClass="message-error"
ErrorMessage="*" ClientValidationFunction="ValidateAddressInsert" EnableClientScript="true"
ValidationGroup="recdevInsertDeviceValidation">
</asp:CustomValidator>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Active">
<ItemTemplate>
<asp:Label ID="recdevgvLblActive" runat="server" Text='<%# (Boolean.Parse(Eval("Active").ToString())) ? "Yes" : "No" %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:DropDownList ID="recdevgvDDListActive" runat="server" class="no-chosen"
Text='<%# (Boolean.Parse(Eval("Active").ToString())) ? "Yes" : "No" %>'>
<asp:ListItem>Yes</asp:ListItem>
<asp:ListItem>No</asp:ListItem>
</asp:DropDownList>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="recdevgvDDListActiveInsert" runat="server" class="no-chosen">
<asp:ListItem Selected="True">Yes</asp:ListItem>
<asp:ListItem>No</asp:ListItem>
</asp:DropDownList>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Cortext Enabled">
<ItemTemplate>
<asp:Label ID="recdevgvLblCortextEnabled" runat="server" Text='<%# (Boolean.Parse(Eval("CortextEnabled").ToString())) ? "Yes" : "No" %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Action" ShowHeader="False" ItemStyle-Wrap="false" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Button ID="recdevgvEditButton" runat="server" CausesValidation="True" CommandName="Edit"
Text="Edit" CssClass="gridActionbutton" ValidationGroup="EditDeviceValidation"></asp:Button>
Can anyone explain to me why the chosen dropdown will not recognize the ID? I use a similar function call when I am in edit mode.
THanks
UPDATE
using the suggestion from 'ourmandave', to ID duplicate controls, I removed the attribute ClientModeID = Static and am trying to identify the control by this means:
var serviceNameCtrl = document.getElementById('<%= recdevgvDDListServiceNameInsert.ClientID %>');
However, I must to doing it incorrectly because I keep getting the error 'The name 'recdevgvDDListServiceNameInsert' does not exist in the current context'. Any suggestions would be appreciated...
