I try to get date from CalendarExtender in two ways: one with updatepanel and one without but it doesn't work. value of this two calendar extender are null.
It's weird because I can select date from this extenders, and text of textboxes are set to selected date.
How to fix it ?
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="tbPlannedStart"
Format="d">
</asp:CalendarExtender>
<asp:TextBox ID="tbPlannedStart" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
<asp:CalendarExtender ID="CalendarExtender2" runat="server" TargetControlID="tbPlannedEnd"
Format="d">
</asp:CalendarExtender>
<asp:TextBox ID="tbPlannedEnd" runat="server"></asp:TextBox>
protected void btnAddProject_Click(object sender, EventArgs e)
{
var service = new Service1Client("WSHttpBinding_IService13");
var project = new MyProject();
project.PlannedEnd = CalendarExtender2.SelectedDate;
project.PlannedStart = CalendarExtender1.SelectedDate;
service.AddProject(project);
}
It solved my problem:
project.PlannedEnd = System.Convert.ToDateTime(tbPlannedEnd.Text);
project.PlannedStart = System.Convert.ToDateTime(tbPlannedStart.Text);
Related
I have a ModalPopupExtender tied to a RadListBox so that when an item is selected from the list box, I need a "Please Wait" message while the page behind loads the data into RadCharts. The Modal does Hide when the loading is completed. The problem I'm having is if the same list item is selected again, the Modal popup shows again, but never goes away. I've tried just about everything, but the click/selection of a list item in the RadListBox immediately shows the Modal and I can't seem to find a way to do item checking to see if its the same item, then to do nothing.
Here is my Panel and Modal code (ASPX)
<asp:Panel ID="pnlProgress" runat="server" Height="50px" Width="50px" >
<div>
<div class="popupbody">
<table width="50%">
<tr>
<td align="center">
<asp:Image ID="imgProgress" runat="server" ImageUrl="~/_images/ajax-loader.gif" />
<br />
<br />
<asp:Label ID="lblLoading" runat="server" Text='Please wait...'
Font-Bold="true"></asp:Label>
</td>
</tr>
</table>
</div>
</div>
</asp:Panel>
<ajaxToolKit:ModalPopupExtender ID="mpeProgress" runat="server" TargetControlID="lboxTestedMachines" PopupDragHandleControlID="pnlProgress" `enter code here`
X="1000" Y="500" PopupControlID="pnlProgress" BackgroundCssClass="modalBackground" RepositionMode="RepositionOnWindowResize" BehaviorID="lboxTestedMachines">
</ajaxToolKit:ModalPopupExtender>
And here is my ASPX.CS code
protected void lboxTestedMachines_SelectedIndexChanged(object sender, EventArgs e)
{
int iResultID = Convert.ToInt32(lboxTestedMachines.SelectedValue);
if (tbl_charts.Style.Value != "display:normal")
tbl_charts.Style.Value = "display:normal";
GetMachineName(iResultID);
RdListView_Chart.DataSource = LoadCassetteForFoodChart(iResultID);
GetApprovalRejectionStatus(iResultID);
}
The RadListBox has an internal logic on item click to determine if the item was already selected. If it was, it would not trigger the OnClientSelectedIndexChanging event, hence no postback on clicking a selected item.
The ModalPopupBehavior on the other hand reacts to any click event inside TargetControlID control's element. Here are some code snippets obtained using the browser's DevTools (search for Sys.Extended.UI.ModalPopupBehavior.prototype.initialize by following steps from Get IntelliSense for the client-side object)
initialize: function() {
Sys.Extended.UI.ModalPopupBehavior.callBaseMethod(this, "initialize"),
this._isIE6 = Sys.Browser.agent == Sys.Browser.InternetExplorer && Sys.Browser.version < 7,
this._popupDragHandleControlID && (this._dragHandleElement = $get(this._popupDragHandleControlID)),
this._popupElement = $get(this._popupControlID),
this._createDomElements(),
this._showHandler = Function.createDelegate(this, this._onShow),
$addHandler(this.get_element(), "click", this._showHandler),
this._okControlID && (this._okHandler = Function.createDelegate(this, this._onOk),
$addHandler($get(this._okControlID), "click", this._okHandler)),
this._cancelControlID && (this._cancelHandler = Function.createDelegate(this, this._onCancel),
$addHandler($get(this._cancelControlID), "click", this._cancelHandler)),
this._scrollHandler = Function.createDelegate(this, this._onLayout),
this._resizeHandler = Function.createDelegate(this, this._onLayout),
this.registerPartialUpdateEvents(),
this._resetAnimationsTarget(),
this._onHiding.get_animation() && (this._hidingAnimationEndedHandler = Function.createDelegate(this, function () {
this._isAnimationJustEnded = !0,
this.hide()
}),
this._onHiding.get_animation().add_ended(this._hidingAnimationEndedHandler)),
this._onShowing.get_animation() && (this._showingAnimationEndedHandler = Function.createDelegate(this, function () {
this._isAnimationJustEnded = !0,
this.show()
}),
this._onShowing.get_animation().add_ended(this._showingAnimationEndedHandler))
},
_onShow: function(e) {
if (!this.get_element().disabled)
return this.show(),
e.preventDefault(),
!1
},
Solution 1: Subscribe to the Showing event of the ModalPopupBehavior and allow it to show only when you set a flag from the OnClientSelectedIndexChanging event. The example below stores the flag in the RadListBox client-side object as an expando property:
<telerik:RadCodeBlock runat="server" ID="rdbScripts">
<script type='text/javascript'>
function pageLoadHandler() {
var modalPopupExtenderClientObject = $find("<%= mpeProgress.ClientID %>")
modalPopupExtenderClientObject.add_showing(function (sender, args) {
// "sender" argument represents the Modal popup control client-side object
// sender.get_element() returns the DOM element of the RadListBox
// sender.get_element().control return the client-side object of the RadListBox where we stored the expando property __allowModalPopupShow
if (sender.get_element().control.__allowModalPopupShow !== true) {
args.set_cancel(true);
}
})
}
function OnClientSelectedIndexChanging(sender, args) {
// sender in this context is the RadListBox client-side object
sender.__allowModalPopupShow = true;
}
Sys.Application.add_load(pageLoadHandler);
</script>
</telerik:RadCodeBlock>
Solution 2: Use RadAjaxLoading panel and show it programmatically in OnClientSelectedIndexChanging:
https://docs.telerik.com/devtools/aspnet-ajax/controls/ajaxloadingpanel/how-to/show-and-hide-ajaxloadingpanel-explicitly
https://demos.telerik.com/aspnet-ajax/ajaxloadingpanel/functionality/transparency/defaultcs.aspx
I am facing a weird issue it is in wicket 1.4.
We have a ReservationDateField which is extended from Datefield.
The problem is that in datefield, I have an input Datetext field and it has an id generated by wicket, which I need to change.
I need to change the markupId for the input tag; please see the photo:
Here is the HTML:
<div class="arena-reservation-from">
<div class="arena-form-content" wicket:id="validFromDateContainer">
<label class="arena-field" wicket:for="validFromDate"><wicket:message key="ReservationValidFrom.label"/></label>
<label class="arena-input-text" wicket:id="validFromDate"></label>
<p id="arena-add-reservation-validFromDate-error-msg" class="arena-input-error-msg" aria-hidden="true" />
</div>
The java is here :
private void addFromDateFieldContainer() {
DateField field = new ReservationDateField("validFromDate");
WebMarkupContainer container = new
WebMarkupContainer("validFromDateContainer");
container.add(field);
container.setVisible(configParams.isShowReservationFromDate());
add(container);
}
You need to override newDateTextField(String id, PropertyModel dateFieldModel)
DateField field = new ReservationDateField("validFromDate") {
#Override
protected DateTextField newDateTextField(String id, PropertyModel dateFieldModel) {
DateTextField dateTextField = DateTextField.forShortStyle(id, dateFieldModel);
dateTextField.setMarkupId("mySpecialId");
return dateTextField;
}
<select _ngcontent-c1="" class="form-control ng-untouched ng-pristine ng-invalid" formcontrolname="Designation" required=""><option _ngcontent-c1="" value="">Select Designation</option><!----><option _ngcontent-c1="" value="CEO">CEO</option><option _ngcontent-c1="" value="GM">GM</option><option _ngcontent-c1="" value="BodyGuard">BodyGuard</option><option _ngcontent-c1="" value="Executive">Executive</option></select>
For above html i am trying to select value from dropdown using protractor.
Tried following but not working.
var EmpDesignation = element(by.cssContainingText('body.modal-open:nth-child(2) modal-container.modal.fade.show:nth-child(7) div.modal-dialog div.modal-content form.form-horizontal.ng-pristine.ng-invalid.ng-touched div.modal-body div.form-row:nth-child(2) div.col-md-10 > select.form-control.ng-pristine.ng-invalid.ng-touched:nth-child(3)', 'CEO'));
EmpDesignation.click();
Error: Failed: No element found using locator:
by.cssContainingText("body.modal-open:nth-child(2)
modal-container.modal.fade.show:nth-child(7) div.modal-dialog
div.modal-content
form.form-horizontal.ng-pristine.ng-invalid.ng-touched div.modal-body
div.form-row:nth-child(2) div.col-md-10 >
select.form-control.ng-pristine.ng-invalid.ng-touched:nth-child(3)",
"CEO")
There are multiple class with class name 'form-control ng-untouched ng-pristine ng-invalid'.
Can anyone suggest way out of this? can we use formcontrolname tag?
I would try it like this
let EmpDesignation = element(by.xpath('//select[#formcontrol="Designation"]'));
EmpDesignation.sendKeys('CEO'); //Option 1
EmpDesignation.element(by.cssContainingText('option','CEO')) //Option 2
This does assume that formcontrol="Designation" is unique however. If that assumption is incorrect let me know and I'll update.
First you need to click on select element, and then option.
options are not visible yet
Try the below one
const designation = element(by.css('select.form-control>option'));
in your test
designation.sendKeys('CEO');
Hope it helps you
You can also use a css selector and use the 'value' attribute:
var CEO = element(by.css('[value="CEO"]'));
Then the code would look like this:
let EmpDesignation = element(by.xpath('//select[#formcontrol="Designation"]'));
return EmpDesignation.click()
.then(function(){
return CEO.click();
});
I am using GridView in ASP.NET with C#. I am adding Templete Field Columns to GridView on Runtime, Columns are added successfully with the required text in rows. But after filling GridView perform any button click event controls from rows removes, in rows i have Literal and Textbox controls in Templete Field as a ItemTempete.....
Any Help...
<asp:GridView runat="server" ID="gridView">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton runat="server" ID="lnkTest"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Then in your rowdatabound event you can find it and do whatever you want
void gridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
Entity entity = e.Row.DataItem as Entity;
LinkButton lnkTest = e.Row.FindControl("lnkTest") as LinkButton;
lnkTest.CommandArgument = entity.ID.ToString();
lnkTest.Text = entity.Name;
}
}
How to disable previous dates while using in ajaxToolkit CalendarExtender
One Option is to use a rangevalidator on the textbox the calenderextender is bound to. Ie if you have the TargetID of the calendar extender set to tb1 add a rangeValidator to flag when the contents of tb1 is before today.
Another option is using javascript and here is a good example:
http://www.dotnetcurry.com/ShowArticle.aspx?ID=149 TIP 6.
Here is my full solution to the calendar date restriction problem: What I like about this solution is that you set the MinimumValue and MaximumValue of a RangeValidator and you do not have to modify any javascript. I never found a full solution that did not require recompiling the AjaxControlToolkit.dll. Thanks to http://www.karpach.com/ajaxtoolkit-calendar-extender-tweaks.htm for giving me the idea of how to override key methods in the calendar.js file without having to recompile the AjaxControlToolkit.dll. Also, I got "AjaxControlToolkit is undefined" javascript errors, so I changed those to Sys.Extended.UI. and it works for me when using the 4.0 version of the toolkit.
<%--//ADD THIS NEW STYLE TO STYLESHEET TO GRAY OUT DATES THAT AREN'T SELECTABLE--%>
<style type="text/css">
.ajax__calendar_inactive {color:#dddddd;}
</style>
Either in Page_Load or Init or wherever, set the min and max values for your range validator:
<script runat="server">
protected override void OnLoad(EventArgs e)
{
//set the validator min and max values
this.valDateMustBeWithinMinMaxRange.MinimumValue = DateTime.Today.Date.ToShortDateString();
this.valDateMustBeWithinMinMaxRange.MaximumValue = DateTime.MaxValue.Date.ToShortDateString();
base.OnLoad(e);
}
</script>
Add this javascript somewhere in your page:
<script type="text/javascript">
<%--// ADD DATE RANGE FEATURE JAVASCRIPT TO OVERRIDE CALENDAR.JS--%>
var minDate = new Date('<%= valDateMustBeWithinMinMaxRange.MinimumValue %>');
var maxDate = new Date('<%= valDateMustBeWithinMinMaxRange.MaximumValue %>');
Sys.Extended.UI.CalendarBehavior.prototype._button_onblur_original = Sys.Extended.UI.CalendarBehavior.prototype._button_onblur;
//override the blur event so calendar doesn't close
Sys.Extended.UI.CalendarBehavior.prototype._button_onblur = function (e) {
if (!this._selectedDateChanging) {
this._button_onblur_original(e);
}
}
Sys.Extended.UI.CalendarBehavior.prototype._cell_onclick_original = Sys.Extended.UI.CalendarBehavior.prototype._cell_onclick;
//override the click event
Sys.Extended.UI.CalendarBehavior.prototype._cell_onclick = function (e) {
var selectedDate = e.target.date;
if (selectedDate < minDate || selectedDate > maxDate ) {
//alert('Do nothing. You can\'t choose that date.');
this._selectedDateChanging = false;
return;
}
this._cell_onclick_original(e);
}
Sys.Extended.UI.CalendarBehavior.prototype._getCssClass_original = Sys.Extended.UI.CalendarBehavior.prototype._getCssClass;
Sys.Extended.UI.CalendarBehavior.prototype._getCssClass = function (date, part) {
var selectedDate = date;
if (selectedDate < minDate || selectedDate > maxDate ) {
return "ajax__calendar_inactive";
}
this._getCssClass_original(date, part);
}
</script>
Add this text box to your asp.net page with CalendarExtenter and RangeValidator:
<asp:TextBox ID="textBoxDate" runat="server" />
<ajaxToolkit:CalendarExtender ID="calendarExtender" runat="server" TargetControlID="textBoxDate" />
<asp:RangeValidator ID="valDateMustBeWithinMinMaxRange" runat="server" ControlToValidate="textBoxDate"
ErrorMessage="The date you chose is not in accepted range" Type="Date" />
<br />
<asp:Button ID="Button1" runat="server" Text="Button" />
Using the Ajax toolkit Calendar Extender in the html markup:
<asp:TextBox ID="txtDate" runat="server" CssClass="contentfield" Height="16px" MaxLength="12" width="80px" Wrap="False"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender3" runat="server" Enabled="true" StartDate="<%# DateTime.Now %>" EndDate="<%# DateTime.Now.AddDays(1) %>" Format="dd MMM yyyy" PopupButtonID="imgDatePicker" TargetControlID="txtDate">
</asp:CalendarExtender>
<asp:ImageButton ID="imgDatePicker" runat="Server" AlternateText="Click to show calendar" Height="16px" ImageAlign="Middle" ImageUrl="~/images/Calendar_scheduleHS.png" Width="16px" />
Above you will see that the Calendar only allows one to choose between today or tomorrow by setting
StartDate="<%# DateTime.Now %>"
and
EndDate="<%# DateTime.Now.AddDays(1) %>"
This can also be done in the backend using CalendarExtender1.StartDate = DateTime.Now; or CalendarExtender1.EndDate = DateTime.Now.AddDays(1);
Just add an attribute StartDate="<%# DateTime.Now %>" in you ajaxtoolkit calendarextender control
Following link might help you:
Disable dates in CalendarExtender