@{

    Layout = null;

}

<div class="main">

    <div id="example"></div>

    <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-hidden="true" style="z-index:5000">

        <div class="modal-dialog" role="document">

            <div class="modal-content">

                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                        <span aria-hidden="true">×</span>

                    </button>

                </div>

                <div class="modal-body">

                    <div id="partial"></div>

                </div>

            </div>

        </div>

    </div>

</div>

    <script src="https://cdn.jsdelivr.net/npm/handsontable-pro@6.2.2/dist/handsontable.full.min.js"></script>

    <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable-pro@6.2.2/dist/handsontable.full.min.css">

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

    <script type="text/javascript">

        function onClick() {

            var route = '@Url.Action("Load", "Home")?id=1';

            $('#partial').load(route, function( response, status, xhr )

                {

                  if ( status == "error" ) {

                  alert(xhr.status + " " + xhr.statusText);

               }

           });

        }

​

        function myRenderer(instance, td, row, col, prop, value, cellProperties) {

            Handsontable.renderers.TextRenderer.apply(this, arguments);

            td.innerHTML = '<div class="testo" data-target="#exampleModalLong" data-toggle="modal" onclick="onClick()" ><a href="#">Some link</a></div>'

        }

​

        var myColumns = [{ type: 'text', renderer: myRenderer },

        { type: 'text' }, { type: 'text' }

        ];

        var columnHdrs = [ "a", "b", "c"];

​

        var container = document.getElementById('example');

        var settings = {

            data: Handsontable.helper.createSpreadsheetData(3, 3),

            rowHeaders: true,

            colHeaders: columnHdrs,

            columns: myColumns,

            /* WITH THIS OPTION ENABLED, POP UP DIALOG WILL NOT OPEN */

            dropdownMenu: true,

        };

​

        hot = new Handsontable(container, settings);

    </script>