DataTable editable cell data get truncated

DataTable editable cell data get truncated

i4shagii4shagi Posts: 2Questions: 1Answers: 0

I am making column cell as editable in the DataTable. I am able to edit the cell. But the rendered data get truncated after the space . For example if the data is "Mr P Tepp" it will display in the editable input as just "Mr" remaining text get truncated.

I can see that the values are generating correctly and printing in the td & I can see the data in the source code. While debugging too its passing data without truncating.

I have created a function to make the cell as editable and calling the function into DataTable.

function prepareEditableOrder(data, type, row, meta) {
 return '<input class="form-control text-wrap cell-datatable" id="' + row.Id + '" type="text"  value = ' + data + ' >';
}


$('#conditionTable' + j).DataTable({
                    "bLengthChange": false,
                    "paging": false,
                    columns: [
                        { title: "Condition Name", },
                        { title: "Condition id", },
                        { title: "Condition Value", render: prepareEditableOrder }
                    ]

                });

Portion of "View" code is as below

 <div class="tab-pane active" id="@($"Scenario{j}tab1")" role="tabpanel">
                                <table id="@($"conditionTable{j}")"
                                       class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>Condition Name</th>
                                            <th>Condition id</th>
                                            <th>Conditon Value</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach (ConditionModel ConditionMdl in Model.conditionList[i])
                                        {
                                            <tr>
                                                <td>@Html.DisplayFor(modelItem => ConditionMdl.ConName)</td>
                                                <td>@Html.DisplayFor(modelItem => ConditionMdl.Conditionid)</td>
                                                <td class="editable" edit_type="click">@Html.DisplayFor(modelItem => ConditionMdl.ConValue)</td>
                                            </tr>
                                        }

                                    </tbody>
                                </table>
                            </div>

I googled and tried different options but no luck. Could anyone help me to get the data without truncate and display in the DataTable.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736
    Answer ✓

    Maybe you need to wrap the value in quotes, for example:

    return '<input class="form-control text-wrap cell-datatable" id="' + row.Id + '" type="text"  value = "' + data + '" >';
    

    Note the additional " here value = "' + data + '".

    If this doesn't help then please post a link to your page or a test case replicating the issue so we can help debug.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • i4shagii4shagi Posts: 2Questions: 1Answers: 0

    Thank you so much Kevin. The issue was with missing "" . after I update value = "' + data + '" it works perfectly. Once again tons of thanks!!!!

Sign In or Register to comment.