Repeating Partial Views with Kendo Controls

2 posts, 0 answers
  1. Aaron
    Aaron avatar
    14 posts
    Member since:
    Jan 2012

    Posted 25 Jul 2013 Link to this post

    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>
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 29 Jul 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top