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

[Solved] Validation Error in Grids inside of a TabStrip?

2 Answers 112 Views

Grid

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

This question is locked. New answers and comments are not allowed.

Ahad asked on 14 May 2011, 12:13 AM

I'm having some trouble with validation errors, except the thing is, they are occurring in the jQuery validate plugin.
They occur when I try to edit or insert a record in a grid which resides inside of a tab strip in a partial view - and the partial view is loaded by Ajax into a panel.

I'm using the latest jQuery validate plug in, with the Telerik 2011.1.315 controls for ASP.NET MVC 3. We're using jQuery 1.4.4.

The head of my _Layout.cshtml (to give you an idea of the javascript libraries I manually register):

<head>

<title>@ViewBag.Title</title>

<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.livequery.min.js")" type="text/javascript"></script>

@RenderSection("HeadContent", required: false)

@(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group

.Add("telerik.common.min.css")

.Add("telerik.webblue.min.css")

.Combined(true)

.Compress(true)))

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

</head>

The body of my _Layout.cshtml (so as to have the Telerik scripts register after all of the UI controls):

<body>

<div id="main-content">

@RenderBody()

</div>

<div id="footer">©<script type="text/javascript">var d = new Date(); document.write(d.getFullYear());</script></div>

</div>

@(Html.Telerik().ScriptRegistrar().DefaultGroup(group => group

.Add("telerik.common.min.js")

.Add("telerik.calendar.min.js")

.Add("telerik.combobox.min.js")

.Add("telerik.datepicker.min.js")

.Add("telerik.datetimepicker.min.js")

.Add("telerik.draganddrop.js")

.Add("telerik.editor.min.js")

.Add("telerik.grid.min.js")

.Add("telerik.grid.editing.min.js")

.Add("telerik.grid.filtering.min.js")

.Add("telerik.grid.grouping.min.js")

.Add("telerik.grid.reordering.min.js")

.Add("telerik.grid.resizing.min.js")

.Add("telerik.list.min.js")

.Add("telerik.panelbar.min.js")

.Add("telerik.tabstrip.min.js")

.Add("telerik.textbox.min.js")

.Add("telerik.window.min.js")

.Combined(true)

.Compress(true)

.Enabled(true))

)

</body>

</html>

In this particular case, the view being called is DealerOfferSetup, which is passed in a DealerOfferViewModel, and whose content is below:

<div class="content-body">

@{Html.Telerik().PanelBar()

.Name("DealerOfferPanels")

.HtmlAttributes(new { style = "width: 100%; float: left; margin-bottom: 30px;" })

.ExpandMode(PanelBarExpandMode.Multiple)

.SelectedIndex(0)

.Items(i =>

{

i.Add()

.Text("Purchase Criteria")

.LoadContentFrom(Url.Action("AjaxView_PurchaseCriteria", "DealerOfferManagement"));

i.Add()

.Text("Payment Multiples")

.LoadContentFrom(Url.Action("AjaxView_PaymentMultiples", "DealerOfferManagement"));

i.Add()

.Text("Cell Vendors")

.LoadContentFrom(Url.Action("AjaxView_CellVendors", "DealerOfferManagement"));

i.Add()

.Text("Other Services")

.LoadContentFrom(Url.Action("AjaxView_OtherService", "DealerOfferManagement"));

})

.Render();

}

</div>

So, the content loaded in the panel is from an AjaxView_PurchaseCriteria method call on the controller DealerOfferManagement.
This portion works just fine, as that method call returns a partial view which contains the tab strip with the grid in question:

@model Security_Sherman_AssetManager.Areas.DealerManagement.Models.DealerOfferViewModel

@using Security_Sherman_AssetManager.TermSheetSrv;

<div id="TSPurchaseCriteria" class="body">

@{

Html.Telerik().TabStrip()

.Name("TSPurchaseCriteria")

.SelectedIndex(0)

.Items(ts =>

{

ts.Add()

.HtmlAttributes(new { id = "CreditScore_tab" })

.Text("Credit Score")

.Content(

@<text>

@(Html.Telerik().Grid<MinCreditRequired>(Model.DealerOffer.PurchaseCriteria.MinCreditRequiredList)

.Name("CreditScore")

.DataKeys(key => key.Add(o => o.DealerOfferRuleDetailId))

.ToolBar(commands =>

{

commands.Insert().ButtonType(GridButtonType.ImageAndText).ImageHtmlAttributes(new { style = "margin-left:0" });

commands.SubmitChanges().ButtonType(GridButtonType.ImageAndText).ImageHtmlAttributes(new { style = "margin-left:0" });

})

.Columns(columns =>

{

columns.Bound(o => o.TypeOfContract).Title("Credit Type");

columns.Bound(o => o.MinCredit).Title("Minimum Credit");

columns.Bound(o => o.EffectiveDate).Title("Effective Date");

columns.Bound(o => o.ExpireDate).Title("Expired Date");

columns.Command(commands =>

{

commands.Delete().ButtonType(GridButtonType.ImageAndText);

}).Title("Actions");

})

.DataBinding(dataBinding =>

{

dataBinding.Ajax()

.Select("CreditScore_Select", "DealerOfferManagement").Enabled(true)

//.Insert("CreditScore_Insert", "DealerOfferManagement").Enabled(true)

//.Delete("CreditScore_Delete", "DealerOfferManagement").Enabled(true)

//.Update("CreditScore_Update", "DealerOfferManagement").Enabled(true)

.Update("CreditScore_SaveBatchEditing", "DealerOfferManagement").Enabled(true);

})

.Selectable()

.Editable(editing => editing.Mode(GridEditMode.InCell))

.Scrollable()

.Pageable()

.Sortable()

)

</text>

);

ts.Add()

.HtmlAttributes(new { id = "RMR_tab" })

.Text("RMR Range")

.LoadContentFrom(Url.Action("AjaxView_RMR", "DealerOfferManagement", Model));

ts.Add()

.HtmlAttributes(new { id = "Activation_tab" })

.Text("Activation")

.LoadContentFrom(Url.Action("AjaxView_Activation", "DealerOfferManagement", Model));

ts.Add()

.HtmlAttributes(new { id = "ContractTerm_tab" })

.Text("Contract Term")

.LoadContentFrom(Url.Action("AjaxView_ContractTerm", "DealerOfferManagement", Model));

ts.Add()

.HtmlAttributes(new { id = "EPPR_tab" })

.Text("EPP Requirement")

.LoadContentFrom(Url.Action("AjaxView_EPPRequirement", "DealerOfferManagement", Model));

ts.Add()

.HtmlAttributes(new { id = "add_tab" })

.ImageUrl(Url.Content("~/Content/icons/add_tab.png"))

.ImageHtmlAttributes(new { style = "margin: 0px; padding: 0px; " })

.LoadContentFrom(Url.Action("AjaxView_AddCriteria", "DealerOfferManagement"));

})

.SelectedIndex(0)

.Render();

}

</div>

This is everything. I'm not sure why I'm getting the validation error except that I've read reports that 1.8 of the jQuery validation plugin doesn't work with 2011.1.315 version of the Telerik grid control.

Can someone please verify?

Thanks,
Ahad L. Amdani

2 Answers, 1 is accepted

answered on 16 May 2011, 03:33 PM

Is there any update on this?

Am I maybe screwing up the script registration (too many, or maybe missing scripts?), or the order of or method of registration?

I can't determine as yet what the root cause of the problem is.
Having looked around on the support forums for a while, I've only found (inconclusively) hints that the issue is with the Grid control itself and the jQuery validation plugin.

Can anyone verify that they have a grid inside a tab strip working with jQuery 1.4.4, jQuery.validate 1.8, and Telerik ASP.NET MVC Grid Control from version 2011.1.315?

Thanks,
Ahad L. Amdani

answered on 16 May 2011, 04:14 PM

I decided to unregister the script manually at the top in the <head> of the _Layout.cshtml and add it to the bottom where I do my programmatic script registration, and that gave me a partial solution. I also replaced the existing jquery.validate.min.js file from the ~/Scripts/2011.1.315/ folder with the most updated file from the 1.8 jQuery validation plugin.

Now, at least, I can edit and insert entries, and the "highlight changes" red corner indicator works. However, there is no actual validation occurring, and I'm wondering if it's because I need to specify or decorate my fields with anything to indicate the type of validation that should occur. Also, the DateTime controls seem to not work either, as firebug gives me the following errors everything I "edit" a DateTime entry (which I want to restrict to a Date entry anyways):

b.timeView is not a constructor - upon entry into the DateTime field for editing
this.dateView is undefined - upon clicking the calendar control
this.timeView is undefined - upon clicking the clock control

If I insert a bogus entry such as "blah" and exit the field, it's simply blank after the fact, whereas my integer entry accepts a string input, and my string entry, of course, doesn't have any validation of any kind. I'd like to limit my string entry to "Residential" or "Commercial" (such as maybe with a drop down list) and I'd like to limit the minimum credit entry to integer-only data-entry, but I wasn't sure if this was supposed to be handled on the client side via decoration of the column properties, or on the server/model side.

Can anyone give me direction as to what might be causing these issues, and how to proceed from this point?

Thanks,
Ahad L. Amdani