I am using a devexpress grid with editform template. When I click on the edit button, this edit form is displayed. The edit form has an Update and Cancel button at the bottom of the form. I want to set the focus on the cancel button when this edit form is opened. Is it possible to set the focus on either update/cancel buttons when this edit form is opened?
You can use template for Edit Form and Specify The TabIndex Property For The Buttons :
I have attached sample example for your reference.
If any question, feel free to ask.
<Templates>
<EditForm>
<table style="width: 100%">
<tr>
<td align="right">
<dx:ContentControl ID="ContentControl" runat="server" SupportsDisabledAttribute="True">
<dx:ASPxGridViewTemplateReplacement runat="server" ID="Editors" ReplacementType="EditFormEditors" />
</dx:ContentControl>
<table style="width: 100%;">
<tr>
<td align="right" style="padding-right: 20px">
<table>
<tr>
<td>
<dx:ASPxButton ID="btnUpdate" runat="server" CssFilePath="~/App_Themes/Office2010Blue/{0}/styles.css" TabIndex="0"
AccessKey="S" AutoPostBack="False" Text="Update" Width="60px" ClientSideEvents-Click='<%# "function(s, e) { " + Container.UpdateAction + " }" %>'
CssPostfix="Office2010Blue" SpriteCssFilePath="~/App_Themes/Office2010Blue/{0}/sprite.css" >
</dx:ASPxButton>
</td>
<td>
<dx:ASPxButton ID="btnCancel" runat="server" CssFilePath="~/App_Themes/Office2010Blue/{0}/styles.css" TabIndex="1"
AutoPostBack="False" Text="Cancel" Width="60px" ClientSideEvents-Click='<%# "function(s, e) { " + Container.CancelAction + " }" %>'
CssPostfix="Office2010Blue" SpriteCssFilePath="~/App_Themes/Office2010Blue/{0}/sprite.css">
</dx:ASPxButton>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</EditForm>
</Templates>
please use the approach described in the ASPxGridView inline editing "tab order" report.
http://www.devexpress.com/Support/Center/Question/Details/Q218510
If you place your own editors in the EditForm template, set the TabIndex property of each editor according to your requirements.
Related
I am using bootstrap collapse in my project,in that collapse I have some buttons and dropdowns but when I click on any button or change dropdown index, postback occurs and collapse got uncollapsed,How can I stop this ?
Here is my Code
<h4>Search Training Profile<br />
</h4>
<div id="div_search" class="collapse" style="overflow-x: auto;">
<table class="table table-bordered table-striped">
<tr>
<td>Employee Name</td>
<td>
<asp:TextBox runat="server" ID="txt_name"></asp:TextBox>
<span class="err">optional</span>
</td>
<td>e.g First Name, Middle Name, Last Name</td>
</tr>
<tr>
<td>Designation</td>
<td><span class="err"></span>
<asp:DropDownList runat="server" ID="DDL_Desig" OnSelectedIndexChanged="DDL_Desig_SelectedIndexChanged" AutoPostBack="true">
</asp:DropDownList>
<span class="err">optional</span>
</td>
<td>
<asp:TextBox runat="server" ID="txt_desig" ReadOnly="true"></asp:TextBox>
<asp:Button Text="Clear" runat="server" />
</td>
</tr>
<tr>
<td>Location</td>
<td>
<asp:DropDownList runat="server" ID="DDL_Loc" OnSelectedIndexChanged="DDL_Loc_SelectedIndexChanged" AutoPostBack="true">
<asp:ListItem>Select</asp:ListItem>
</asp:DropDownList>
<span class="err">optional</span>
</td>
<td>
<asp:TextBox runat="server" ID="txt_loc" ReadOnly="true"></asp:TextBox>
<asp:Button Text="Clear" runat="server" />
</td>
</tr>
<tr>
<td>Division</td>
<td>
<asp:DropDownList runat="server" ID="DDL_Divis" OnSelectedIndexChanged="DDL_Divis_SelectedIndexChanged" AutoPostBack="true">
</asp:DropDownList>
<span class="err"> optional </span>
</td>
<td>
<asp:TextBox runat="server" ID="txt_divis" ReadOnly="true"></asp:TextBox>
<asp:Button Text="Clear" runat="server" />
</td>
</tr>
<tr>
<td>Department</td>
<td>
<asp:TextBox runat="server" ID="tx"></asp:TextBox>
<span class="err">optional</span></td>
<td>e.g ISD, MKT, HR etc</td>
</tr>
<tr>
<td>Filter By</td>
<td>
<asp:DropDownList runat="server" ID="DDL_Assc">
</asp:DropDownList>
</td>
<td>e.g OLP, SOLC, MAF, etc</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3" style="text-align:center;">
<asp:Button Text="Search" runat="server" CssClass="btn" />
<asp:Button Text="Reset" runat="server" CssClass="btn" />
</td>
</tr>
</table>
</div>
Create public variable
string state = "collapse";
during the postback or dropdown changed set the value as
state = "expand";
and aspx page use this as below:-
<div id="div_search" class='<%= state %>' style="overflow-x: auto;">
Aditya's answer helped me initially and is a nice solution. As my code evolved wrapping the div inside an update panel and having the collapse div contain a couple calendar controls that cause postbacks to refresh data in a grid, I came up with another solution I thought worth sharing as it is handled server side only.
<asp:Panel ID="pnlDateRange" ClientIDMode="Static" runat="server" CssClass="collapse col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="divFrom" class="col-xs-12 col-sm-12 col-md-2 col-md-offset-4 col-lg-2 col-lg-offset-4">
<asp:Calendar ID="cStartDate" runat="server" CssClass="calendar" Font-Size="X-Small"
DayNameFormat="FirstTwoLetters" DayHeaderStyle-Font-Bold="false"
TitleStyle-Font-Bold="true" TitleStyle-Font-Size="Small" Caption="From"
OnSelectionChanged="cStartDate_SelectionChanged">
<SelectedDayStyle Font-Bold="true" />
<OtherMonthDayStyle ForeColor="SlateGray" />
</asp:Calendar>
</div>
<div id="divTo" class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<asp:Calendar ID="cEndDate" runat="server" CssClass="calendar" Font-Size="X-Small"
DayNameFormat="FirstTwoLetters" DayHeaderStyle-Font-Bold="false"
TitleStyle-Font-Bold="true" TitleStyle-Font-Size="Small" Caption="To"
OnSelectionChanged="cEndDate_SelectionChanged">
<SelectedDayStyle Font-Bold="true" />
<OtherMonthDayStyle ForeColor="SlateGray" />
</asp:Calendar>
</div>
</asp:Panel>
The control was originally an ordinary with the same classes applied, it is the collapse target. In the c# on server side I have defined a private boolean variable set to true in all cases when the code loads to run. In the OnPreRender event I do this:
if (_collapseRange)
{
pnlDateRange.CssClass = pnlDateRange.CssClass.Replace("collapse in", "collapse");
}
else
{
if (!pnlDateRange.CssClass.Contains("collapse in"))
{
pnlDateRange.CssClass = pnlDateRange.CssClass.Replace("collapse", "collapse in");
}
}
I know it's an old question, but i did it this way.
Maybe not the best way, but it works for me.
Just call the method when ever you need it.
It gets a bit messy when you got a lot to collapse.
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
GetTextForInfoboxFrontPage();
multiCollapseExample1.Attributes["class"] = "collapse";
annualCollapse.Attributes["class"] = "collapse";
infoBox.Attributes["class"] = "collapse";
}
}
private void CollapseAllButAnnual()
{
annualCollapse.Attributes["class"] = "collapse in";
infoBox.Attributes["class"] = "collapse";
logoUpload.Attributes["class"] = "collapse";
}
I use two user controls in a tab container.user controls inside each tab panel.
I have registration forms in each user control.if i enter save button of one user control in a tab ,required field validator error coming in second tab panel registration form..how to solve it.
pls help
Add Validation Group property in each control. Then add validation group property in appropriate button.
So when u click on button only than button validation group controls get validated. e.g
<table width="400px">
<tr>
<td style="width: 80px;">
Name :
</td>
<td>
<asp:TextBox ID="txtName" ValidationGroup="tab1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" ValidationGroup="tab1" runat="server" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td style="width: 80px;">
Father Name
</td>
<td>
<asp:TextBox ID="txtFatherName" ValidationGroup="tab1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ValidationGroup="tab1" runat="server" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td style="width: 80px;">
</td>
<td>
<asp:Button ID="btnValidate" runat="server" Text="Validate" ValidationGroup="tab1"
Width="80px" OnClick="btnValidate_Click" />
</td>
</tr>
</table>
I have a dialog popup with a textearea, two listboxes and one button. By selecting a value in the first listbox and pressing the button ">" the selected value is passed to the second listbox. This is done with asp.net ajax.
<td>
<div align="center">
<textarea style="height:50px; overflow:hidden;";rows="20"
cols="40"
id="editor1"
class="tinymce">
</textarea>
</div>
</td>
I put the 2 listboxes and the button between asp.net uploadpanel. Like this:
<td>
<asp:UpdatePanel runat="server" id="updatePanel1">
<ContentTemplate>
<table width="100%" align="left">
<tr>
<td colspan="5">
<hr align="left" style="width:95%" />
</td>
</tr>
<tr>
<td valign="top">
<cc1:SWCListBox
ID="SWCListBox1"
runat="server"
Width="100"
SelectionMode="Single"
CssClass="VW1">
</cc1:SWCListBox>
</td>
<td
valign="top"
width="50"
align="center">
<cc1:SWCButton
Text=" > "
ID="SWCBtnAddValue"
CssClass="VW1 VWButton"
runat="server"
ToolTip="Add to list"
OnClick="AddValue_Click"
CausesValidation="false"
/>
<td valign="top">
<cc1:SWCListBox
id="SWCListBox2"
CssClass="VW1"
runat="server"
Width="100"
SelectionMode="Single"
/>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
The probles is that when I type something in the textarea and make an async postback the text typed fades.
How can I keep the textarea value within async postbacks?
thank you.
This problem is because you use UpdatePanel, and the textarea is not an asp.net control. You have two solutions.
1) Make it asp.net control by placing the run="server" (or)
2) Place the post back value manually as:
<div align="center">
<textarea style="height:50px; overflow:hidden;";rows="20"
cols="40"
id="editor1"
name="editor_1"
class="tinymce">
<asp:Literal runat="server" id="txtEditor1" />
</textarea>
</div>
and on code behind
txtEditor1.Text = Server.HtmlEncode(Request.Form["editor_1"].ToString());
(because you use UpdatePanel its important to use Literal to add this value and not use <%=%>, or else its throw an error.
I have two different buttons viz save and update. I want to open single pop-up window for both buttons, then how can I do so.? More over if pop-up is open on save buttons click then when ever it is closed, it should directed to OnClick_save() button event and if it is open from update buttons, on pop-up colse, it should directed to OnClick_Update() buttons click event.
How can I do so??
This is my code
<tr>
<td>
<table id="tblButton" runat="server">
<tr>
<td>
<asp:Button ID="btnAdd" runat="server" Text="Add" Visible="false" />
<asp:Button ID="btnUpdate" runat="server" Text="Update" Visible="false" /> <asp:Button ID="btnDelete" runat="server" Text="Delete" Visible="false" />
<asp:Button ID="btnTargetButton" runat="server" Text="PopUpTarget" Visible="false" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<cc1:ModalPopupExtender ID="ModalPopupExtenderSave" runat="server" TargetControlID="btnTargetButton" PopupControlID="passwordPopUp" DropShadow="true" PopupDragHandleControlID="header" BackgroundCssClass="modalBackground" BehaviorID="ModalPopupExtenderSave" />
</table>
<asp:Panel ID="passwordPopUp" runat="server" Style="display: none; padding: 10px;
border: 1px; border-style: solid;" BackColor="#91C83B" Width="300px" HorizontalAlign="Center"
BorderStyle="Solid" BorderWidth="5px">
<table class="TABLE100">
<tr>
<td colspan="3">
<h3 style="text-align: center;" id="header">
Confirm Password</h3>
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td>
</td>
<td width="50px">
<asp:Label ID="lblPasswrd" runat="server" Text="Password" Font-Bold="True" Font-Size="Larger"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtPassword" runat="server" SkinID="TextBoxLong"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="SUBMIT" Width="70px" OnClick="btnSubmit_Click"/>
</td>
</tr>
</table>
</asp:Panel>
Some how I have solved the problem up to certain extent.
Now the problem is three different buttons viz. Insert, Update and delete buttons are responsible for opening pop-up window which in turn opens an ASP:panel the panel contains submit button. So on submit button, can I know which button was responsible for opening a panel.???
You can use a hidden button as modal popup's Okbutton and call then button OnClick from code. from both Save and Updated buttons.
add server side event handlers for each button click. use jquery to show popup for each button, that would be $('#button1').click and $('#button2').click from jquery.
I have a search panel in my master page, which seems to be getting called when typing in another panel and hitting enter, even though the panel has a different defaultButton. The weird thing is the second and third panels work well, which ever one I put at the top calls the search button.
My search panel in my master page
<asp:Panel runat="server" ID="pnlSearch" DefaultButton="btnSearch">
<asp:TextBox ID="txtSearch" CssClass="fld" runat="server" Width="160" Text="Search..."
onclick="this.value='';" CausesValidation="false"></asp:TextBox>
<asp:ImageButton ID="btnSearch" ImageUrl="~/Images/search_arrow.gif" runat="server"
OnClick="btnSearch_Click" CausesValidation="false" />
</asp:Panel>
and my other panels inside a control(only displaying two, the first one calls btnSearch, but the second one works fine.
<asp:Panel DefaultButton="btnViewPage" ID="pnlViewPage" runat="server" CssClass="floatLeft">
<table>
<tr class="adminRow">
<td class="adminLeftCol">
View Page:
</td>
<td>
<asp:TextBox ID="txtViewPage" Width="35px" runat="server"></asp:TextBox>
</td>
<td class="adminRightCol">
<asp:ImageButton ID="btnViewPage" runat="server" Text="Go" Width="75%" ImageUrl="~/Images/search_arrow.gif"
OnClick="btnViewPage_Click" ImageAlign="AbsBottom" CausesValidation="false" />
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel DefaultButton="btnEditpage" ID="pn1Edit" runat="server" CssClass="floatLeft">
<table width="100%">
<tr class="adminRow">
<td class="adminLeftCol">
Edit Page:
</td>
<td>
<asp:TextBox ID="txtEditPage" Width="35px" runat="server"></asp:TextBox>
</td>
<td class="adminRightCol">
<asp:ImageButton ID="btnEditpage" runat="server" Text="Go" Width="75%" ImageUrl="~/Images/search_arrow.gif"
OnClick="btnEditpage_Click" ImageAlign="AbsBottom" CausesValidation="false" />
</td>
</tr>
</table>
</asp:Panel>
I've seen cases where the panel had to be inside an actual TD (the defaultbutton had to be a direct inner element of the panel). Have you tried this / can you try this?