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

Repeating Partial Views with Kendo Controls

3 Answers 155 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Aaron
Top achievements
Rank 1
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>
        <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>

3 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
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!
0
Jeremy
Top achievements
Rank 1
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. (-:

0
Viktor Tachev
Telerik team
answered on 10 Oct 2017, 02:43 PM
Hello Jeremy,

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


Regards,
Viktor Tachev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
Aaron
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Jeremy
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or