Kendo UI grid Checkbox click get data item

Question

I am using Kendo + angularJS, i have grid with check box when i click checkbox i need to get the current row data item. problem is when i click the checkbox, i can't able to select the row automatically. Previoulsy i was used Kendo UI v2014.1.416. In that version when i click check box, current row is getting selected, but after upgrading to Kendo UI v2015.2.624 it not working

<div class="filterProductGridHeight" kendo-grid="filterProductGrid"
                             k-grid-content='{"overflow":scroll}'
                             id="filterProductGrid"
                             k-sortable="true"
                             k-data-source="filterProductDataSource"
                             k-pageable='{  "pageSizes":true }'
                             @*k-filterable="true"*@
                             k-selectable="true"
                             k-columns='filterProductGridColumns'
                             k-on-change="selectedFilterProduct=dataItem"
                             k-on-data-bound="productSearchGridDataBound(kendoEvent)">
                        </div>

In controller

$scope.filterProductGridColumns = [
        { field: "ShortDescription", title: "Short Description" },
        { field: "LongDescription", title: "Long Description" },
        { field: "Barcode", title: "Barcode" },
         {
             template: function (dateItem) {
                 return "<span class='fa fa-circle redColorCode' title='Red'>&nbsp;&nbsp;</span><span class='fa fa-circle greenColorCode' title='Green'></span>&nbsp;&nbsp;<span class='fa fa-circle blueColorCode' title='Blue'></span>"
                 //$scope.isChecked ? "<input type='checkbox' ng-click='chkClick($event, selectedFilterProduct)' id='checkbox' class='checkbox'  ng-checked= '" + dateItem.IsProductValid + "&& isChecked'  ng-disabled='" + !dateItem.IsProductValid + "'/>" :
                 //    "<input type='checkbox' ng-click='chkClick($event, selectedFilterProduct)' id='checkbox' class='checkbox'  ng-disabled='" + !dateItem.IsProductValid + "'/>";
             }, title: "Item Order Status"

         },
        {
            template: function (dateItem) {
                return $scope.isChecked ? "<input type='checkbox' ng-click='chkClick($event, selectedFilterProduct)' id='checkbox' class='checkbox'  ng-checked= '" + dateItem.IsProductValid + "&& isChecked'  ng-disabled='" + !dateItem.IsProductValid + "'/>" :
                    "<input type='checkbox' ng-click='chkClick($event, selectedFilterProduct)' id='checkbox' class='checkbox'  ng-disabled='" + !dateItem.IsProductValid + "'/>";
            },
            title: "<input id='checkAllProduct' ng-model='chkAllFilterProductGrid' type='checkbox' class='check-box' ng-change='chkAllProductClick()'/> Select All"
        }];



 $scope.chkClick = function ($event, selectedFilterProduct) {
        var checkbox = $event.target;
        var action = (checkbox.checked ? 'add' : 'remove');
        var selectedIndex = GetArrayIndexByPropertyvalue($scope.filterProductDataSource.data, "Id", selectedFilterProduct.Id);
        if (selectedIndex != -1) {
            var selectedData = $scope.filterProductDataSource.data[selectedIndex];
            updateFilterProductList(action, selectedData);
        }
    };

prashant patil prashant patil · Accepted Answer · 2015-07-28T12:11:22

you can use jquery for first selecting the particular row first and then getting the value from the selected row

Html

<input type="checkbox" id="something" ngclick-'chkClick($event, selectedFilterProduct,this)'

And in Javascript:-

$scope.chkClick = function ($event, selectedFilterProduct,checkbox) {
if ($(checkbox).closest("tr").hasClass("k-state-selected")) {
            $(checkbox).closest(tableRow).removeClass("k-state-selected")
        }
        else {
            $(checkbox).closest(tableRow).addClass("k-state-selected")
        }

////code to get the dataItem as the row is already selected now

}

Kendo UI grid Checkbox click get data item

1 Answers