How to add row with multiple columns and it should have two normal column and one dropdown column on ajax success

Monisha S 21

Html code:
@默 Sampleapplication.Models.samplemodel

                    <th>  <p>Id</p></th>  
                    <th>  <p>Name</p></th>  
                    <th>  <p>Department</p></th>  
                   
                </tr>  
            </thead>  
            <tbody></tbody>  
        </table>

</body>

success: function (data) {

                     $.each(data, function (i, item) {  

                         var rows = "<tr>"  


                             + "<td class='prtoducttd1'>" + item.Id + "</td>"  
                             + "<td class='prtoducttd2'>" + item.Name + "</td>"  
                             
                             + "<td class='prtoducttd11'>@Html.ListBoxFor(m => m.sDepartmentList, Model.lstToDepartment, new { Name = "Departmentlst", id = "Departmentlst", @placeholder = "Select Deaprtment" })</td>"  
                             + "</tr>";  
                         $('#tabledetails tbody').append(rows);

});

Lan Huang-MSFT 25,386 Reputation points Microsoft Vendor

2021-09-27T11:39:49.25+00:00

Hi @Monisha S ,
I tried your code, and the interface can be successfully displayed.
What problem did you encounter? Is there any specific error message?
Best regards,
Lan Huang
Monisha S 21 Reputation points

2021-09-27T15:13:21.81+00:00

Hi @Lan Huang-MSFT
Thanks for you reply
1.It shows incorrect syntax error while adding @azzedinehtmlsql .Dropdown at td on ajax success, so not able to add all three columns together on ajax success

2.Secondly i tried adding as <select></select>for department for this i need to loop through the list of value
But the problem is i am not able to get id and name and(list of values for department) on same ajax success
Bruce Barker 801 Reputation points

2021-09-27T15:26:49.657+00:00

@azzedinehtmlsql .DropDown is a razor server tag, it can not be used by javascript. you must use the select. the ajax response data from the server should include the select option values.
Monisha S 21 Reputation points

2021-09-27T17:00:50.993+00:00

@Bruce Barker

success: function (data) {
$.each(data, function (i, item) {

var tr= document.createElement("tr");
$(tr).append("<td>"+"<select>"+$('<option/>', { value: item.Id, text: item.Name })+

"</select>"+"</td>");

$('#tabledetails tbody').append(tr);

};

I Tried this, with this i am able to add column with <select> but other two column values also i need to get from ajax response data

Is it possible to add all three columns on same ajax success
Lan Huang-MSFT 25,386 Reputation points Microsoft Vendor

2021-09-28T07:46:50.16+00:00
Hi @Monisha S ,
You can implement the drop-down column through <select> in ajax success.
Maybe you can pass values to the other two columns in the same way

$(tr).append("<td>" + item.Id + "</td>"); $(tr).append("<td>" + item.Name + "</td>"；

Best regards,
Lan Huang

Accepted answer

Bruce (SqlWork.com) 54,866 Reputation points

2021-09-28T15:31:51.47+00:00
you need to add the drop down list list values to the data (an array of values). assume the value list is items.Values [{Id,Name}] then its:

$("<tr/>").append( $("<td/>").append( $("<select/>").append( item.Values.map(v => $("<options/>").val(v.Id).text(v.Name)} ) ) )
Please sign in to rate this answer.

1 person found this answer helpful.
Monisha S 21 Reputation points

2021-10-03T07:51:21.87+00:00

Worked perfectly thanks,

var tr= document.createElement("tr");
$(tr).append("<td>" + item.Id + "</td>");
$(tr).append("<td>" + item.Name + "</td>"；
$(tr).append(
$("<td/>").append(
$("<select/>").append(
item.Values.map(v => $("<options/>").val(v.Id).text(v.Name) ) ));

$('#tabledetails tbody').append(tr);
Sign in to comment

How to add row with multiple columns and it should have two normal column and one dropdown column on ajax success

0 additional answers