Get the column index of a row in grid on click of button added on topbar in extjs - ext.net

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>

Related

Unable to display image in form view

I have unbound field and assigning file id to it, I even tried assign URL also but that is not working, please have a look at below design and code, please let me know where am doing a mistake.
<px:PXFormView runat="server" ID="frmImage2" DataSourceID="ds" DataMember="IconImage" SkinID="Preview">
<Template>
<px:PXLayoutRule ID="PXLayoutRule18" runat="server" StartColumn="true" />
<px:PXImageUploader runat="server" DataField="UsrKWJMThumbnailURL" AllowUpload="false" DataMember="IconImage" SuppressLabel="True" ID="imgViewImage12" Height="150px" Width="150px" />
</Template>
</px:PXFormView>
public PXSelect<AMProdItem> IconImage;
public virtual void iconImage()
{
foreach (AMProdItem item in Base.ProdItemRecords.Select())
{
AMProdItemExt extItems = item.GetExtension<AMProdItemExt>();
if (extItems != null)
{
if (extItems.UsrKWJMSerialNbr != null)
{
InfoSmartSearch.InfoINItemLotSerialImage infoItemLotSerialImg = PXSelectReadonly<InfoSmartSearch.InfoINItemLotSerialImage, Where<InfoSmartSearch.InfoINItemLotSerialImage.lotSerialNbr, Equal<Required<InfoSmartSearch.InfoINItemLotSerialImage.lotSerialNbr>>>>.Select(Base, extItems.UsrKWJMSerialNbr);
if (infoItemLotSerialImg != null)
{
if (!string.IsNullOrEmpty(infoItemLotSerialImg.UsrIconImageUrl))
{
NoteDoc noteDoc = PXSelectReadonly<NoteDoc, Where<NoteDoc.noteID, Equal<Required<NoteDoc.noteID>>>>.Select(Base, infoItemLotSerialImg.NoteID);
if (noteDoc != null)
{
UploadFile uploadFile = PXSelectReadonly<UploadFile, Where<UploadFile.fileID, Equal<Required<UploadFile.fileID>>>>.Select(Base, noteDoc.FileID);
if (uploadFile != null)
{
extItems.UsrKWJMThumbnailURL =
ControlHelper.GetAttachedFileUrl(null, uploadFile.FileID.ToString());
}
}
}
}
}
else
{
InventoryItem invItems = PXSelectReadonly<InventoryItem, Where<InventoryItem.inventoryID, Equal<Required<InventoryItem.inventoryID>>>>.Select(Base, item.InventoryID);
if (invItems != null)
{
if (!string.IsNullOrEmpty(invItems.ImageUrl))
{
NoteDoc noteDoc = PXSelectReadonly<NoteDoc, Where<NoteDoc.noteID, Equal<Required<NoteDoc.noteID>>>>.Select(Base, invItems.NoteID);
if (noteDoc != null)
{
UploadFile uploadFile = PXSelectReadonly<UploadFile, Where<UploadFile.fileID, Equal<Required<UploadFile.fileID>>>>.Select(Base, noteDoc.FileID);
if (uploadFile != null)
{
extItems.UsrKWJMThumbnailURL =
ControlHelper.GetAttachedFileUrl(null, uploadFile.FileID.ToString());
}
}
}
}
}
}
}
}
I suggest you use PXImageView control instead of PXImageUploader.
<px:PXImageView runat="server" ID="edImage" DataField="UsrKWJMThumbnailURL" />
Also test with an absolute URL first like this one:
https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png
I tested this method and can vouch for it:
Here's the complete code of my test project:
using System;
using PX.Data;
namespace PXImageTest
{
public class TestImage : PXGraph<TestImage>
{
public PXFilter<MasterTable> MasterView;
public void MasterTable_ImageUrl_FieldSelecting(PXCache sender, PXFieldSelectingEventArgs e)
{
e.ReturnValue = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
}
[Serializable]
public class MasterTable : IBqlTable
{
public abstract class imageUrl : IBqlField { }
[PXUIField(DisplayName = "Image")]
[PXDBString(255, IsUnicode = true)]
public virtual String ImageUrl { get; set; }
}
}
}
ASPX:
<%# Page Language="C#" MasterPageFile="~/MasterPages/FormView.master" AutoEventWireup="true" ValidateRequest="false" CodeFile="ZZ999999.aspx.cs" Inherits="Page_ZZ999999" Title="Untitled Page" %>
<%# MasterType VirtualPath="~/MasterPages/FormView.master" %>
<asp:Content ID="cont1" ContentPlaceHolderID="phDS" Runat="Server">
<px:PXDataSource ID="ds" runat="server" Visible="True" Width="100%"
TypeName="PXImageTest.TestImage"
PrimaryView="MasterView">
<CallbackCommands>
</CallbackCommands>
</px:PXDataSource>
</asp:Content>
<asp:Content ID="cont2" ContentPlaceHolderID="phF" Runat="Server">
<px:PXFormView ID="form" runat="server" DataSourceID="ds" DataMember="MasterView" Width="100%" AllowAutoHide="false">
<Template>
<px:PXLayoutRule runat="server" StartRow="True" ID="PXLayoutRule1" />
<px:PXImageView runat="server" DataField="ImageUrl" ID="edImage" Style='left:9px;top:9px;Position:absolute;' />
</Template>
<AutoSize Container="Window" Enabled="True" MinHeight="200" ></AutoSize>
</px:PXFormView>
</asp:Content>

Password visible in ext.net user control

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);
}

Autentication logic form

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>

Ext:net : Property grid bind it to store

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.

Combo box listener in ext.net

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>

Resources