Get Kendo Grid Clicked (Selected) Row values using jQuery

Last Reply 28 days ago By dharmendr

Posted 29 days ago

I have an onchange event for kendogrid where i am able to get the clicked row values into the variable and now i am try to do it for onclick event instead of onchange and i had made the below changes

added onclick='onChange(this) and calling the function onChange(this) using this function i am getting 

var selectedItem = grid.dataItem(grid.select()); 

selecteditem to null

   function BindDetails(dataColl) {
       EnabledFilter = false;
       FilterPageNumber = 0;
       CallLogsetScrollPosition = true;
        $('#div1').html('');
        $('#div1').kendoGrid({
            reorderable: true,
            scrollable: true,
            resizable: true,
            height: 200,
            pageable: true,
            selectable: "single",
            click: onChange, 
            sortable: {
                mode: "single",
                allowUnsort: false,
                change: function (e) {
 
                }
            },
            pageable: {
                refresh: true,
                pageSizes: [25, 50],
                change: function (e) {
                    if (CLPCurrentPage != $("#div1").data("kendoGrid").dataSource.page()) {
                        CLPCurrentPage = $("#div1").data("kendoGrid").dataSource.page();
                    }
                }
            },
            dataBound: onGridDataBound,
            dataSource: {
                data: dataColl, pageSize: CLPCurrentPageSize
                , page: CLPCurrentPage,
                sort: {
                    field: CLPCurrentSortField,
                    dir: CLPCurrentSortDirection,
                    change: function (e) {
 
                    }
                },
                serverSorting: true,
                serverPaging: true,
                schema: {
                    total: function (dataColl) {
                        return dataColl[0].Count;
                    }
                }
            },
            columns: [{
               title: "Name", field: "Name", template: "<a class='anchorNavLinkStyle' href='javascript:void(0)' data-ID='#= ID #' onclick='onChange(this)'>#=Name#</a>", width: 150
            },  {
                field: "Value",
                title: "Value",
                attributes: {
                     
                }
            }
            ]
        });
    }
    function onChange(arg) {
    var grid = $("#divCallLogHistory").data("kendoGrid");
    if (grid.select()) {
        var selectedItem = grid.dataItem(grid.select());
        if (selectedItem != null) {
            $('.k-animation-container').hide();
            $('.k-tooltip').hide();
            $('.modal-dialog').css({ top: 0, left: 0 });
            $('#divpopupwidth').addClass('popupmaxwidth');
            $('#divpopupcontent').html('');
            $('#popuptitle').html(' ');
            $('#divpopupcontent').load(appURL + "/Data/Details", {}, function () {
                GetProviderValidityDetails(selectedItem.ProviderID);
                SetProviderDetails(selectedItem.ProviderID);
                $('#spandummypopup').attr('data-target', '#divopenpopup');
                $('#spandummypopup').trigger('click'); 
            }); 
        } 
    }
}

 

You are viewing reply posted by: dharmendr 28 days ago.
Posted 28 days ago Modified on 27 days ago

Hi kavithav,

grid.select() returns details if you select any row in the grid.

Since you are using the link click event you need to first fetch all the record from kendoGrid dataSource and by checking the condition get the details from the selected row.

Check this example. Now please take its reference and correct your code.

HTML

<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="https://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var customers = [{ Id: 1, Name: "John Hammond", Country: "United States" },
                        { Id: 2, Name: "Mudassar Khan", Country: "India" },
                        { Id: 3, Name: "Suzanne Mathews", Country: "France" },
                        { Id: 4, Name: "Robert Schidner", Country: "Russia"}];
            $("#dvGrid").kendoGrid({
                reorderable: true,
                scrollable: true,
                resizable: true,
                height: 200,
                pageable: false,
                selectable: "single",
                sortable: {
                    mode: "single",
                    allowUnsort: false,
                    change: function (e) { }
                },
                pageable: {
                    refresh: true,
                    pageSizes: [2, 25, 50]
                },
                dataSource: { data: customers, pageSize: 2 },
                columns: [
                        { field: "Id", template: "<a href='javascript:void(0)' data-ID='#=Id#' onclick='onChange(this)'>#=Id#</a>" },
                        { field: "Name" },
                        { field: "Country"}],
                change: function (e) {
                    var grid = $("#dvGrid").data("kendoGrid");
                    if (grid.select().length > 0) {
                        var selectedItem = grid.dataItem(grid.select());
                        if (selectedItem != null) {
                            $('#lblId').html(selectedItem.Id);
                            $('#lblName').html(selectedItem.Name);
                            $('#lblCountry').html(selectedItem.Country);
                        }
                    }
                }
            });
        });
        function onChange(arg) {
            // Clear selection.
            var grid = $("#dvGrid").data("kendoGrid");
            grid.clearSelection();
            // Get all the records from kendoGrid dataSource.
            var gridData = $("#dvGrid").data().kendoGrid.dataSource.data();
            for (var i = 0; i < gridData.length; i++) {
                // Checking with id to get clicked row details.
                if (gridData[i].Id == arg.text) {
                    $('#lblId').html(gridData[i].Id);
                    $('#lblName').html(gridData[i].Name);
                    $('#lblCountry').html(gridData[i].Country);
                }
            }
        }
    </script>
</head>
<body>
    <div id="dvGrid"></div><br />
    <table>
        <tr>
            <td>Id : </td>
            <td><span id="lblId"></span></td>
        </tr>
        <tr>
            <td>Name : </td>
            <td><span id="lblName"></span></td>
        </tr>
        <tr>
            <td>Country : </td>
            <td><span id="lblCountry"></span></td>
        </tr>
    </table>
</body>
</html>

Demo