How to get a column value from a webgrid by using jQuery in MVC

Question

I have a webgrid shown below and I would like to get column value of 'id' column in jQuery. I did like $(this).find("#id").text(); $(this).val() and $(this).parent().find('id').text(); but no luck .How to get those value? Can any body guide me

<div id="gridContent">
    @grid.GetHtml(tableStyle: "webGrid",
                headerStyle: "header",
                alternatingRowStyle: "alt",
                selectedRowStyle: "select",
                columns: grid.Columns(
                grid.Column("id", "id"),
                grid.Column("countryname", format: (item) => item.GetSelectLink(item.countryname))
</div>

And the jQuery code is shown below:

 <script>
        jQuery(document).ready(function () {
            jQuery("#gridContent").hover(function (index) {
                var selectedEmpCode = $(this).val();
                getDepartmentTable(selectedEmpCode);
            });


        });
    </script>

rendered html is

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="/Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="/Scripts/jquery-1.7.1.js"></script>
    <script src="/Scripts/jquery-ui-1.8.20.js"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#tabs").tabs();
        });
    </script>
</head>
<body>
    <div id="tabs">

        <ul>
            <li><a href="#tabs-1">Tab Header 1</a></li>
            <li><a href="#tabs-2">Tab Header 2</a></li>

        </ul>

        <div id="tabs-1">
            <style type="text/css">
    .webGrid {
        margin: 4px;
        border-collapse: collapse;
        width: 500px;
        background-color: #B4CFC3;
    }

    .header {
        background-color: #C1D4E6;
        font-weight: bold;
        color: #FFF;
    }

    .webGrid th, .webGrid td {
        border: 1px solid #C0C0C0;
        padding: 5px;
    }

    .alt {
        background-color: #E4E9F5;
        color: #000;
    }

    .gridHead a:hover {
        text-decoration: underline;
    }

    .description {
        width: auto;
    }

    .select {
        background-color: #71857C;
    }
</style>



<div id="gridContent">
            <script type="text/javascript">
        (function($) {
            $.fn.swhgLoad = function(url, containerId, callback) {
                url = url + (url.indexOf('?') == -1 ? '?' : '&') + '__swhg=' + new Date().getTime();

                $('<div/>').load(url + ' ' + containerId, function(data, status, xhr) {
                    $(containerId).replaceWith($(this).html());
                    if (typeof(callback) === 'function') {
                        callback.apply(this, arguments);
                    }
                });
                return this;
            }

            $(function() {
                $('table[data-swhgajax="true"],span[data-swhgajax="true"]').each(function() {
                    var self = $(this);
                    var containerId = '#' + self.data('swhgcontainer');
                    var callback = getFunction(self.data('swhgcallback'));

                    $(containerId).parent().delegate(containerId + ' a[data-swhglnk="true"]', 'click', function() {
                        $(containerId).swhgLoad($(this).attr('href'), containerId, callback);
                        return false;
                    });
                })
            });

            function getFunction(code, argNames) {
                argNames = argNames || [];
                var fn = window, parts = (code || "").split(".");
                while (fn && parts.length) {
                    fn = fn[parts.shift()];
                }
                if (typeof (fn) === "function") {
                    return fn;
                }
                argNames.push(code);
                return Function.constructor.apply(null, argNames);
            }
        })(jQuery);
        </script>
    <table class="webGrid" data-swhgajax="true" data-swhgcontainer="gridContent" data-swhgcallback="">
    <thead>
        <tr class="header">
            <th scope="col">
<a data-swhglnk="true" href="/?g1sort=id&amp;g1sortdir=ASC">id</a>            </th>
            <th scope="col">
<a data-swhglnk="true" href="/?g1sort=countryname&amp;g1sortdir=ASC">countryname</a>            </th>
            <th scope="col">
<a data-swhglnk="true" href="/?g1sort=continent&amp;g1sortdir=ASC">Description</a>            </th>
            <th scope="col">
<a data-swhglnk="true" href="/?g1sort=language&amp;g1sortdir=ASC">language</a>            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td><a data-swhglnk="true" href="/?g1selectedRow=1">India</a></td>
            <td class="continent">Asia</td>
            <td>Hindi</td>
        </tr>
        <tr class="alt">
            <td>2</td>
            <td><a data-swhglnk="true" href="/?g1selectedRow=2">China</a></td>
            <td class="continent">Asia</td>
            <td>Mandarin</td>
        </tr>
        <tr>
            <td>3</td>
            <td><a data-swhglnk="true" href="/?g1selectedRow=3">England</a></td>
            <td class="continent">Europe</td>
            <td>English</td>
        </tr>
        <tr class="alt">
            <td>4</td>
            <td><a data-swhglnk="true" href="/?g1selectedRow=4">USA</a></td>
            <td class="continent">America</td>
            <td>English</td>
        </tr>
    </tbody>
    </table>





</div>
 <script>
        function getDepartmentTable(selectedEmpCode) {
            $.ajax({
                // Get Department PartialView
                url: "/Newgridtab/_citygrid",
                type: 'GET',
                data: { id: selectedEmpCode },
                success: function (data) {
                    jQuery("#tabs-2").html(data);
                },
                error: function (error) {
                    alert("Error: Please try again.");
                }
            });
        }
    </script>
    <script>
        jQuery(document).ready(function () {
            jQuery("#gridContent").hover(function (index) {
                //var selectedEmpCode = $(this).find("#id").text();
                getDepartmentTable(4);
            });


        });
    </script>



        </div>

        <div id="tabs-2">

        </div>



    </div>



</body>
</html>

Answer 1

Two things , your selection should be #gridContent a instead of #gridContent and the Jquery method you use should be text() instead of val() . see the code below :

 <script>
        jQuery(document).ready(function () {
            jQuery("#gridContent a").hover(function (index) {
                var selectedEmpCode = $(this).text();
                getDepartmentTable(selectedEmpCode);
            });


        });
    </script>

if you want to make a finer selection for the id's only add the following selector :

$('#gridContent tr td:first-child') instead of `$('#gridContent a')` .

Sidenote & Optimization:: in your code hover seems to produce duplicate results so try the following code : use mouseenter instead of hover .

jQuery(document).ready(function () {
                jQuery(document).on('mouseenter' , '#gridContent tr td:first-child' ,function (index) {
                    console.log($(this).text());
                    var selectedEmpCode = $(this).text();
                    getDepartmentTable(selectedEmpCode);
                });
        });

How to get a column value from a webgrid by using jQuery in MVC

Question

1 answers

solution1
0 ACCPTED 2015-05-03 19:22:45

How to get a column value from a webgrid by using jQuery in MVC

Question

1 answers

solution1 0 ACCPTED 2015-05-03 19:22:45

solution1
0 ACCPTED 2015-05-03 19:22:45