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

[Solved] html5 validation are not triggered on insert or update grid

3 Answers 157 Views

Grid

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

Joseph asked on 25 Apr 2013, 08:12 AM

I try to trigger html5 validation inside a telerik:RedGrid and grid itself is inside telerik:RadAjaxPanel without luck. Here is a sample of the code:

As you can see from the sample code I provided at the end of the page that I am using <FormTemplate> to customize the form inside the grid on update and insert command, so I tried a workaround to trigger the validation via javascript by writing a hidden submit button

<input type="submit" style="display: none" name="submitButton" id="submitButton" /> and click it with javascript when ajax request started. And that did the trick with trigging the validation of html5 but a faced a new problem with firing the updated and insert command twice.

I hope that I explain the problem well enough.

Here is the sample of my code:

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<%@ Register Assembly="Html5Asp" Namespace="Html5Asp" TagPrefix="cc1" %>

<div id="period">

<h1>Period time</h1>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1" runat="server">

<telerik:RadGrid ID="RadGrid_period" runat="server" AllowMultiRowSelection="true"

Width="350px"

OnNeedDataSource="RadGrid_period_NeedDataSource"

AllowPaging="true" AllowSorting="true" PageSize="3" ImagesPath="../Images/Telerik/Grid"

OnInsertCommand="RadGrid_period_InsertCommand"

OnUpdateCommand="RadGrid_period_UpdateCommand"

OnDeleteCommand="RadGrid_period_DeleteCommand">

<PagerStyle NextPageText=">" PrevPageText="<" Mode="NextPrevAndNumeric"

PagerTextFormat="Change page: {4} | page {0} of {1}, number of periods: {5}." />

<ClientSettings>

<Selecting AllowRowSelect="true" />

</ClientSettings>

<MasterTableView DataKeyNames="Id" AutoGenerateColumns="false"

CommandItemDisplay="Top" EditMode="EditForms">

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">

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

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">

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

</ExpandCollapseColumn>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column">

</EditColumn>

<FormTableStyle CellPadding="2" CellSpacing="0" BackColor="White" Height="110px"></FormTableStyle>

<FormMainTableStyle CellPadding="3" CellSpacing="0" GridLines="Horizontal" BackColor="White"

Height="50px" Width="100%"></FormMainTableStyle>

<FormTableItemStyle Wrap="False"></FormTableItemStyle>

<FormTableAlternatingItemStyle Wrap="False"></FormTableAlternatingItemStyle>

<FormTableButtonRowStyle HorizontalAlign="Right"></FormTableButtonRowStyle>

</EditFormSettings>

<Columns>

<telerik:GridEditCommandColumn ButtonType="ImageButton" EditText="Opdater"

UniqueName="EditCommandColumn">

<HeaderStyle Width="30px" />

</telerik:GridEditCommandColumn>

<telerik:GridButtonColumn Text="Slet" DataTextField="username" CommandName="Delete" UniqueName="DeleteColumn"

ButtonType="ImageButton" ItemStyle-Width="30px"

ConfirmText="Do you want to remove the period ?">

<ItemStyle Width="30px"></ItemStyle>

</telerik:GridButtonColumn>

<telerik:GridBoundColumn HeaderText="id" DataType="System.int16" Display="false"

DataField="Id" UniqueName="Id" Visible="false" />

<telerik:GridBoundColumn HeaderText="name" DataType="System.String" Display="true"

DataField="Name" UniqueName="Name" Visible="true" />

<telerik:GridBoundColumn HeaderText="from time" DataType="System.TimeSpan" Display="true"

DataField="FromTime" UniqueName="FromTime" Visible="true" />

<telerik:GridBoundColumn HeaderText="to time" DataType="System.TimeSpan" Display="true"

DataField="ToTime" UniqueName="ToTime" Visible="true" />

<telerik:GridBoundColumn HeaderText="hoursPrMonth" DataType="System.int16" Display="false"

DataField="HoursPrMonth" UniqueName="HoursPrMonth" Visible="true" />

</Columns>

<EditFormSettings EditFormType="Template" ColumnNumber="1" CaptionDataField="name"

CaptionFormatString="Change period name,from time and to time for period: {0}">

<FormTemplate>

<div class="hidRowId">

<label>id</label>

<cc1:TextInput ID="TextInput1" runat="server" Text='<%# Bind("Id") %>' IsReadOnly="true" />

</div>

<div class="block">

<div class="div_LabelText">

<label>name:</label>

</div>

<cc1:TextInput ID="NameBox" runat="server" Text='<%# Bind("Name") %>' Required="true" />

</div>

<div class="block">

<div class="div_LabelText">

<label>from time:</label>

</div>

<telerik:RadTimePicker ID="RadTimePickerFromTime" runat="server" DbSelectedDate='<%# Bind("FromTime") %>' />

</div>

<div class="block">

<div class="div_LabelText">

<label>to time:</label>

</div>

<telerik:RadTimePicker ID="RadTimePickerToTime" runat="server" DbSelectedDate='<%# Bind("ToTime") %>' />

</div>

<div class="block">

<div class="div_LabelText">

<label>hoursPrMonth:</label>

</div>

<cc1:NumberInput ID="hoursPrMonthBox" runat="server" Text='<%# Bind("HoursPrMonth") %>' />

</div>

<div class="block">

<asp:Button ID="btnUpdate" Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'

runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>' />

<asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False" CommandName="Cancel" FormNoValidate="true" />

</div>

</FormTemplate>

<FormTableButtonRowStyle HorizontalAlign="Right"></FormTableButtonRowStyle>

</EditFormSettings>

</MasterTableView>

</telerik:RadGrid>

</telerik:RadAjaxPanel>

</div>

3 Answers, 1 is accepted

answered on 29 Apr 2013, 08:35 PM

Hi again

I am trying to validate cc1 input and cc1 input is just usercontroles that wrapped html5 controls to be used in asp.net or with other words I am using Html5Asp Controls to implement html5 with asp.net.

I don’t know what you mean by (no code for them) if you mean the code behind and how I bind the objects to the Grid, that is very simple: I just have a simple Table [Period] in the database and it is bind with the grid by grid event [OnNeedDataSource="RadGrid_period_NeedDataSource"] and the code for that is:

protected void RadGrid_period_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)

{

IRepository<PeriodTime> periodTimeRep = TRModel.PeriodRepositoryInstance;

List<PeriodTime> allPeriods = periodTimeRep.GetQuery().ToList();

if (allPeriods.Count > 0)

{

RadGrid_period.DataSource = allPeriods.OrderBy(u => u.FromTime);

}

else

{

RadGrid_period.DataSource = allPeriods;

}

And the object Period that is binded to the grid has properties [Id(int),Name(string),FromTime(Datetime),ToTime(Datetime), HoursPrMonth(int)]. The Name property is required and that means the user can’t submit the form if the Name field is empty. The other properties are not required but the form can’t be submitted if the user inserts a wrong type.

I hope that my question is better explained this time otherwise you are welcome to write to me if there are other mystical explanations for my problem.

Thanks in advance.