Radgrid clientside validation

[Sreedath Kuttan]

Hi,
     I am using the RADGRID in the editmode with lot of template columns.My grid code is below.

On click of a button 'Save all'(outside grid) ,I want to check all the rows in the grid for valid data;Like there is a dropdown with '--Select--' value,but the user must enter some value ,can some body tell me how this can be achieved.

The goal is to iterate through the grid rows and check for individual values in the cells.

<

telerik:radgrid

runat="server"

ID="rdTripWaypoints"

AutoGenerateColumns=False

Skin="RadControls"

GridLines="None"

EnableEmbeddedSkins="False"

CellPadding="0"

AllowSorting="True"

onitemdatabound="rdTripWaypoints_ItemDataBound"

onitemcommand="rdTripWaypoints_ItemCommand"

onprerender="rdTripWaypoints_PreRender"

onneeddatasource="rdTripWaypoints_NeedDataSource"

onitemcreated="rdTripWaypoints_ItemCreated">

<

PagerStyle PrevPageImageUrl="PagingPrev.gif" NextPageImageUrl="PagingNext.gif" FirstPageImageUrl="PagingFirst.gif" LastPageImageUrl="PagingLast.gif"></PagerStyle>

<MasterTableView EditMode =InPlace>

<

CommandItemSettings AddNewRecordImageUrl="AddRecord.gif" RefreshImageUrl="Refresh.gif"></CommandItemSettings>

<

RowIndicatorColumn FilterImageUrl="Filter.gif" SortAscImageUrl="SortAsc.gif" SortDescImageUrl="SortDesc.gif" Visible="False">

<

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

</

RowIndicatorColumn>

<

ExpandCollapseColumn ExpandImageUrl="SinglePlus.gif" CollapseImageUrl="SingleMinus.gif" FilterImageUrl="Filter.gif" SortAscImageUrl="SortAsc.gif" SortDescImageUrl="SortDesc.gif" Visible="False" Resizable="False">

<

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

</

ExpandCollapseColumn>

<Columns>

<telerik:GridTemplateColumn HeaderText ="Stop" UniqueName="Stop" >

<ItemTemplate>

<asp:Label ID="lblStop" runat =server CssClass="TxtVer11blackpadding" Width= "25px" >

</asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText ="Location Name" uniqueName = "ddlLocationName" Visible =true >

<ItemTemplate>

<asp:DropDownList Width="140px" runat =server ID ="ddlLocationName" CssClass="TxtVer11blackpadding" AutoPostBack=true ></asp:DropDownList>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText ="ETA" UniqueName="ETA" >

<ItemTemplate>

<asp:Label ID="lblETA" runat =server CssClass="TxtVer11blackpadding" Width= "40px" >

</asp:Label>

</ItemTemplate>

<ItemStyle Wrap="False" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText ="Appx Offload Time" UniqueName="AppxOffLoadTime" >

<ItemTemplate>

<asp:TextBox ID="txtAppxOffLoadTime" runat =server CssClass="TxtVer11blackpadding" Width="40px">

</asp:TextBox>

<asp:Label ID="lblOffLoadTime" runat =server CssClass="TxtVer11blackpadding" Visible="false" Width="40px">

</asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText ="Appx Departure Date" uniqueName = "AppxDepartureTime" Visible =true>

<ItemTemplate>

<telerik:RadDateTimePicker style=" top:10px; " id="dtpDepDate" tabIndex=11 runat="server" Width="150px" Skin="RadControls" EnableTyping="False" EnableEmbeddedSkins="False" BackColor="Transparent" BorderColor="Transparent" Calendar-ClientEvents-OnDateSelecting="OnDateSelecting">

<TimePopupButton HoverImageUrl="~/RadControls/Calendar/time.gif" ImageUrl="~/RadControls/Calendar/time.gif" CssClass="radPopupImage_RadControls" TabIndex="12" />

<TimeView EnableEmbeddedSkins="False" Skin="RadControls" TimeFormat="HH:mm:ss" TabIndex="14">

</TimeView>

<DateInput DateFormat="MM/dd/yyyy HH:mm" Font-Names="verdana" Font-Size="11px" InvalidStyleDuration="100" EnableEmbeddedSkins="False" LabelCssClass="radLabelCss_RadControls" Skin="RadControls" ReadOnly="True" TabIndex="11">

<ClientEvents OnError="HandleError" />

</DateInput>

<Calendar EnableEmbeddedSkins="False" Skin="RadControls" FastNavigationNextImage="~/RadControls/Calendar/fastNavRight.gif" FastNavigationPrevImage="~/RadControls/Calendar/fastNavLeft.gif" NavigationNextImage="~/RadControls/Calendar/arrowRight.gif" NavigationPrevImage="~/RadControls/Calendar/arrowLeft.gif">

</Calendar>

<DatePopupButton HoverImageUrl="~/RadControls/Calendar/calendar.gif" ImageUrl="~/RadControls/Calendar/calendar.gif" CssClass="radPopupImage_RadControls" TabIndex="11" />

</telerik:RadDateTimePicker>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText ="Distance" UniqueName="Distance" >

<ItemTemplate>

<asp:Label ID="lblDistance" runat =server CssClass="TxtVer11blackpadding" Width= "40px" >

</asp:Label>

</ItemTemplate>

<ItemStyle Wrap="False" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText ="Latitude" UniqueName="Latitude" >

<ItemTemplate>

<asp:Label ID="lblLatitude" runat =server CssClass="TxtVer11blackpadding" Width= "40px" >

</asp:Label>

</ItemTemplate>

<ItemStyle Wrap="False" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText ="Longitude" UniqueName="Longitude" >

<ItemTemplate>

<asp:Label ID="lblLongitude" runat =server CssClass="TxtVer11blackpadding" Width= "40px" >

</asp:Label>

</ItemTemplate>

<ItemStyle Wrap="False" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText ="Charge Code" uniqueName = "ddlChargeCode" Visible =true>

<ItemTemplate>

<asp:DropDownList Width="140px" runat =server ID ="ddlChargeCode" CssClass="TxtVer11blackpadding" ></asp:DropDownList>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName ="btn" >

<ItemTemplate >

<asp:ImageButton runat = server ID="ibtnAdd" Text = "Add" ToolTip="Add a row below" CommandName ="Add" ImageUrl="../images/Add.GIF" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName ="btn" Visible =true >

<ItemTemplate >

<asp:ImageButton runat = server ID="ibtndelete" Text = "Delete" ToolTip="Delete row" CommandName ="Del" ImageUrl="../images/Delete.GIF" />

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

<

EditFormSettings>

<

EditColumn InsertImageUrl="Insert.gif" UpdateImageUrl="Update.gif" EditImageUrl="Edit.gif" CancelImageUrl="Cancel.gif" FilterImageUrl="Filter.gif" SortAscImageUrl="SortAsc.gif" SortDescImageUrl="SortDesc.gif"></EditColumn>

<

PopUpSettings ScrollBars="None"></PopUpSettings>

</

EditFormSettings>

<

PagerStyle PrevPageImageUrl="PagingPrev.gif" NextPageImageUrl="PagingNext.gif" FirstPageImageUrl="PagingFirst.gif" LastPageImageUrl="PagingLast.gif"></PagerStyle>

</MasterTableView>

</telerik:radgrid>

 

[Sebastian]

Hello Sreedath,

In order to extract the data from the controls inside the item templates of the template columns, consider traversing the Items collection of the MasterTableView from within the [Save all] button OnClick handler. How to get reference to controls inside grid cells you can see from these online resources:

http://demos.telerik.com/ASPNET/Prometheus/Grid/Examples/Programming/AccessingCellsAndRows/DefaultCS.aspx
http://www.telerik.com/help/aspnet-ajax/grdaccessingcellsandrows.html
http://www.telerik.com/help/aspnet-ajax/gridreferencecontrolsinroweditform.html

Thus you can perform your custom type of validation for the user input as well.

Best regards,
Stephen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.