How to add Kendo DropDownList dynamically into a table of html5 with jQuery

问题

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>

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);
        });
    });

How can i resolve this issue?

回答1:

Move this line:

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

so that it is above this one:

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

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.

来源：https://stackoverflow.com/questions/42474463/how-to-add-kendo-dropdownlist-dynamically-into-a-table-of-html5-with-jquery