Add new Row with html input type

Add new Row with html input type

nightsky_tingnightsky_ting Posts: 17Questions: 4Answers: 0

Hi,
How to add new row with textbox and combo box?
For eg, first column will display an combox box to allow user to select and second column will be text box to allow user fill up.

Thanks

Answers

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    Please supply more detail.
    Do you mean how to add this row dynamically or on initialisation?
    Are you using DataTables' Editor (in which case you should apply the necessary field types)?

  • nightsky_tingnightsky_ting Posts: 17Questions: 4Answers: 0
    edited June 2017

    Hi ,
    what I mean is how to add row dynamically.
    This is how I do, I am not very sure correct or not.

    HTML

                    <table id="tableAddRow" class="table table-bordred table-striped" cellspacing="0">
    
                        <thead>
                            <tr>
                                <th>Offset Type</th>
                                <th>Offset Time</th>
                                <th>Position</th>
                                <th>Group</th>
                                <th></th>
                                @*<th>Edit</th>
    
                                    <th>Delete</th>*@
                            </tr>
                        </thead>
    
                        <tbody>
    
                            @for (int i = 0; i < Model.OffsetTimeDT.Rows.Count; i++)
                            {
                                System.Data.DataRow r = Model.OffsetTimeDT.Rows[i];
                                <tr>
                                    <td>
                                        @Html.DropDownListFor(m => r.ItemArray[0], // 1. Store selected value in Model.State;
                                                                                   // when page is rendered after postback,
                                                                                   // take selected value from Model.State.
    
    // 2. Take list of values from Model.States
    Model.OffsetType.Select(x => new SelectListItem() { Value = x, Text = x, Selected = (x == r.ItemArray[0].ToString()) }).ToList(),
    new { @id="offsetType", @name="offsetType"})
    
                                    </td>
                                    <td><input type="text" id="offsetTime" value="@r.ItemArray[1]"></td>
                                    <td><input type="text" id="position" value="@r.ItemArray[2]"></td>
                                    <td><input type="text" id="group" value="@r.ItemArray[3]"></td>
                                 
                                    <td><button id="removeRow" class="glyphicon glyphicon-minus addBtnRemove" onclick="RemoveRowFun()"></button></td>
                                </tr>
                            }
    
                        </tbody>
    
                    </table>
                    <div>
                        <button id="addRow" onclick="AddRows()">Add new row</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    

    Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    Do you mean the AddRows() function? If so, can you show us that function?

    Allan

  • nightsky_tingnightsky_ting Posts: 17Questions: 4Answers: 0

    Currently , I just insert value in by hardcode.
    function AddRows()
    {

            $("#tableAddRow").DataTable().row.add({
                //"offsetType": $('#offsetType').val(),
                //  "offsetTime": $('#offsetTime').val(),
                //"position": $('#position').val(),
                //"group": $('#group').val(),
                "offsetType": "Promo Generic",
                "offsetTime":"1",
                "position": "1",
                "group": "1",
                "removeBtn": $('#removeRow').val()
            }).draw();
    
        }
    

    But This function also cause error.
    I have attached the following error.

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    You are adding an object, but your DataTable is configured to use arrays. See this section of the manual to understand the difference between the two.

    Allan

  • nightsky_tingnightsky_ting Posts: 17Questions: 4Answers: 0

    Hi,
    Actually I would like to add
    @Html.DropDownListFor(m => r.ItemArray[0],
    Model.OffsetType.Select(x => new SelectListItem() { Value = x, Text = x, Selected = (x == r.ItemArray[0].ToString()) }).ToList(),
    new { @id="offsetType", @name="offsetType"})

    Is it possible?

    Thanks

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    Does that return an object or array into your JSON?

    Allan

  • nightsky_tingnightsky_ting Posts: 17Questions: 4Answers: 0

    it return List of string.

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    Sorry to keep asking questions - I'm trying to get enough information to be able to answer your question. If you have a link to the page that would enable me to debug it directly.

    If that isn't possible, could you show me the resulting information that is sent to the browser from your above code. Also a debug trace would be useful.

    Allan

  • nightsky_tingnightsky_ting Posts: 17Questions: 4Answers: 0

    http://debug.datatables.net/ohifuj (debug trace)

    In Img2.jpg shows the GUI. If the user click on the add new row, it should
    display first column combo box then second row text box and so on

    To get the date in the combo box

    string[] offsetType = SetupWeb.Properties.Settings.Default.OffsetType.Split('|');

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    OH - I see!! Thanks for the picture - that's cleared things up.

    Ok, what you would need to do in that case, since you want to include information that is only available on the server (i.e. your ASP code - I presume its ASP?) you would need to make a call to the server to get that information - probably with $.ajax.

    Have it request a script that will generate the HTML you need for the row and then you can inject it into the table using row.add().

    Allan

  • nightsky_tingnightsky_ting Posts: 17Questions: 4Answers: 0

    hi do u have sample?
    I am using c#.
    Thanks

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    Not of that specifically I'm afraid.

    Allan

  • nightsky_tingnightsky_ting Posts: 17Questions: 4Answers: 0

    ok thanks.

This discussion has been closed.