This is a migrated thread and some comments may be shown as answers.

Get Selected rows from all pages

2 Answers 435 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sriram
Top achievements
Rank 1
Sriram asked on 23 Jun 2018, 02:36 PM

Hi,

I declared the below Kendo grid with checkbox column. Below is the javascript script

@model IEnumerable<NotificationTypesModel>

<script type="text/javascript">


    function CloseNotificationPopup() {
        $('#ManageNotifications').data('kendoWindow').close();        
    }
   
    function OnNotificationsBound(e) {
        e.preventDefault();
        var grid = this;
        var rows = grid.items();

        $(rows).each(function (e) {
            var row = this;
            var dataItem = grid.dataItem(row);
            if (dataItem.IsRowSelected == true) {
                grid.select(row);
                //dataItem.IsRowSelected = false;
            }
        });
    }
    
    function SaveNotificationPreferences() {
        var items = [];
        
        var notificationTypesGrid = $('#NotificationTypes').data("kendoGrid");

        for (var i = 0; i < notificationTypesGrid.selectedKeyNames().length ; i++) {
            var currentDataItem = notificationTypesGrid.selectedKeyNames()[i];
            items.push(currentDataItem);            
        }
    }
</script>

The below is the kendo grid

@(Html.Kendo().Grid(Model)
    .Name("NotificationTypes")
    .Columns(columns =>
    {
        columns.Select().Width(39).HeaderHtmlAttributes(new { style = "text-align:center" }).HtmlAttributes(new { style = "text-align:center", tabindex = "1" });
        columns.Bound(p => p.NotificationTypeID).Visible(false);
        columns.Bound(p => p.IsRowSelected).Visible(false);
        columns.Bound(p => p.NotificationTypeName);
    })
    .Pageable(page =>
    {
        page.PageSizes(true);
        page.PreviousNext(true);
        page.Input(true);
        page.PageSizes(new int[] { 5, 10, 20, 50, 100 });
    })
    .Sortable()
    .PersistSelection()
    .Events(e => e.DataBound("OnNotificationsBound"))    
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(false)
        .PageSize(5)
        .Model(model => model.Id(p => p.NotificationTypeID))
        .ServerOperation(false)
    )
)

 

Below is the class I am using to bind

public class NotificationTypesModel
    {
        public Guid NotificationTypeID { get; set; }
        public string NotificationTypeCode { get; set; }
        public string NotificationTypeName { get; set; }
        public bool IsRowSelected { get; set; }
    }

 

When the page loads I am selecting the rows based on the data retrieved from the database. This is done inside the OnNotificationsBound event.

And on the page there is a button which will save the selections back to the database. The issue I am having is in the SaveNotificationPreferences() method I am not getting the records of selections from all the pages.  I am unable to figure out the issue.

I am using the below version of Kendo.

2017.3.1018.545

2 Answers, 1 is accepted

Sort by
0
Accepted
Eyup
Telerik team
answered on 26 Jun 2018, 08:46 AM
Hello Sriram,

You can use a template to achieve this requirement:
http://https//docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Selection/select-deselect-all-checkbox#select-or-deselect-all-rows-with-select-all-header-checkbox

I am also sending a sample application where you can find implementation to access all of the selected item ids.

I hope this will prove helpful.

Regards,
Eyup
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Sriram
Top achievements
Rank 1
answered on 16 Aug 2018, 07:09 PM
Thanks Eyup. I used a different approach and it works fine now.
Tags
Grid
Asked by
Sriram
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Sriram
Top achievements
Rank 1
Share this question
or