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

Repeating Partial Views with Kendo Controls

3 Answers 541 Views

General Discussions

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

Aaron asked on 25 Jul 2013, 08:16 AM

Hi,

I have a razor patial view that contains a few controls (i.e. inputs, drop downs, date pickers...). These controls are created using kendo helper functions for MVC.
In my main view I have an "Add Item" ajax action link that woud append a new instance of partialview in a div container every time it's clicked.
Using this approach kendo controls don't get correctly rendered. Dropdowns show as text, datepickers are missing styles .

If there is a different/better approach that I should be using for Adding dynamic partials to the view please let me know.

The code that adds partialview to main view is:

@(Ajax.ActionLink("Add another shipment", "BlankEditor", new AjaxOptions

{

UpdateTargetId = "items",

InsertionMode = InsertionMode.InsertAfter,

}))

And the Partial View is looking like this:

@model SupplyViewModel

<div class="k-block k-info-colored" style="margin-bottom: 1em;">

<div class="k-block">

<div style="display: inline-block;">

<div class="editor-label">

@Html.LabelFor(model => model.ReportDate)

</div>

<div class="editor-field">

@(Html.Kendo().DatePickerFor(model => model.ReportDate)

.Name("ReportDate" + new Random().Next())

.Value(DateTime.Now.Date)

.Max(DateTime.Now.Date))

@Html.ValidationMessageFor(model => model.ReportDate)

</div>

<div style="display: inline-block;">

<div class="editor-label">

@Html.LabelFor(model => model.OrganizationId, "Supplier")

</div>

<div class="editor-field">

@(Html.Kendo().DropDownListFor(model => model.OrganizationId).Name("ddlOrganization").HtmlAttributes(new { @Class = "HABddList" }).SelectedIndex(0).BindTo(ViewBag.OrganizationId))

@Html.ValidationMessageFor(model => model.OrganizationId)

</div>

<div class="k-block vesselinfo" style="position: relative;">

<div style="display: inline-block;">

<div class="editor-label">

@Html.LabelFor(model => model.VesselName)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.VesselName)

@Html.ValidationMessageFor(model => model.VesselName)

</div>

<div style="display: inline-block;">

<div class="editor-label">

@Html.LabelFor(model => model.VesselId)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.VesselId)

@Html.ValidationMessageFor(model => model.VesselId)

</div>

<div style="display: inline-block;">

<div class="editor-label">

@Html.LabelFor(model => model.PortOfEntryId, "PortOfEntry")

</div>

<div class="editor-field">

@(Html.Kendo().DropDownListFor(model => model.PortOfEntryId).OptionLabel("Select Port of Entry...").BindTo(ViewBag.PortOfEntryId))

@Html.ValidationMessageFor(model => model.PortOfEntryId)

</div>

@* <div style="float: right;">

<a href="#" class="k-button show_hide" style="text-align: right;">Hide</a>

</div>*@

</div>

@* <div class="k-block k-info-colored" id="vesselShowButton" style="text-align: right;">

<a href="#" class="k-button show_hide">Show Vessel Info</a>

</div>*@

<div class="k-block">

<div class="dates">

<div class="editor-label">

@Html.LabelFor(model => model.EstimatedDepartureDate)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.EstimatedDepartureDate)

@Html.ValidationMessageFor(model => model.EstimatedDepartureDate)

</div>

<div class="dates">

<div class="editor-label">

@Html.LabelFor(model => model.EstimatedArrivalDate)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.EstimatedArrivalDate)

@Html.ValidationMessageFor(model => model.EstimatedArrivalDate)

</div>

<div class="dates">

<div class="editor-label">

@Html.LabelFor(model => model.DepartureDate)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.DepartureDate)

@Html.ValidationMessageFor(model => model.DepartureDate)

</div>

<div class="dates">

<div class="editor-label">

@Html.LabelFor(model => model.ArrivalDate)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.ArrivalDate)

@Html.ValidationMessageFor(model => model.ArrivalDate)

</div>

<div class="k-block">

<table class="quantities">

<tr>

<th></th>

<th>Unit</th>

<th>Sizes:</th>

@foreach (SelectListItem item in ViewBag.ProductSizeId)

{

<th>@item.Text</th>

}

</tr>

<tr>

<td style="font-size: smaller;">Quantity in</td>

<td>lugs</td>

<td></td>

@foreach (SelectListItem item in ViewBag.ProductSizeId)

{

<td>@(Html.Kendo().NumericTextBox<double>()

.Name(item.Text)

.Format("##,#")

.Spinners(false)

)</td>

}

</tr>

</table>

</div>

<script>

$(function () {

//var ddLists = $(".HABddList").each(

// function () {

// // $(this).data("kendoDropDownList").list.width("auto");

// alert('hi');

// setWidth($("this"));

// });

setWidth($("#ddlOrganization"));

//$(".vesselinfo").hide();

//$(".show_hide").show();

//$('.show_hide').click(function () {

// $(".vesselinfo").slideToggle();

// $("#vesselShowButton").slideToggle();

//});

});

function setWidth(el) {

var d = el;

var p = d.data("kendoDropDownList").popup.element;

var w = p.css("visibility", "hidden").show().outerWidth() + 30;

p.hide().css("visibility", "visible");

d.closest(".k-widget").width(w);

}

</script>

<style scoped>

.k-numerictextbox {

max-width: 50px;

margin: 0px;

padding: 0;

}

.show_hide {

display: none;

}

.dates {

display: inline-block;

margin-left: 1em;

}

.dates:nth-of-type(1) {

margin-left: 0;

}

.quantities {

border-collapse: collapse;

border-spacing: 0;

border: solid 1px;

}

.quantities th {

min-width: 40px;

max-width: 50px;

text-align: center;

font-size: 1em;

border: solid 1px;

margin: 0.5em 0.5em;

}

.quantities th:nth-of-type(1) {

width: 35px;

}

.quantities td {

text-align: center;

padding: 0;

border: solid 1px;

}

</style>

3 Answers, 1 is accepted

answered on 29 Jul 2013, 05:28 AM

Hello Aaron,

The only thing that you should be careful about in your case is to guarantee that each widget has unique name.

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/troubleshooting#only-one-instance-of-the-widget-works-in-the-page

Adding suffix or prefix to the name of the widget should make it work.

e.g.

$(Html.Kendo().DatePicker().Name("test"+someIndex))

Also you need to keep in mind that changing the name will also affect the name of the input and thus the value of the widget will be submitted to the server via different name.

Kind Regards,
Petur Subev
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 06 Oct 2017, 08:37 PM

Hey, I know this is an old post, but I have a workaround that doesn't change the input name (thus throwing off ASP.NET MVC's model binder upon POST).

Instead of setting .Name() on the input, set the "id" explicitly with .HtmlAttributes(), like so:

@Html.Kendo().DatePickerFor(m => YourPartialMode.ThresholdDate).HtmlAttributes(new { id = String.Format("YourPartialModel_{0}_ThresholdDate", YourPartialModel.Id) })

That way, the input's "id" will be "YourPartialModel_1_ThresholdDate", for example, while its "name" attribute will still be "ThresholdDate" and will behave as expected upon POST.

Hope this helps somebody. (-: