JQuery Validate - DropDown - jquery-validate

I'm using the JQuery Validate plugin to validate my form. I'm able to validate text boxes but not DropDown. Can someone let me know how to validate dropdown?
<asp:FormView ID="fv_LeaveRequest" runat="server" DataKeyNames="REQ_ACTION_ID">
<InsertItemTemplate>
<label>Leave Type</label>
<asp:DropDownList ID="ddl_LeaveType" runat="server">
</asp:DropDownList>
<label>Leave Date</label>
<asp:TextBox ID="tb_leaveDate" runat="server" CssClass="date"></asp:TextBox>
<asp:Button ID="LeaveReqBtn" runat="server" Text="Submit Leave Request" CommandName="CustomInsert"
CssClass="button-position" />
</InsertItemTemplate>
<ItemTemplate>
<asp:LinkButton ID="Edit" runat="server" Text="Edit / Change Request" CommandName="Edit" CssClass="button-position btn-padding" />
<label>Leave Type</label>
<asp:DropDownList ID="ddl_LeaveType" runat="server">
</asp:DropDownList>
<label>Leave Date</label>
<asp:TextBox ID="tb_leaveDate" runat="server" CssClass="date"></asp:TextBox>
</ItemTemplate>
<EditItemTemplate>
<asp:LinkButton ID="Cancel" Text="Cancel" CommandName="Cancel" runat="server" CssClass="button-position btn-padding" />
<label>Leave Type</label>
<asp:DropDownList ID="ddl_LeaveType" runat="server">
</asp:DropDownList>
<label>Leave Date</label>
<asp:TextBox ID="tb_leaveDate" runat="server" CssClass="date"></asp:TextBox>
</EditItemTemplate>
$("#form1").validate({
rules: {
LeaveType: "required",
LeaveDate: "required"
},
messages: {
LeaveType: "Select a value from DropDown",
LeaveDate: "This field is required"
}
});

Related

CommandItemSetting section in RadGrid is not displayed when Grid has less than 10 records

I'm using CommandItemSettings in MasterTablreView to show Export to Excel button.
The CommandItemSettings section of the grid is displayed when Grid has at least 10 records or when I select less than 10 records using a Pager.
However, with less than 10 records after I click the Search button, the CommandItemSettings section is not there and I cannot export the data into an Excel.
Here is the aspx file:
MOSS2 Merchants Report:
<telerik:RadAjaxManager ID="RadAjaxManager" runat="server" EnableAJAX="true">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="btnSearch">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="grdMoss2Merchants" LoadingPanelID="RadAjaxLoadingPanel2"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
<table class="moss2Search" width="100%">
<tr>
<td colspan="4">
<asp:CustomValidator ID="checkForTwoDates" ClientValidationFunction="AtLeastOneDate_ClientValidate"
EnableClientScript="True" ErrorMessage="At least one date should be selected" runat="server"></asp:CustomValidator> <br />
<asp:CompareValidator ID="CompareValidator2" ControlToCompare="RadDatePicker1" ControlToValidate="RadDatePicker2" Operator="GreaterThanEqual"
ErrorMessage="Date range is not valid" runat="server"></asp:CompareValidator>
</td>
</tr>
<tr>
<td>
<div runat="server">
<asp:Label runat="server" CssClass="dateLabels">Boarding Start Date</asp:Label>
<telerik:RadDatePicker RenderMode="Lightweight" ID="RadDatePicker1" runat="server" onkeydown="keyPress(this, event)">
<Calendar runat="server">
<FastNavigationSettings EnableTodayButtonSelection="true"></FastNavigationSettings>
</Calendar>
</telerik:RadDatePicker>
</div>
</td>
<td>
<div runat="server">
<asp:Label runat="server" CssClass="dateLabels">Boarding End Date</asp:Label>
<telerik:RadDatePicker RenderMode="Lightweight" ID="RadDatePicker2" runat="server" onkeydown="keyPress(this, event)">
<Calendar runat="server">
<FastNavigationSettings EnableTodayButtonSelection="true"></FastNavigationSettings>
</Calendar>
</telerik:RadDatePicker>
</div>
</td>
<td>
<div>
<asp:CheckBox ID="chkMerActive" runat="server" Checked="true" TextAlign="Left"/>Active
</div>
</td>
<td>
<telerik:RadButton RenderMode="Lightweight" runat="server" Text="Search" ID="btnSearch" OnClick="btnSearch_Click"/>
</td>
</tr>
</table>
<asp:Label ID="lblMsg" ForeColor="red" runat="server"></asp:Label>
<br />
</telerik:RadAjaxPanel>
<%----%>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server" Skin="Default">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server" LoadingPanelID="RadAjaxLoadingPanel2">
<telerik:RadGrid
RenderMode="Lightweight"
runat="server"
ID="grdMoss2Merchants"
AllowPaging="True"
AllowSorting="true"
PagerStyle-AlwaysVisible="true"
OnNeedDataSource="BindToDatasource"
OnSortCommand="grdMoss2Merchants_SortCommand"
ViewStateMode="Enabled"
AutoGenerateColumns="false"
OnPageIndexChanged="grdMoss2Merchants_ChangePage"
ClientSettings-Scrolling-ScrollHeight="360px">
<GroupingSettings CaseSensitive="false"/>
<ExportSettings HideStructureColumns="true" ExportOnlyData="true" OpenInNewWindow="true" Excel-Format="Xlsx" IgnorePaging="true" FileName="Moss2Merchants">
<Excel WorksheetName="Moss2Merchants" Format="Xlsx" AutoFitColumnWidth="AutoFitAll" />
</ExportSettings>
<ClientSettings EnableRowHoverStyle="true">
<Scrolling AllowScroll="true" UseStaticHeaders="True"/>
</ClientSettings>
<SortingSettings EnableSkinSortStyles="false" />
<HeaderStyle Width="160px" CssClass="grdHeader" ForeColor="#2E6E9E" />
<MasterTableView AllowNaturalSort="false" CommandItemDisplay="Bottom">
<CommandItemSettings ShowExportToExcelButton="true" ShowAddNewRecordButton="false" ShowRefreshButton="false" />
<CommandItemStyle HorizontalAlign="Right" />
<PagerStyle AlwaysVisible="true" Mode="NextPrevAndNumeric" PageSizes="5,10,25,50,100" />
<Columns>
<telerik:GridBoundColumn DataField="Moss2 MID" HeaderText="MOSS2 MID" AllowSorting="false" DataFormatString="{0:#}"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="DBA" HeaderText="DBA" HeaderStyle-Width="250px">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Original MID" HeaderText="ORIGINAL MID" AllowSorting="false" DataFormatString="{0:#}"></telerik:GridBoundColumn>
<telerik:GridBoundColumn
DataField="BoardingDate"
DataType="System.DateTime"
HtmlEncode="false"
DataFormatString="{0:MM/dd/yyyy}"
SortExpression="BoardingDate"
UniqueName="BoardingDate"
HeaderText="BOARDING DATE"
HeaderStyle-Width="170px"
ShowFilterIcon="false"
/>
<telerik:GridBoundColumn DataField="Status" HeaderText="STATUS" AllowSorting="false"></telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</telerik:RadAjaxPanel>
The Export To Excel button is showing with Grid having

CKEditor disappears on partial postback

I have a page that shows a ckeditor in an update panel. My page is as follows:
<form id="form1" runat="server">
<cc1:ToolkitScriptManager runat="server" ID="ToolkitScriptManager" EnablePartialRendering="true"></cc1:ToolkitScriptManager>
<div>
<asp:Label ID="Label1" runat="server" Text="Hello"></asp:Label><br />
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<script src="../../../../../ckeditor/ckeditor.js" type="text/javascript"></script>
<asp:TextBox class="ckeditor" ID="tbEditorHeader" runat="server" ClientIDMode="Static" TextMode="MultiLine" Columns="80" Rows="4"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
Has anyone seen this issue? Any known solutions?
Thanks for the help!!

Ajax UpdateProgress will now show inside a tabContainer

I'm using visualStudio 2010 vb
I have a UpdateProcess inside a TabContainer which I can not manage to make it show a loading image. I've added below the example code. I'm I missing something to make it show?
<asp:TabContainer ID="TabSelection" runat="server" ActiveTabIndex="0"
Width="1126px" Font-Bold="True" TabStripPlacement="Top"
style="margin-right: 34px; margin-top: 49px;" AutoPostBack="True">
<asp:TabPanel runat="server" HeaderText="Scorecard3" ID="TabScorecard3">
<HeaderTemplate>
Scorecard
</HeaderTemplate>
<ContentTemplate>
<asp:UpdateProgress ID="UProc_Scorecard" runat="server" AssociatedUpdatePanelID="UP_Scorecard"
DisplayAfter="1">
<ProgressTemplate>
<asp:Image id="wait" runat="server" ImageUrl="~/Images/wait3.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UP_Scorecard" runat="server">
<ContentTemplate>
… 3 Grids and 3 tables …
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DateSelection"
EventName="SelectedIndexChanged"/>
<asp:AsyncPostBackTrigger ControlID="GroupSelection"
EventName="SelectedIndexChanged"/>
</Triggers>
</asp:UpdatePanel>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
Thanks
I've solved the problem by moving the UpdateProgress and the updatePannel outside the TabContainer also I removed the autopostback in the tabcontainer to prevent a postback each time a tab was selected. I hope this helps someone. Example code below...
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:UpdateProgress ID="UProc_TabContainer" runat="server" AssociatedUpdatePanelID="UP_TabContainer"
DisplayAfter="1">
<ProgressTemplate>
<div id="dvProgress" runat="server" style="position: absolute; top: 300px; left: 450px;
text-align: center;">
<asp:Image ID="wait" runat="server" ImageUrl="~/Images/wait3.gif" Height="120px"
Width="128px" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UP_TabContainer" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" BackColor="#66FFFF">
<asp:DropDownList ID="DateSelection" runat="server" AutoPostBack="True" Height="21px"
Width="134px">
</asp:DropDownList>
<asp:DropDownList ID="GroupSelection" runat="server" AutoPostBack="True" Height="21px"
Width="134px" >
</asp:DropDownList>
</asp:Panel>
<asp:TabContainer ID="TabSelection" runat="server" ActiveTabIndex="0" Width="1126px"
Font-Bold="True" TabStripPlacement="Top"
Style="margin-right: 34px; margin-top: 49px;">
<%-- AutoPostBack="True"--%>
<asp:TabPanel runat="server" HeaderText="Scorecard3" ID="TabScorecard3">
<HeaderTemplate>
Scorecard
</HeaderTemplate>
<ContentTemplate>
… grids and charts …
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel runat="server" HeaderText="Documentation" ID="TabInfo">
<ContentTemplate>
… documentation …
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="Project" runat="server" HeaderText="Project">
<ContentTemplate>
… documentation…
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
</ContentTemplate>
</asp:UpdatePanel>

ASP.NET validation not working inside ASP FormView

The ASP.NET validation does not seem to work inside ASP:FormView. Can someone let me know what I'm doing wrong? Thank you.
Here is the code.
<asp:ValidationSummary ID="ValidationSummary1" runat="server" ValidationGroup="ValidationSummary1" />
<asp:FormView ID="fv_LeaveRequest" runat="server" DataKeyNames="REQ_ACTION_ID">
<InsertItemTemplate>
<label>Leave Type</label>
<asp:DropDownList ID="ddl_LeaveType" runat="server">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="This field is required" ValidationGroup="ValidationSummary1" Text="Required" ControlToValidate="ddl_LeaveType"></asp:RequiredFieldValidator>
<asp:Button ID="LeaveReqBtn" runat="server" Text="Submit Leave Request" CommandName="CustomInsert"
CssClass="button-position" ValidationGroup="ValidationSummary1" CausesValidation="true" />
</InsertItemTemplate>
<ItemTemplate>
<asp:LinkButton ID="Edit" runat="server" Text="Edit / Change Request" CommandName="Edit" CssClass="button-position btn-padding" ValidationGroup="ValidationSummary1" />
<label>
Leave Type</label>
<asp:DropDownList ID="ddl_LeaveType" runat="server">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="This field is required"
ValidationGroup="ValidationSummary1" Text="Required" ControlToValidate="ddl_LeaveType"></asp:RequiredFieldValidator>
</ItemTemplate>
<EditItemTemplate>
<asp:LinkButton ID="Cancel" Text="Cancel" CommandName="Cancel" runat="server" CssClass="button-position btn-padding"
ValidationGroup="ValidationSummary1" />
<label>
Leave Type</label>
<asp:DropDownList ID="ddl_LeaveType" runat="server">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="This field is required"
ValidationGroup="ValidationSummary1" Text="Required" ControlToValidate="ddl_LeaveType"></asp:RequiredFieldValidator>
</EditItemTemplate>
</asp:FormView>
You need to add one attribute for Initial Value to your RequiredFieldValidators. When you're using a RequiredFieldValidator with a DropDownList, you need to add InitialValue="0".

Question about AJAX Update Panel

Here is the problem im having. I have 5 buttons on my form that appear next to each other (horizontal). 3 out of the 5 buttons had to be put in an update panel b/c these buttons have to do AsyncPostBack, the other 2 buttons need to be outside to do a postback. Everything works the way I would like accept that all the buttons dont appear on the same line. Is there anything I can do put get these 5 buttons to appear on the same line, given the different functionality of these buttons?
The UpdatePanel renders a <div> you need to style this div so that that it displays inline Notice the Style="display:inline" in the following code. There's other ways to accomplish this depending on your layout but this is the most straightforward.
<asp:UpdatePanel ID="UpdatePanel1" runat="server" Style="display:inline">
<ContentTemplate>
<asp:Label ID="labelText" runat="server" Text="Label" />
<asp:Button ID="Button1" runat="server" Text="Button1" />
<asp:Button ID="Button2" runat="server" Text="Button2" />
<asp:Button ID="Button3" runat="server" Text="Button3" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button4" runat="server" Text="Button4" />
<asp:Button ID="Button5" runat="server" Text="Button5" />
You don't have to have your buttons inside the UpdatePanel to make this work. You would simply need to define them as AsyncPostBackTriggers. You don't have to worry about breaking your layout then.
<div class="toolbar">
<asp:Button ID="Button1" runat="server" Text="Button1" />
<asp:Button ID="Button2" runat="server" Text="Button2" />
<asp:Button ID="Button3" runat="server" Text="Button3" />
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="labelText" runat="server" Text="Label" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="Button3" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

Resources