I have an Ext.Net.ComboBox. It has been populated by using a sql query.
Now I need to filter the elements of the combo box based on the text entered.
For eg.
comboBox contains the following value.
Test1
Test2
MyTest
ComboTest
So when I enter the value 'Com' in the comboBox it should filter and display only ComboTest.
But if I enter Test then Test1, Test2 and ComboTest should be shown.
Please help me out. Thanks in Advance.
Edit : Refer this
Try the following based on this thread: http://forums.ext.net/showthread.php?16466-CLOSED-combobox-search-pattern
<%# Page Language="C#" %>
<%# Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.ComboBox1.GetStore();
store.DataSource = new object[]
{
new object[] { "1", "ab" },
new object[] { "2", "ac" },
new object[] { "3", "ba" },
new object[] { "4", "bc" },
new object[] { "5", "ca" },
new object[] { "6", "cb" }
};
store.DataBind();
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.Net Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:ComboBox
ID="ComboBox1"
runat="server"
MinChars="1"
Mode="Local">
<Store>
<ext:Store runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="value" />
<ext:RecordField Name="text" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<Listeners>
<BeforeQuery Handler="var q = queryEvent.query;
queryEvent.query = new RegExp(q);
queryEvent.query.length = q.length;" />
</Listeners>
</ext:ComboBox>
</form>
</body>
</html>
Related
User control (ascx) with a password input. Right-click, inspect - the value is visible. This doesn't happen if the password input is in an aspx.
Hmm, it seems I have to add some ramblings here, since the platform won't allow me to post this thread due to "mostly code".
Default.aspx
<%# Page Language="C#" %>
<%# Register Src="UserPassword.ascx" TagName="UserPass" TagPrefix="uc" %>
<script runat="server">
protected void Page_Load( object sender, EventArgs e )
{
if ( !X.IsAjaxRequest )
{
this.BindUser();
}
}
public void BindUser()
{
userPass1.UserName = "AliBaba";
userPass1.Password = "OpenSesame";
}
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Password inspect bug</title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" />
<ext:Window
ID="Window1"
runat="server"
Icon="User"
Closable="false"
Title="Customer Details"
Width="350"
Height="230"
Resizable="false"
BodyStyle="background-color:#fff;"
BodyPadding="5"
Layout="Anchor">
<Items>
<ext:Panel ID="panel1" runat="server" Header="false" Layout="FitLayout">
<Content>
<uc:UserPass ID="userPass1" runat="server"></uc:UserPass>
</Content>
</ext:Panel>
</Items>
</ext:Window>
</form>
</body>
</html>
UserPassword.ascx
<%# Control Language="C#" %>
<script runat="server">
public string UserName
{
get { return this.txtUser.Text; }
set { this.txtUser.Text = value; }
}
public string Password
{
get { return this.txtPassword.Text; }
set { this.txtPassword.Text = value; }
}
</script>
<ext:Panel ID="panel1" runat="server" BodyPadding="5" Layout="AnchorLayout">
<Items>
<ext:Panel ID="panel2" runat="server" Border="false" Header="false" AnchorHorizontal="100%" Layout="FormLayout">
<Items>
<ext:TextField ID="txtUser" runat="server" FieldLabel="User" />
<ext:TextField ID="txtPassword" runat="server" FieldLabel="Password" InputType="Password" />
</Items>
</ext:Panel>
</Items>
</ext:Panel>
Are there any known workarounds?
Short answer: Use this.txtPassword.setValue(value) not this.txtPassword.Text = value to fix your direct problem.
Long answer: Why you are setting the password from the server? Best practice states that passwords are stored as hashes on the server so you don't actually know a users real password, you are just comparing two hashes.
public string Password
{
get { return this.txtPassword.Text; }
set { this.txtPassword.Text = value; }
}
If you want to autofill a password, which i assume you do, you need to use a cookie.
if (Request.Cookies["username"] != null)
{
this.txtUsername.setValue(Request.Cookies["uid"].Value);
this.txtPassword.setValue(Request.Cookies["pwd"].Value);
}
i'm working in ext.net login form, but no idea how to implement a custom logic to take the user text field & password textfield & validate it.
here is what a had made till now.
appretiate help..
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Ext.NET Example</title>
<link type="text/css" rel="stylesheet" href="http://speed.ext.net/www/intro/css/main.css" />
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Window runat="server" Width="300" Height="200" Draggable="False" Closable="False" Icon="Lock" Title="Loging" BodyPadding="5">
<Items>
<ext:TextField runat="server" Text="Demo" FieldLabel="user" BlankText="ur name is required" AllowBlank="False" ReadOnly="False"/>
<ext:TextField runat="server" Text="password" FieldLabel="pass" BlankText="Pass required" AllowBlank="False" ReadOnly="False" />
</Items>
<Buttons>
<ext:Button runat="server" ID="buton" Icon="Accept" Text="Submit" >
<Listeners>
<Click Handler="init"></Click>
</Listeners>
</ext:Button>
</Buttons>
</ext:Window>
</form>
</body>
</html>
There's a login form with browsers 'saving' functionality (allows google chrome to ask you to "save" the password. This is a full transcript of the example which can be accessed at http://examples4.ext.net/#/Form/Login/Auto_Complete/.
<%# Page Language="C#" %>
<script runat="server">
protected void Button1_Click(object sender, DirectEventArgs e)
{
// Do some Authentication...
if (e.ExtraParams["user"] != "Ext.NET" || e.ExtraParams["pass"] != "extnet")
{
e.Success = false;
e.ErrorMessage = "Invalid username or password.";
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Login - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script>
// Invalidate the login fields with the given reason.
var invalidateLogin = function(reason) {
App.txtUsername.setValidation(reason);
App.txtPassword.setValidation(reason);
App.txtUsername.validate();
App.txtPassword.validate();
Ext.MessageBox.show({
title: 'Authentication error',
msg: reason,
buttons: Ext.MessageBox.OK,
animateTarget: 'Window1',
icon: 'Error'
});
};
var handleLogin = function() {
var form = App.Window1.el.up().dom; // Window1 is a direct child of the form element.
App.Window1.close();
// Now this would work for Chrome, and we already triggered autoComplete for IE.
// Chrome's is only triggered after the destination page is loaded.
setForm(form, "../../../Desktop/Introduction/Overview/Desktop.aspx", form.target);
form.submit();
restoreForm(form);
};
var orgFormAction, orgFormTarget,
btn = null, iframe = null;
// If we are on IE, we will create a button and click it (at once),
// so autoComplete is triggered.
var handleClientClick = function() {
var form = App.Window1.el.up().dom; // Window1 is a direct child of the form element.
if (Ext.isIE) {
if (iframe == null) {
iframe = document.createElement("IFRAME");
iframe.name = "ie_login_flush";
iframe.style.display = "none";
form.appendChild(iframe);
}
if (btn == null) {
btn = document.createElement("BUTTON");
btn.type = "submit";
btn.id = "submitButton";
btn.style.display="none";
form.appendChild(btn);
}
// On WebForms, we have to force set the form settings as we run or else we'll
// break directEvent calls.
setForm(form, "about:blank", "ie_login_flush");
btn.click();
restoreForm(form);
}
}
var setForm = function(form, action, target) {
// Back up original settings once per execution.
if (typeof orgFormAction == 'undefined') {
orgFormAction = form.action;
}
if (typeof orgFormTarget == 'undefined') {
orgFormTarget = form.target;
}
form.action = action;
form.target = target;
};
var restoreForm = function(form) {
form.action = orgFormAction;
form.target = orgFormTarget;
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<h1>Logging with browser saving functionality</h1>
<p>The valid login/password combination here would be:</p>
<p>
Username: Ext.NET<br>
Password: extnet
</p>
<p>On successful authentication, you will be redirected to the Desktop example.</p>
<ext:Window
ID="Window1"
runat="server"
Closable="false"
Resizable="false"
Height="200"
Icon="Lock"
Title="Login"
Draggable="true"
Width="350"
Modal="false"
BodyPadding="5"
Layout="Form">
<Items>
<ext:TextField
ID="txtUsername"
runat="server"
Name="username"
FieldLabel="Username"
AllowBlank="false"
BlankText="Your username is required." />
<ext:TextField
ID="txtPassword"
runat="server"
Name="password"
InputType="Password"
FieldLabel="Password"
AllowBlank="false"
BlankText="Your password is required." />
</Items>
<Buttons>
<ext:Button
ID="Button1"
runat="server"
Text="Login"
Icon="Accept"
FormBind="true"
Handler="handleClientClick">
<DirectEvents>
<Click
OnEvent="Button1_Click"
Success="handleLogin"
Failure="invalidateLogin(result.errorMessage);"
ShowWarningOnFailure="false">
<EventMask ShowMask="true" Msg="Verifying..." MinDelay="1000" />
<ExtraParams>
<ext:Parameter Name="user" Value="App.txtUsername.value" Mode="Raw" />
<ext:Parameter Name="pass" Value="App.txtPassword.value" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
</Buttons>
</ext:Window>
</form>
</body>
</html>
While I'm trying to bind the string data to the Rad Grid it is not binding exact value which I have pulled from Data Base.
For Example I'm pulling the Data : - "A BC E F G" and binding the same data to the Rad Grid, the problem here is the rad grid column is trimming out all the spaces and displaying like :- "A BC EFG"
Here I need to bind the exact data which I'm pulling from Database. How do I do that?
I am unable to replicate out this issue at my end.
My code looks like this:
RadGridPage.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeFile="RadgridPage.aspx.cs" Inherits="RadgridPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadGrid ID="TempTable" runat="server" Skin="MetroTouch" PageSize="5">
<MasterTableView CssClass="TempTable" Style="border: 0; cellpadding: 0; cellspacing: 0"
AutoGenerateColumns="false">
<Columns>
<telerik:GridBoundColumn HeaderText="TempData" DataField="TempData">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="TempData" DataField="TempData">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</div>
</form>
</body>
</html>
RadGridPage.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class RadgridPage : System.Web.UI.Page
{
public class data { public string TempData { get; set; } }
protected void Page_Load(object sender, EventArgs e)
{
List<data> gridData = new List<data>()
{
new data(){TempData="A BC E F G"},
new data(){TempData="A BC E F G"},
new data(){TempData="A BC E F G"},
};
TempTable.DataSource = gridData;
}
}
Output:
Please update your code to:
RadGridPage.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeFile="RadgridPage.aspx.cs" Inherits="RadgridPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadGrid ID="TempTable" runat="server" Skin="MetroTouch" PageSize="5" OnItemDataBound="gvSpecs_ItemDataBound">
<MasterTableView CssClass="TempTable" Style="border: 0; cellpadding: 0; cellspacing: 0"
AutoGenerateColumns="false">
<Columns>
<telerik:GridBoundColumn HeaderText="TempData" UniqueName="TempDataA" DataField="TempData">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="TempData" UniqueName="TempDataB" DataField="TempData">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</div>
</form>
</body>
</html>
RadGridPage.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
public partial class RadgridPage : System.Web.UI.Page
{
public class data { public string TempData { get; set; } }
protected void Page_Load(object sender, EventArgs e)
{
List<data> gridData = new List<data>()
{
new data(){TempData="A BC E F G"},
new data(){TempData="A BC E F G"},
new data(){TempData="A BC E F G"},
};
TempTable.DataSource = gridData;
}
protected void gvSpecs_ItemDataBound(object sender, GridItemEventArgs e)
{
if (e.Item is GridDataItem)
{
GridDataItem item = (GridDataItem)e.Item;
TableCell cellA = (TableCell)item["TempDataA"];
cellA.Text = cellA.Text.Replace(" ", " ");
TableCell cellB = (TableCell)item["TempDataB"];
cellB.Text = cellB.Text.Replace(" ", " ");
}
}
}
How can I get all the columns by index. Like I don't know how many columns I have and what is their DataIndex value then how to get them.
Actually I want to clear the cells so thats why looking for indexes of each column in row. If there is any other way to clear the row data then please help in that.
Currently I have got the row index by using below code,
var record = grid.getSelectionModel().getSelection()[0];
var index = store.indexOf(record);
now first thing i want to do is to clear the contents of cells in selected row on clicking button and secondly i want to get index of the columns inside this selected row and set any value to them using their index.
I guess you actually want to change something if a specific value in a cell appears - to do that in your grid add:
<View>
<ext:GridView runat="server" >
<GetRowClass Fn="getRowClass" />
</ext:GridView>
</View>
and in the getRowClass you then can do what you want for each row like:
function getRowClass(record) {
var someVar = record.data.<columnIndex>;
if (someVar == <someValue>) {
do something
}}
Please see the Buttons' Handlers.
<%# Page Language="C#" %>
<%# Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1", "test2", "test3" },
new object[] { "test4", "test5", "test6" },
new object[] { "test7", "test8", "test9" }
};
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
<script>
var setRecord = function (record, value) {
var i,
fields = record.fields.items,
field;
record.beginEdit();
for (i = 0; i < fields.length; i++) {
field = fields[i].name;
if (field !== record.idProperty) {
record.set(field, value);
}
}
record.endEdit();
};
var clear = function () {
var grid = App.GridPanel1,
selection = grid.getSelectionModel().getSelection(),
i;
for (i = 0; i < selection.length; i++) {
setRecord(selection[i], "");
}
};
var set = function () {
var grid = App.GridPanel1,
selection = grid.getSelectionModel().getSelection(),
i;
for (i = 0; i < selection.length; i++) {
setRecord(selection[i], "new");
}
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Button runat="server" Text="Clear" Handler="clear" />
<ext:Button runat="server" Text="Set" Handler="set" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
<ext:ModelField Name="test3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test1" DataIndex="test1" />
<ext:Column runat="server" Text="Test2" DataIndex="test2" />
<ext:Column runat="server" Text="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>
is there anyway to bind propertgrid to the store.
I find a sample here ,is this the only way to bind data to propertgrid?I wanna bind data like as bind the gridview thank you
<script runat="server">
protected void Populate(object sender, DirectEventArgs e)
{
PropertyGridParameter p = new PropertyGridParameter();
p.Name = "dynamic";
p.Value = "property";
p.Editor.Add(new ComboBox());
this.PropertyGrid1.SetSource(new PropertyGridParameterCollection() { p }, true);
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Button runat="server" Text="Populate" OnDirectClick="Populate" />
<ext:PropertyGrid ID="PropertyGrid1" runat="server">
<Source>
<ext:PropertyGridParameter Name="initial" Value="property" />
</Source>
</ext:PropertyGrid>
</form>
</body>
</html>
PropertyGrid internally uses its own store and its unavailable to bind data to in a similar way as you can do with a GridPanel.
I think nothing stops you to use a a common GridPanel if you have such a requirement.