Repeating Partial Views with Kendo Controls

[Aaron]

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>
        <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>
    </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>
        <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>
        <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>
        @*        <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>
        <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>
        <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>
        <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>
    </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>
</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>

[Petur Subev]

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

[Jeremy]

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. (-:

[Viktor Tachev]

Hello Jeremy,

Thank you for sharing your solution with the community. It can help someone with similar scenario.


Regards,
Viktor Tachev
Progress Telerik