如何使用jQuery将Kendo DropDownList动态添加到html5表中 [英] How to add Kendo DropDownList dynamically into a table of html5 with jQuery

问题描述

单击class ="classAdd"按钮后，我需要在HTML5表中动态添加一行，而该行的一列是kendo的下拉列表，我遇到了问题，它显示得不是很好好吧.

I need to add a row dynamically into a HTML5 table after clicking the button with the class="classAdd", and i have an issue with one column of the row that is a dropdownlist of kendo, it doesn't display very well.

HTML5:

<table id="tablePost" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Producto</th>
            <th>Precio</th>
            <th>Cantidad</th>
        </tr>
    </thead>
    <tbody>
        <tr class="productos-presupuesto">
            <td>
                @(Html.Kendo().DropDownList()
                .Name("productoPresupuesto")
                .OptionLabel("Seleccione un producto...")
                .DataTextField("DescripcionProducto")
                .DataValueField("CodigoProducto")
                .HtmlAttributes(new { style = "width:100%" })
                .Filter("contains")
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("ObtenerProductoAsync","Mantenimiento");
                    });
                })
                )
            </td>
            <td>
                <input class="form-control" type="number" name="precio" />
            </td>
            <td>
                <input class="form-control" type="number" name="cantidad" />
            </td>
            <td>
                <button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add more</button>
            </td>
        </tr>
    </tbody>
</table>

这是第一行，工作正常，但是当我尝试添加新行时，kendo的下拉列表显示不正确，这是在单击按钮添加更多之后发生的.

This was the first row and it works ok but when i tried to add a new row the dropdown list of kendo doesn't display ok, this happens after i click the button add more.

jQuery:

    $(document).ready(function () {
        $(document).on("click", ".classAdd", function () { //
            var rowCount = $('.productos-presupuesto').length + 1;
            var contactdiv = '<tr class="productos-presupuesto">' +
                '<td><input id="productoPresupuesto' + rowCount + '" /></td>' +
                '<td><input type="text" name="precio' + rowCount + '" class="form-control" /></td>' +
                '<td><input type="text" name="cantidad' + rowCount + '" class="form-control" /></td>' +
                '<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add more</button>' +
                '<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
                '</tr>';

                $("#productoPresupuesto"+ rowCount).kendoDropDownList({
                    dataTextField: 'DescripcionProducto',
                    dataValueField: 'CodigoProducto',
                    dataSource: {
                        transport: {
                            read: {
                                type: "jsonp",
                                url: "Mantenimiento/ObtenerProductoAsync"
                            }
                        }
                    }

                });

            $('#tablePost').append(contactdiv);
        });
    });

我该如何解决此问题?

推荐答案

移动此行:

$('#tablePost').append(contactdiv);

以使它高于此值:

$("#productoPresupuesto"+ rowCount).kendoDropDownList({

您必须在变量'contactdiv'中内置的html附加到DOM上，然后才能在上一行中使用jquery选择器来查找元素并将其转换为下拉列表.

The html you have built in the variable 'contactdiv' needs to be appended to the DOM before you can use the jquery selector in the line above to find the element and convert it to a dropdown.

这篇关于如何使用jQuery将Kendo DropDownList动态添加到html5表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！