Hi
I have a Grid, Add/Editing of record is done using EditMode="PopUp"
Inside a FormTemplate I have a MultiColumn ComboBox and a TextBox to enter landline no.
I have ASP.NET customValidator besides Textbox and want to perform client side validation. ( Using JQuery ? )
It should check that First two characters entered in landlineno Textbox matches with CityCode Column used in ComboBox Template.
<telerik:RadGrid ID="RadGrid1" >
....
<MasterTableView EditMode="PopUp" >
....
<EditFormSettings PopUpSettings-Modal="true" >
....
<FormTemplate >
......
.....
<telerik:RadComboBox ID="RadComboBox2" Runat="server" TabIndex="3"
DropDownWidth="320px"
HighlightTemplatedItems="true"
DataSourceID="EDSStateList" DataTextField="StateName"
DataValueField="StateCode" SelectedValue='<%# Bind("FK_StateCode") %>'>
<HeaderTemplate>
<ul>
<li class="col1">StateName</li>
<li class="col2">CityName</li>
<li class="col3">CityCode</li>
</ul>
</HeaderTemplate>
<ItemTemplate>
<ul>
<li class="col1">
<%# DataBinder.Eval(Container.DataItem, "StateName")%></li>
<li class="col2">
<%# DataBinder.Eval(Container.DataItem, "CityName")%></li>
<li class="col3">
<%# DataBinder.Eval(Container.DataItem, "CityCode") %></li>
</ul>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</telerik:RadComboBox>
.....
....
....
<FormTemplate >
-JD
<
asp:LinkButton
runat
=
"server"
ID
=
"Label2"
Text='<%# Eval("News_Title")%>' Font-Bold="true"
Font-Names="Tahoma" Font-Size="Small" OnClientClick="javascript:RowDblClick();">
</
asp:LinkButton
>
<
telerik:RadWindowManager
ID
=
"RadWindowManager2"
runat
=
"server"
Skin
=
"Black"
>
<
Windows
>
<
telerik:RadWindow
ID
=
"GetContactUsWindow"
runat
=
"server"
Title
=
"تعليقات"
Modal
=
"true"
ReloadOnShow
=
"true"
Width
=
"750px"
Height
=
"750px"
Animation
=
"Fade"
AutoSize
=
"true"
>
</
telerik:RadWindow
>
</
Windows
>
</
telerik:RadWindowManager
>
function RowDblClick(sender, eventArgs) {
$find('<%= GetContactUsWindow.ClientID%>').show(); return
false;
}
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<
style
type
=
"text/css"
>
.style1
{
width: 100%;
}
.style2
{
direction: rtl;
}
</
style
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
>
</
telerik:RadScriptManager
>
<
telerik:RadAjaxManager
runat
=
"server"
ID
=
"RadAjaxManager1"
DefaultLoadingPanelID
=
"RadAjaxLoadingPanel1"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"RadGrid1"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadGrid1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadWindowManager1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
<
telerik:RadAjaxLoadingPanel
ID
=
"RadAjaxLoadingPanel1"
runat
=
"server"
Skin
=
"Default"
>
</
telerik:RadAjaxLoadingPanel
>
<
telerik:RadAjaxPanel
ID
=
"RadAjaxPanel1"
runat
=
"server"
HorizontalAlign
=
"NotSet"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
>
<
telerik:RadGrid
ID
=
"RadGrid1"
DataSourceID
=
"SqlDataSource1"
runat
=
"server"
GridLines
=
"None"
CellSpacing
=
"0"
AutoGenerateColumns
=
"False"
Style
=
"direction: rtl"
OnPreRender
=
"RadGrid1_PreRender"
>
<
MasterTableView
TableLayout
=
"Fixed"
DataKeyNames
=
"News_ID"
DataSourceID
=
"SqlDataSource1"
Width
=
"1000px"
>
<
ItemTemplate
>
<
table
class
=
"style1"
>
<
tr
>
<
td
class
=
"style2"
>
<
asp:Image
ID
=
"Image1"
runat
=
"server"
ImageUrl='<%# Eval("NewsCategory_AvatarPath")%>'
Width="30%" Height="30%" />
</
td
>
</
tr
>
<
tr
>
<
td
class
=
"style2"
>
<
asp:Label
runat
=
"server"
ID
=
"lblNewsTitle"
Text='<%# Eval("News_Title")%>' Font-Bold="true"
Font-Names="Tahoma" Font-Size="Small"></
asp:Label
>
</
td
>
</
tr
>
<
tr
>
<
td
class
=
"style2"
>
<
asp:Label
runat
=
"server"
ID
=
"lblNewsText"
Text='<%# Eval("News_Text")%>' Font-Bold="false"
Font-Names="Tahoma" Font-Size="Small"></
asp:Label
>
</
td
>
</
tr
>
<
tr
>
<
td
class
=
"style2"
>
<
asp:Label
runat
=
"server"
ID
=
"lblNewsDate"
Text='<%# Eval("News_Date")%>' Font-Bold="false"
Font-Names="Tahoma" Font-Size="X-Small"></
asp:Label
>
<
asp:Label
runat
=
"server"
ID
=
"lblNewsTime"
Text='<%# Eval("News_Time")%>' Font-Bold="false"
Font-Names="Tahoma" Font-Size="X-Small"></
asp:Label
>
</
td
>
</
tr
>
</
table
>
</
ItemTemplate
>
<
CommandItemSettings
ExportToPdfText
=
"Export to PDF"
/>
<
RowIndicatorColumn
FilterControlAltText
=
"Filter RowIndicator column"
>
</
RowIndicatorColumn
>
<
ExpandCollapseColumn
FilterControlAltText
=
"Filter ExpandColumn column"
>
</
ExpandCollapseColumn
>
<
Columns
>
<
telerik:GridBoundColumn
DataField
=
"News_Title"
FilterControlAltText
=
"Filter News_Title column"
HeaderText
=
"أخبار شبكة شام"
HeaderStyle-Font-Bold
=
"false"
HeaderStyle-Font-Names
=
"Tahoma"
HeaderStyle-Font-Size
=
"Small"
SortExpression
=
"News_Title"
UniqueName
=
"News_Title"
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"News_Text"
FilterControlAltText
=
"Filter News_Text column"
SortExpression
=
"News_Text"
UniqueName
=
"News_Text"
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"News_Date"
FilterControlAltText
=
"Filter News_Date column"
SortExpression
=
"News_Date"
UniqueName
=
"News_Date"
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"News_Time"
FilterControlAltText
=
"Filter News_Time column"
SortExpression
=
"News_Time"
UniqueName
=
"News_Time"
>
</
telerik:GridBoundColumn
>
</
Columns
>
<
DetailTables
>
<
telerik:GridTableView
CommandItemDisplay
=
"Bottom"
DataKeyNames
=
"News_Notes.Note_ID, News_Notes.News_ID"
Width
=
"100%"
DataSourceID
=
"SqlDataSource2"
AllowAutomaticInserts
=
"true"
>
<
ParentTableRelation
>
<
telerik:GridRelationFields
DetailKeyField
=
"News_Notes.News_ID"
MasterKeyField
=
"News.News_ID"
/>
</
ParentTableRelation
>
<
ItemTemplate
>
<
table
class
=
"style1"
>
<
tr
>
<
td
class
=
"style2"
>
<
asp:Label
runat
=
"server"
ID
=
"lblNewsTitle"
Text='<%# Eval("User_Name")%>'
Font-Bold="false" Font-Names="Tahoma" Font-Size="Small"></
asp:Label
>
</
td
>
</
tr
>
<
tr
>
<
td
class
=
"style2"
>
<
asp:Label
runat
=
"server"
ID
=
"lblNewsText"
Text='<%# Eval("Note_Text")%>'
Font-Bold="false" Font-Names="Tahoma" Font-Size="Small"></
asp:Label
>
</
td
>
</
tr
>
<
tr
>
<
td
class
=
"style2"
>
<
asp:Label
runat
=
"server"
ID
=
"lblNewsDate"
Text='<%# Eval("Note_Date")%>'
Font-Bold="false" Font-Names="Tahoma" Font-Size="Small"></
asp:Label
>
</
td
>
</
tr
>
</
table
>
</
ItemTemplate
>
<
Columns
>
<
telerik:GridBoundColumn
DataField
=
"Note_ID"
DataType
=
"System.Int32"
FilterControlAltText
=
"Filter Note_ID column"
HeaderText
=
"التعليقات"
ReadOnly
=
"True"
SortExpression
=
"Note_ID"
UniqueName
=
"Note_ID"
HeaderStyle-Font-Bold
=
"false"
HeaderStyle-Font-Names
=
"Tahoma"
HeaderStyle-Font-Size
=
"Small"
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"Note_Text"
FilterControlAltText
=
"Filter Note_Text column"
SortExpression
=
"Note_Text"
UniqueName
=
"Note_Text"
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"Note_Date"
DataType
=
"System.DateTime"
FilterControlAltText
=
"Filter Note_Date column"
SortExpression
=
"Note_Date"
UniqueName
=
"Note_Date"
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"User_Name"
FilterControlAltText
=
"Filter User_Name column"
SortExpression
=
"User_Name"
UniqueName
=
"User_Name"
>
</
telerik:GridBoundColumn
>
</
Columns
>
</
telerik:GridTableView
>
</
DetailTables
>
</
NestedViewTemplate
>
<
EditFormSettings
>
<
EditColumn
FilterControlAltText
=
"Filter EditCommandColumn column"
>
</
EditColumn
>
</
EditFormSettings
>
</
MasterTableView
>
<
FilterMenu
EnableImageSprites
=
"False"
>
</
FilterMenu
>
<
HeaderContextMenu
CssClass
=
"GridContextMenu GridContextMenu_Default"
>
</
HeaderContextMenu
>
</
telerik:RadGrid
>
</
telerik:RadAjaxPanel
>
<
telerik:RadWindowManager
ID
=
"RadWindowManager1"
runat
=
"server"
/>
<
asp:SqlDataSource
ID
=
"SqlDataSource1"
runat
=
"server"
SelectCommand="SELECT News.News_ID, News.News_CategoryID, News.News_AdminID,
News.News_Title, News.News_Text, News.News_Date, News.News_Time,
News.News_FlagIsActive, NewsCategories.NewsCategory_ID, NewsCategories.NewsCategory_AvatarPath
FROM News INNER JOIN NewsCategories ON
News.News_CategoryID
=
NewsCategories
.NewsCategory_ID
WHERE
News.News_FlagIsActive
=
'True'
Order BY News.News_ID DESC"></
asp:SqlDataSource
>
<
asp:SqlDataSource
ID
=
"SqlDataSource2"
runat
=
"server"
SelectCommand="SELECT News_Notes.Note_ID, News_Notes.News_ID, News_Notes.User_ID,
News_Notes.Note_Text, News_Notes.Note_Date, News_Notes.Note_Flag,
UsersTable.User_ID AS Expr1, UsersTable.User_Name
FROM News_Notes INNER JOIN UsersTable ON
News_Notes.User_ID
=
UsersTable
.User_ID
WHERE
News_Notes.Note_Flag
=
'True'
Order BY News_Notes.Note_Date "></
asp:SqlDataSource
>
var assignedToCol = new AssignedToCustomBoundFilteringColumn();
assignedToCol.DataField = "AssessmentManagerUser.FullName";
assignedToCol.HeaderText = "Assigned To";
assignedToCol.UniqueName = "AssignedTo";
assignedToCol.SortExpression = "AssessmentManagerUser.FullName";
PlaApplicationsGrid.MasterTableView.Columns.Add(assignedToCol);
private class AssignedToCustomBoundFilteringColumn : GridBoundColumn
{
protected override void SetupFilterControls(TableCell cell)
{
RadComboBox rcBox = new RadComboBox();
rcBox.ID = "AssignedToFilterDropDownList";
rcBox.AutoPostBack = true;
rcBox.DataTextField = "FullName";
rcBox.DataValueField = "FullName";
rcBox.SelectedIndexChanged += rcBox_SelectedIndexChanged;
rcBox.ItemDataBound += new RadComboBoxItemEventHandler(rcBox_ItemDataBound);
var plaOfficers = ApplicationUserManager.Instance.GetBySecurityRoles(new string[] { KnownRoleNames.PLAOfficer }) as List<
ApplicationUser
>;
var unassignedUser = ApplicationUserManager.Instance.GetUnassigned();
ApplicationUser tempEmptyUser = new ApplicationUser();
tempEmptyUser.Person = new Person();
tempEmptyUser.Person.FirstName = "empty";
tempEmptyUser.Person.Surname = "";
plaOfficers.Insert(0, unassignedUser);
plaOfficers.Insert(0, tempEmptyUser);
rcBox.DataSource = plaOfficers;
rcBox.DataBind();
//rcBox.Items[0].Text = "Unassigned";
cell.Controls.Add(rcBox);
}
private void rcBox_ItemDataBound(object sender, RadComboBoxItemEventArgs e)
{
// Need this unless you want the item text to say "Unassignred Unassigned"
if (e.Item.Text == ApplicationUserManager.Instance.GetUnassigned().FullName)
{
e.Item.Text = ApplicationUserManager.Instance.GetUnassigned().Username;
}
else if (e.Item.Text == "empty ")
{
e.Item.Text = " ";
}
}
protected override void SetCurrentFilterValueToControl(TableCell cell)
{
if (!(this.CurrentFilterValue == ""))
{
((RadComboBox)cell.Controls[0]).Items.FindItemByValue(this.CurrentFilterValue).Selected = true;
}
}
protected override string GetCurrentFilterValueFromControl(TableCell cell)
{
string currentValue = ((RadComboBox)cell.Controls[0]).SelectedItem.Value;
this.CurrentFilterFunction = (currentValue != "" && currentValue != "empty ") ? GridKnownFunction.EqualTo : GridKnownFunction.NoFilter;
return currentValue;
}
private void rcBox_SelectedIndexChanged(object sender, Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs e)
{
((GridFilteringItem)(((RadComboBox)sender).Parent.Parent)).FireCommandEvent("Filter", new Pair());
}
}
var stateCol = new StateCustomBoundFilteringColumn(); // AssignedTo column filtering breaks when this column is introduced
//var stateCol = new GridBoundColumn();
stateCol.DataField = "State.Description";
stateCol.HeaderText = "State";
stateCol.UniqueName = "State";
stateCol.SortExpression = "State.Description";
PlaApplicationsGrid.MasterTableView.Columns.Add(stateCol);
private class StateCustomBoundFilteringColumn : GridBoundColumn
{
protected override void SetupFilterControls(TableCell cell)
{
RadComboBox rcBox = new RadComboBox();
rcBox.ID = "StateFilterDropDownList";
rcBox.AutoPostBack = true;
rcBox.DataTextField = "Description";
rcBox.DataValueField = "Name";
rcBox.SelectedIndexChanged += rcBox_SelectedIndexChanged;
var validStates = ApplicationStateManager.Instance.GetAllMasterBuildStates();
ApplicationState tempEmptyState = new ApplicationState();
tempEmptyState.Name = "empty";
tempEmptyState.Description = "";
validStates.Insert(0, tempEmptyState);
rcBox.DataSource = validStates;
rcBox.DataBind();
//rcBox.Items[0].Text = "Unassigned";
cell.Controls.Add(rcBox);
}
protected override void SetCurrentFilterValueToControl(TableCell cell)
{
if (!(this.CurrentFilterValue == ""))
{
((RadComboBox)cell.Controls[0]).Items.FindItemByValue(this.CurrentFilterValue).Selected = true;
}
}
protected override string GetCurrentFilterValueFromControl(TableCell cell)
{
string currentValue = ((RadComboBox)cell.Controls[0]).SelectedItem.Value;
this.CurrentFilterFunction = (currentValue != "" && currentValue != "empty ") ? GridKnownFunction.EqualTo : GridKnownFunction.NoFilter;
return currentValue;
}
private void rcBox_SelectedIndexChanged(object sender, Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs e)
{
((GridFilteringItem)(((RadComboBox)sender).Parent.Parent)).FireCommandEvent("Filter", new Pair());
}
}