PDA

View Full Version : [CLOSED] Client side validation help



vmehta
Jun 05, 2014, 8:54 AM
Hello,

I am searching for client side validations for a grid. I found few examples like this - http://examples1.ext.net/#/Form/Miscellaneous/Edit_Form_View/, but I see that if an already existing text box value is made empty, then the trigger comes up , otherwise it does not show me a validation.

When I add a new row to the grid, which adds empty textbox values, this time when I try to save empty textboxes, this trigger that I added does not come up.

This is what I have done.


<ext:Column ID="Column1" runat="server" Text="Name" DataIndex="Name" Width="350px">
<Editor>
<ext:TextField ID="TextField1" runat="server" AllowBlank="false" MsgTarget="Side" />
</Editor>
</ext:Column>

Daniil
Jun 05, 2014, 1:31 PM
Hi @vmehta,

Please provide a full test case and describe exact steps to reproduce the problem.

vmehta
Jun 06, 2014, 12:17 PM
Here is the sample code


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ValidationCheck.aspx.cs" Inherits="ValidationCheck" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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>

<ext:XScript ID="XScript1" runat="server">
<script>
var topicValues = function (value)
{
var r = #{StoreCombo}.getById(value);
if (Ext.isEmpty(r))
{
return "";

}
return r.data.TopicName;

};


</script>

</ext:XScript>

<ext:ResourceManager ID="rmPrelimIdeas" runat="server" />
<ext:Store ID="StoreCombo" runat="server">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="TopicID">
<Fields>
<ext:ModelField Name="TopicID" />
<ext:ModelField Name="TopicName" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store ID="Store1" runat="server" PageSize="3">
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="TopicID" />
<ext:ModelField Name="TopicName" />
<ext:ModelField Name="ShortDescription"/>
<ext:ModelField Name="LongDescription" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column4" runat="server" Text="Topic" DataIndex="TopicID" Width="240">
<Renderer Fn="topicValues" />
<Editor>
<ext:ComboBox ID="ComboBox1" runat="server" StoreID="StoreCombo" DisplayField="TopicName"
ValueField="TopicID" />
</Editor>
</ext:Column>
<ext:Column ID="Column1" runat="server" Text="Short Description" DataIndex="ShortDescription"
Flex="1">
<Editor>
<ext:TextField ID="TextField1" runat="server" AllowBlank="false" />
</Editor>
</ext:Column>

</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server">
</ext:CellEditing>
</Plugins>
<SelectionModel>
<ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" />
</SelectionModel>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="btnSave" runat="server" Icon="Disk">
<DirectEvents>
<Click OnEvent="btnSave_Click">
<ExtraParams>
<ext:Parameter Name="Values" Value="Ext.encode(#{GridPanel1}.getRowsValues({selectedOn ly:true}))"
Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:Button ID="Button1" runat="server" Icon="Add">
<DirectEvents>
<Click OnEvent="btnAdd_Click">
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>

</ext:GridPanel>

</div>
</form>
</body>
</html>
.cs page


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;

public partial class ValidationCheck : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

if (!X.IsAjaxRequest)
{
//DataSource for StoreCombo
List<object> StoreComboData = new List<object>
{
new {TopicID="1",TopicName="Topic1"},
new {TopicID="2",TopicName="Topic2"},
new {TopicID="3",TopicName="Topic3"}
};
StoreCombo.DataSource = StoreComboData;
StoreCombo.DataBind();



//DataSource for GridBox
List<object> gridData = new List<object>
{
new {TopicID = "1", TopicName = "Topic1", ShortDescription="Test1" },
new {TopicID = "3", TopicName = "Topic3", ShortDescription="Test2"}

};
Store1.DataSource = gridData;
Store1.DataBind();
}

}

[DirectMethod]
protected void btnSave_Click(object sender, DirectEventArgs e)
{
string json = e.ExtraParams["Values"];
Dictionary<string, string>[] dctTopics = JSON.Deserialize<Dictionary<string, string>[]>(json);

string strTopicName = string.Empty;
string strTopicDescp = string.Empty;
string strTopicID = string.Empty;
foreach (Dictionary<string, string> row in dctTopics)
{

foreach (KeyValuePair<string, string> keyValuePair in row)
{
if (keyValuePair.Key == "TopicName")
{

strTopicName = keyValuePair.Value;
}

}



}
}

protected void btnAdd_Click(object sender, DirectEventArgs e)
{
List<object> gridData = new List<object>
{
new {TopicID = "1", TopicName = "", ShortDescription="" },

};
this.Store1.Add(gridData);
this.GridPanel1.GetStore().CommitChanges();
}
}


Steps:

1. Try to empty Short Description text box in column and tab out, the validation shows up.
2. Click on Add icon at the top bar on the grid. New row is added.
3. Short Description is already empty and the validation does not show up.

I need to implement a validation if short Descrption is empty and also if Topic combo box is not chosen. Let me know how I can acheive it.

Thanks

Daniil
Jun 09, 2014, 5:52 AM
Thank you for the test case.

In the future, please put the code behind directly on the .aspx page.

<%@ Page Language="C#" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{

}

/* the rest of code behind */
</script>

Please notice

<%@ Page Language="C#" %>

Everything else is removed.

It allows us to copy, paste and run your test cases without any chances. It speeds up processing. Thank you for understanding.

As for the problem, I can suggest the following solution.

<ext:Column ...>
<Editor>
<ext:TextField runat="server" AllowBlank="false" />
</Editor>
<EditorOptions>
<Listeners>
<StartEdit Handler="this.field.validate();" />
</Listeners>
</EditorOptions>
</ext:Column>

vmehta
Jun 09, 2014, 8:58 AM
Thanks for the reply. But adding this did not work.

Daniil
Jun 09, 2014, 9:07 AM
Please post a full test case again.

vmehta
Jun 09, 2014, 3:47 PM
Here is the sample.


<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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>
<ext:XScript ID="XScript1" runat="server">
<script>
var topicValues = function (value)
{
var r = #{StoreCombo}.getById(value);
if (Ext.isEmpty(r))
{
return "";

}
return r.data.TopicName;

};


</script>

</ext:XScript>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{

if (!X.IsAjaxRequest)
{
//DataSource for StoreCombo
List<object> StoreComboData = new List<object>
{
new {TopicID="1",TopicName="Topic1"},
new {TopicID="2",TopicName="Topic2"},
new {TopicID="3",TopicName="Topic3"}
};
StoreCombo.DataSource = StoreComboData;
StoreCombo.DataBind();



//DataSource for GridBox
List<object> gridData = new List<object>
{
new {TopicID = "1", TopicName = "Topic1", ShortDescription="Test1" },
new {TopicID = "3", TopicName = "Topic3", ShortDescription="Test2"}

};
Store1.DataSource = gridData;
Store1.DataBind();
}

}

[DirectMethod]
protected void btnSave_Click(object sender, DirectEventArgs e)
{
string json = e.ExtraParams["Values"];
Dictionary<string, string>[] dctTopics = JSON.Deserialize<Dictionary<string, string>[]>(json);

string strTopicName = string.Empty;
string strTopicDescp = string.Empty;
string strTopicID = string.Empty;
foreach (Dictionary<string, string> row in dctTopics)
{

foreach (KeyValuePair<string, string> keyValuePair in row)
{
if (keyValuePair.Key == "TopicName")
{

strTopicName = keyValuePair.Value;
}

}



}
}

protected void btnAdd_Click(object sender, DirectEventArgs e)
{
List<object> gridData = new List<object>
{
new {TopicID = "1", TopicName = "", ShortDescription="" },

};
this.Store1.Add(gridData);
this.GridPanel1.GetStore().CommitChanges();
}
</script>
<ext:ResourceManager ID="rmPrelimIdeas" runat="server" />
<ext:Store ID="StoreCombo" runat="server">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="TopicID">
<Fields>
<ext:ModelField Name="TopicID" />
<ext:ModelField Name="TopicName" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store ID="Store1" runat="server" PageSize="3">
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="TopicID" />
<ext:ModelField Name="TopicName" />
<ext:ModelField Name="ShortDescription" />
<ext:ModelField Name="LongDescription" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column4" runat="server" Text="Topic" DataIndex="TopicID" Width="240">
<Renderer Fn="topicValues" />
<Editor>
<ext:ComboBox ID="ComboBox1" runat="server" StoreID="StoreCombo" DisplayField="TopicName"
ValueField="TopicID" />
</Editor>
</ext:Column>
<ext:Column ID="Column1" runat="server" Text="Short Description" DataIndex="ShortDescription"
Flex="1">
<Editor>
<ext:TextField ID="TextField1" runat="server" AllowBlank="false" />
</Editor>
<EditorOptions>
<Listeners>
<StartEdit Handler="this.field.validate();" />
</Listeners>
</EditorOptions>
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server">
</ext:CellEditing>
</Plugins>
<SelectionModel>
<ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" />
</SelectionModel>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="btnSave" runat="server" Icon="Disk">
<DirectEvents>
<Click OnEvent="btnSave_Click">
<ExtraParams>
<ext:Parameter Name="Values" Value="Ext.encode(#{GridPanel1}.getRowsValues({selectedOn ly:true}))"
Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:Button ID="Button1" runat="server" Icon="Add">
<DirectEvents>
<Click OnEvent="btnAdd_Click">
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:GridPanel>
</div>
</form>
</body>
</html>

Daniil
Jun 09, 2014, 3:58 PM
Indeed, it doesn't work. Sorry for the inconvenience.

Please set up Delay="1".

<StartEdit Handler="this.field.validate();" Delay="1" />

vmehta
Jun 10, 2014, 7:44 AM
Yes. It did work. But when I added a new row and clicked on it, the validator comes up. But when I tab out, the validator disappears which means it will still allow the user to click on save and continue. Is there an option to control this?

Daniil
Jun 10, 2014, 2:44 PM
To validate a Store's data I would try a Model's Validations, see "Validations" section in the docs:
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Model

<ext:Model runat="server">
<Fields>
<ext:ModelField Name="text" />
</Fields>
<Validations>
<ext:PresenceValidation Field="text" />
</Validations>
</ext:Model>

To visualize an error in a GridPanel I would think about a Column's Renderer.