This is a migrated thread and some comments may be shown as answers.

Can't validate properly client side

9 Answers 142 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Jocelyn asked on 07 Mar 2012, 07:10 PM

Hi,

I am validating a GridDateTimeColumn client side. Here is my code:

Protected Sub gridRemarques_ItemCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles gridRemarques.ItemCreated

If (TypeOf e.Item Is GridEditableItem AndAlso e.Item.IsInEditMode) Then

Dim eItem = CType(e.Item, GridEditableItem)

Dim lnkInsert As linkButton = eItem.FindControl("PerformInsertButton")

Dim lnkUpdate As linkButton = eItem.FindControl("UpdateButton")

If lnkInsert IsNot Nothing AndAlso e.Item.OwnerTableView.IsItemInserted Then

lnkInsert.OnClientClick = "return Validate()"

Else

lnkUpdate.OnClientClick = "return Validate()"

End If

End Sub

This was working. I just change my linkButton for PushButton and even though the return is true or false, UpdateCommand/InserCommand is never fired... I tried some solutions on the forum, but I had no result.

My JS Validate() is simply like that for the moment:

function Validate()

{

return true;

}

Thanks.

9 Answers, 1 is accepted

answered on 08 Mar 2012, 09:26 AM

Hello,

I tried the same scenario with PushButton which worked as expected. Here is the sample code.
aspx:

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" DataSourceID="SqlDataSource1" OnInsertCommand="RadGrid1_InsertCommand" OnItemDataBound="RadGrid1_ItemDataBound" OnUpdateCommand="RadGrid1_UpdateCommand">

<MasterTableView CommandItemDisplay="Top">

<editcolumn buttontype="PushButton"></editcolumn>

<Columns>

<telerik:GridEditCommandColumn ButtonType="PushButton"></telerik:GridEditCommandColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

VB:

Protected Sub RadGrid1_ItemDataBound(sender As Object, e As Telerik.Web.UI.GridItemEventArgs)

If TypeOf e.Item Is GridEditableItem AndAlso e.Item.IsInEditMode Then

Dim itm As GridEditableItem = DirectCast(e.Item, GridEditableItem)

Dim btn As Button = DirectCast(itm.FindControl("UpdateButtonButton"), Button)

btn.OnClientClick = "return validate()"

End If

End Sub

Please provide your complete code if it doesn't help.

-Shinu.

answered on 08 Mar 2012, 02:39 PM

Hi Shinu,

Still not working. Here is my code:

aspx:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Remarques.aspx.vb" Inherits="GESPHARxLite_2.Remarques" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>

<script src="Scripts/UtilsCGSI.js" type="text/javascript"></script>

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title></title>

<link href="css/GESPHARxLite.css" rel="stylesheet" type="text/css" />

<style type="text/css">

html,body,form

{

margin:0;

height:100%;

overflow:hidden;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI"

Name="Telerik.Web.UI.Common.Core.js">

</asp:ScriptReference>

<asp:ScriptReference Assembly="Telerik.Web.UI"

Name="Telerik.Web.UI.Common.jQuery.js">

</asp:ScriptReference>

<asp:ScriptReference Assembly="Telerik.Web.UI"

Name="Telerik.Web.UI.Common.jQueryInclude.js">

</asp:ScriptReference>

</Scripts>

</telerik:RadScriptManager>

<telerik:RadFormDecorator ID="RadFormDecorator1" DecoratedControls="All" runat="server" />

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" >

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="gridRemarques">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="gridRemarques"

LoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelHeight="100%" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="WebBlue">

</telerik:RadAjaxLoadingPanel>

<div id="gridDiv">

<telerik:RadGrid ID="gridRemarques" runat="server"

style="border:0;outline:none" Height="80%"

Width="100%" Skin="WebBlue" CellSpacing="0"

GridLines="None" >

<ClientSettings>

<Selecting CellSelectionMode="None"></Selecting>

</ClientSettings>

<MasterTableView CommandItemDisplay="Top" EditFormSettings-EditColumn-CancelText="Annuler"

EditFormSettings-EditColumn-InsertText="Ajouter" EditFormSettings-EditColumn-UpdateText="Enregistrer" >

<SortExpressions>

<telerik:GridSortExpression FieldName="" SortOrder="Ascending" />

</SortExpressions>

<CommandItemSettings ExportToPdfText="Export to PDF" AddNewRecordText="Ajouter" RefreshText="Rafraîchir"></CommandItemSettings>

<RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>

<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>

<Columns>

<telerik:GridEditCommandColumn FilterControlAltText="Filter EditCommandColumn column"

ButtonType="ImageButton" EditText="Modifier" Resizable="False"

HeaderStyle-Width="46px" EditImageUrl="Images/Edit32x32.png" >

<HeaderStyle Width="46px"></HeaderStyle>

</telerik:GridEditCommandColumn>

<telerik:GridButtonColumn CommandName="Delete"

ConfirmText="Êtez-vous sûr de vouloir supprimer?"

FilterControlAltText="Filter column column" Text="Supprimer"

UniqueName="column" ButtonType="ImageButton" ImageUrl="Images/Delete32x32.png" ConfirmDialogType="Classic">

<HeaderStyle Width="46px"></HeaderStyle>

</telerik:GridButtonColumn>

<telerik:GridBoundColumn DataField="rema_noauto"

FilterControlAltText="Filter colNoAuto column" HeaderText="NoAuto"

ReadOnly="True" UniqueName="colNoAuto" Visible="False" ShowFilterIcon="False">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="pati_noauto2"

FilterControlAltText="Filter colNoAuto2 column" HeaderText="PatiNoAuto2"

ReadOnly="True" UniqueName="colNoAuto2" Visible="false" ShowFilterIcon="False">

</telerik:GridBoundColumn>

<telerik:GridDateTimeColumn DataField="Date"

FilterControlAltText="Filter colDate column" HeaderText="Date"

UniqueName="colDate" ShowFilterIcon="False" CurrentFilterFunction="StartsWith" FilterDelay="700">

</telerik:GridDateTimeColumn>

<telerik:GridBoundColumn DataField="equi_code"

FilterControlAltText="Filter colEquipe column" HeaderText="Code d'équipe"

UniqueName="colEquipe" ShowFilterIcon="False" ReadOnly="true" CurrentFilterFunction="StartsWith" FilterDelay="700">

</telerik:GridBoundColumn>

<telerik:GridDropDownColumn FilterControlAltText="Filter colEquipeEdit column"

UniqueName="colEquipeEdit" ListValueField="equi_code" ListTextField="equi_description"

ShowFilterIcon="False" Visible="False" HeaderText="Equipe" DropDownControlType="RadComboBox"

DataField="equi_code">

</telerik:GridDropDownColumn>

<telerik:GridBoundColumn DataField="rema_texte"

FilterControlAltText="Filter colRemarque column" HeaderText="Remarque"

UniqueName="colRemarque" ShowFilterIcon="False" CurrentFilterFunction="StartsWith" FilterDelay="700">

</telerik:GridBoundColumn>

<telerik:GridCheckBoxColumn DataField="isImprime"

FilterControlAltText="Filter colImprimer column" HeaderText="Imprimer" AllowFiltering="false"

UniqueName="colImprimer" ShowFilterIcon="False" CurrentFilterFunction="StartsWith" FilterDelay="700">

</telerik:GridCheckBoxColumn>

</Columns>

<EditFormSettings>

<EditColumn ButtonType="PushButton" CancelText="Annuler" UpdateText="Enregistrer" InsertText="Ajouter" FilterControlAltText="Filter EditCommandColumn column"></EditColumn>

</EditFormSettings>

</MasterTableView>

<FilterMenu EnableImageSprites="False"></FilterMenu>

<EditItemStyle BackColor="White" />

</telerik:RadGrid>

</div>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

<!--

$("#gridDiv").addClass("fullscreen");

function Validate()

{

/*var pkDate = $find(GetServerElement("RDIPcolDate", "input").id);

var isValid = true;

if (pkDate.get_selectedDate() == null)

{

pkDate.get_textBox().style.backgroundColor = "#E77471";

isValid = false;

}*/

return true;

}

-->

</script>

</telerik:RadCodeBlock>

</form>

</body>

</html>

VB:

Protected Sub gridRemarques_NeedDataSource(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles gridRemarques.NeedDataSource

gridRemarques.DataSource = CurrentPatient.Remarques

End Sub

Protected Sub gridRemarques_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles gridRemarques.ItemDataBound

If (TypeOf e.Item Is GridEditableItem AndAlso CType(e.Item, GridEditableItem).IsInEditMode) Then

Dim eItem As GridEditableItem = CType(e.Item, GridEditableItem)

Dim btnName As String

If Not eItem.OwnerTableView.IsItemInserted Then 'Edit

Dim CurrentRemarque = CType(CType(eItem.DataItem, DataRowView).Row, clsRemarque)

SetCurrentRemarque(CurrentRemarque.NoAuto)

btnName = "UpdateButton"

Else 'Insert

Dim DatePicker As RadDatePicker = CType(eItem.EditManager.GetColumnEditor("colDate"), GridDateTimeColumnEditor).PickerControl

DatePicker.SelectedDate = Now.Date

btnName = "PerformInsertButton"

End If

DirectCast(eItem.FindControl(btnName), Button).OnClientClick = "return Validate()"

End If

End Sub

Thanks.

answered on 19 Mar 2012, 06:46 PM

I tried a sample project and it worked on 2011.3.1305.35, but on 2012.1.215.35 it's not working anymore...

Edit: I just went back to 2011.3.1305.35 and still not working.

Is that a known issue?

ASPX:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="GridForm.aspx.vb" Inherits="RadControlsWebApp5.GridForm" %>

<!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">

<script src="Scripts/jQuery.js" type="text/javascript"></script>

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />

<style type="text/css">

body, html, form

{

margin: 0;

padding: 0;

height: 100%;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

$(window).load(function()

{

$(window).resize(function()

{

Resize();

});

function Validate()

{

alert("test");

return true;

}

function Resize()

{

var grid = $find("<%= RadGrid1.ClientID %>");

var height = $("#form1").height() - 2 - $("#headDiv").height();

grid.get_element().style.height = height + "px";

grid.repaint();

}

</script>

</telerik:RadCodeBlock>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"/>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">

</telerik:RadAjaxLoadingPanel>

<div id="headDiv" style="background-color: Yellow;">

<telerik:RadToolBar ID="mainToolBar" runat="server" Style="z-index: 90001" Width="100%"

EnableRoundedCorners="True" EnableShadows="True"

Skin="WebBlue" ButtonHeight="32px">

<Items>

<telerik:RadToolBarButton ImageUrl="Images/Add32x32.gif" ToolTip="Ajouter"

AccessKey="A" Text="<u>A</u>jouter" Value="Ajouter" />

<telerik:RadToolBarDropDown ImageUrl="Images/Properties32x32.gif"

EnableDefaultButton="false" AccessKey="O" Text="<u>O</u>pération sur ordonnance"

ToolTip="Opération sur ordonnance">

<Buttons>

<telerik:RadToolBarButton ImageUrl="Images/Remove16x16.gif" Text="<u>C</u>esser"

ToolTip="Cesser" />

<telerik:RadToolBarButton ImageUrl="~/Images/Button_Reload16x16.png"

Text="<u>R</u>enouveller" ToolTip="Renouveller" />

<telerik:RadToolBarButton ImageUrl="Images/pills16x16.gif" Text="Renouvellement <u>p</u>rématuré"

ToolTip="Renouvellement prématuré" />

</Buttons>

</telerik:RadToolBarDropDown>

<telerik:RadToolBarButton ImageUrl="Images/HourGlass32x32.gif"

Text="<u>D</u>emandes en attente" ToolTip="Demandes en attente" />

<telerik:RadToolBarButton Text="DPA Global" CheckOnClick="true" Checked="false" AllowSelfUnCheck="true"

id="chkDPAGlobal" Height="100%" />

</Items>

</telerik:RadToolBar>

</div>

<div id="gridDiv" style="background-color: Aqua;">

<telerik:RadGrid ID="RadGrid1" runat="server" CellSpacing="0" GridLines="None" AllowFilteringByColumn="True"

BorderWidth="1px" Height="441px">

<MasterTableView>

<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

<RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">

<HeaderStyle Width="20px"></HeaderStyle>

</ExpandCollapseColumn>

<Columns>

<telerik:GridEditCommandColumn FilterControlAltText="Filter EditCommandColumn column">

</telerik:GridEditCommandColumn>

</Columns>

<EditFormSettings>

<EditColumn ButtonType="PushButton"

FilterControlAltText="Filter EditCommandColumn column"

UniqueName="EditCommandColumn1">

</EditColumn>

</EditFormSettings>

</MasterTableView>

<FilterMenu EnableImageSprites="False">

</FilterMenu>

<ClientSettings>

<Scrolling UseStaticHeaders="true" AllowScroll="true" />

</ClientSettings>

</telerik:RadGrid>

</div>

<asp:SqlDataSource ID="AdventureWorks" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"

SelectCommand="SELECT * FROM Production.[TransactionHistory]"></asp:SqlDataSource>

</form>

</body>

</html>

VB:

Imports Telerik.Web.UI

Partial Public Class GridForm

Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

End Sub

Protected Sub RadGrid1_ItemCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles RadGrid1.ItemCreated

'If TypeOf e.Item Is GridHeaderItem Then

' Dim headerItem As GridHeaderItem = TryCast(e.Item, GridHeaderItem)

' headerItem("CreditRating").ToolTip = "CreditRating"

' headerItem("PreferredVendorStatus").ToolTip = "PreferredVendorStatus"

' headerItem("ActiveFlag").ToolTip = "ActiveFlag"

'End If

End Sub

Protected Sub RadGrid1_UpdateCommand(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles RadGrid1.UpdateCommand

Dim item As GridEditableItem = TryCast(e.Item, GridEditableItem)

Dim newValues As New Hashtable

e.Item.OwnerTableView.ExtractValuesFromItem(newValues, item)

Debug.WriteLine("allo")

End Sub

Protected Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles RadGrid1.ItemDataBound

If (TypeOf e.Item Is GridEditableItem AndAlso e.Item.IsInEditMode) Then

Dim item As GridEditableItem = CType(e.Item, GridEditableItem)

Dim btn As Button = DirectCast(item.FindControl("UpdateButton"), Button)

btn.OnClientClick = "return Validate()"

End If

End Sub

Protected Sub RadGrid1_NeedDataSource(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles RadGrid1.NeedDataSource

Dim dt As New DataTable()

Dim dr As DataRow

Dim colsNum As Integer = 2

Dim rowsNum As Integer = 50

Dim colName As String = "Column"

For j As Integer = 1 To colsNum

dt.Columns.Add([String].Format("{0}{1}", colName, j))

Next

For i As Integer = 1 To rowsNum

dr = dt.NewRow()

For k As Integer = 1 To colsNum

dr([String].Format("{0}{1}", colName, k)) = [String].Format("{0}{1} Row{2}", colName, k, i)

Next

dt.Rows.Add(dr)

Next

TryCast(sender, RadGrid).DataSource = dt

End Sub

End Class

Thanks