Duplicating textbox

3 posts, 0 answers
  1. andy
    andy avatar
    2 posts
    Member since:
    Nov 2010

    Posted 23 Apr 2012 Link to this post

    Everytime I fire this command a new instance of the Kendo numerictextbox widget span appears. It is tied to the same element though. Is there an inbuilt event or method that checks for existing numerictextbox widget span and doesn't add another?

                    value: 1,
                    min: 0,
                    max: 51,
                    step: 1,
                    format: "#",
                    decimals: 0

  2. usman
    usman avatar
    1 posts
    Member since:
    May 2013

    Posted 03 Jan 2014 Link to this post

    I am facing the same issue. I have a grid and in a cell of a row i have simple text box. When data gets bound i use the following code to convert to text box like this:

    Below is the simple text box template used with templated column:
    <input class="NumericInteger" type="text" style="width:130px;" onchange=''grid_LeaveAccrual_textbox_onchange("LeaveAccrual","EmployeePayrollLeaveDistributionDataView", this)'' value="#=LeaveAccrual == null ? "0" : LeaveAccrual #" />

     var grid = $("#Grid").data("kendoGrid");
     var gridData = grid.dataSource.data();
    //row databound event
    grid.tbody.find('.NumericInteger').each(function () {            

    where .NumericInteger is the css class i have attached with simple text box.

    There are two issues:
    1- Change event gets fired twice.
    2- If i tried to iteration grid data and update the textbox value using below code, it adds the textbox span multiple times. In some ajax call, i am trying to update cells with numeric textbox data:

     var grid = $("#Grid").data("kendoGrid");
                        var gridData = grid.dataSource.data();

                        for (var i = 0; i < result.LeaveDistribution.length; i++) {
                            var item = result.LeaveDistribution[i];

                            for (var j = 0; j < gridData.length; j++) {
                                if (item.Text == gridData[j].PayrollPeriodId) {
                                    gridData[j].LeaveAccrual = item.Value;

                                    var uid = gridData[j].uid;
                                    //updating numeric text box
                                    var row = $("#EmployeePayrollLeaveDistributionDataView").data("kendoGrid").tbody.find("tr[data-uid='" + uid + "']");
                                    var $ntb = row.find('.NumericInteger').kendoNumericTextBox().data("kendoNumericTextBox");
    Please see attachment whats happening
  3. Alexander Valchev
    Alexander Valchev avatar
    2873 posts

    Posted 07 Jan 2014 Link to this post

    Hi Usman,

    The issue #2 occurs because you are re-initializing the widget at the following line:
    var $ntb = row.find('.NumericInteger').kendoNumericTextBox().data("kendoNumericTextBox");

    Removing the code marked in red should solve the problem.
    I believe that this might be the reason for issue #1 as well.

    Alexander Valchev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top