/University_3/Views/Professor/Index2.cshtml

<div class="row">
    <button id="btnGet">استادان</button>
    <button id="btnBulkAdd">اضافه کردن</button>
</div>
<div class="row">
    <div class="col-xs-12">
        <table id="grid-data" class="table table-condensed table-hover table-striped">
            <thead>
                <tr>
                    <th data-column-id="id" data-order="desc" data-type="numeric" data-identifier="true">ردیف</th>
                    <th data-column-id="FirstName" data-order="desc">نام</th>
                    <th data-column-id="LastName" data-order="desc">نام خانوادگی</th>
                    <th data-column-id="Choices" data-formatter="Choices" data-sortable="false">انتخاب</th>
                </tr>
                
            </thead>

        </table>
    </div>
</div>
@section MyScripts
{
    <script>
        $(function () {
            var ajaxload = function () {
               
                var grid = $("#grid-data").bootgrid({
                    ajax: true,
                    ajaxSettings: {
                        method: "POST",
                        cache: true
                    },
                    selection: true,
                    multiSelect: true,
                    rowSelect: true,
                    keepSelection: true,
                    url: "/Professor/AllProfessors",
                    multiSort: true,
                    formatters:
                        {
                            "Choices": function (column, row) {
                                var s = "<div class='d' id=" + row.id +"><select name='r' class='we'>"
                                //for (var i= 0; i < row.Choices.length; i++) {
                                //    s += ("<option>" + row.Choices[i] + "</option>");
                                //}
                                s += ("</select><button class='details'>Details</button>"+
                                    "</div>");
                                $(".we").visibility = 'hidden';
                                return s;
                            }
                        }
                }).on("selected.rs.jquery.bootgrid", function (e, rows) {
                   
                  
                }).on("deselected.rs.jquery.bootgrid", function (e, rows) {
                    //var rowIds = [];
                    //for (var i = 0; i < rows.length; i++) {
                    //    rowIds.push(rows[i].id);
                    //}
                    //alert("Deselect: " + rowIds.join(","));
                }).on("loaded.rs.jquery.bootgrid", function (e,rows) {
                    /* Executes after data is loaded and rendered */
                    $(".image").hide();
                    var we = $(".we");
                    
                    var details = $(".details");
                   
                    we.click(function (e) {
                        var $this = $(this);
                        //$this.parent().children('.image').show();
                        $.ajax({
                            url: "/Professor/Choices/"+ $(this).parent().attr("id"), success: function (result) {
                                setChoices(result, $this);
                            },
                            type:"POST"
                        });
                       
                       
                    });

                    details.click(function () {
                        details.parent().children(".image").slideUp();
                        $(this).parent().children('.image').slideDown();
                        details.show();
                        $(this).hide();
                });

                    //$('a').live('click', function () {
                    //    var $this = $(this),
                    //       $parentTR = $this.closest('tr');

                    //    $parentTR.clone().insertAfter($parentTR);
                    //});
                   // var res = "";
                    details.bind('click', function () {
                        $("[id*=details]").remove();
                        var $this = $(this);
                        $.ajax({
                            url: "/Professor/Details/" + $(this).parent().attr("id"), success: function (result) {
                                setDetails(result, $this);
                                //console.log($(this));
                            },
                            type: "POST"
                        });
                       // $('<tr id=details' + $(this).parent().attr("id") + '><td colspan="5">gfhfghgfh</td></tr>').insertAfter($(this).closest('tr'));

                    });
                   
                });
            }
            var setDetails = function (result,_this) {
                console.log(_this.parent().attr("id"));
                $('<tr id=details' + _this.parent().attr("id") + '><td colspan="5">'+result+'</td></tr>').insertAfter(_this.closest('tr'));
            };

            var setChoices = function (result, _this) {
                var s = "";
                for (var i = 0; i < result.length; i++) {
                    s += ("<option>" + result[i] + "</option>");
                }
                $(".we").children().remove();
                _this.append(s);
            };
            $("#btnGet").click(function () {
                ajaxload();
            });
            $("#btnBulkAdd").click(function () {

                $.ajax({
                    url: "/Professor/AddBulkProfessor", success: function (result) {
                        if (result == "OK") {
                            ajaxload();
                        };
                    }
                });
            });
            ajaxload();
        });
    </script>
}