Getting Selected Rows from outside the Grid

[Michael]

Hello,

I am upgrading my project to use the latest enhancements to the Grid control, and replacing some custom code that I had to write to accomplish something that the columns.Select() seems to do out of the box.  The issue that I am having is that I need to get the selected rows from outside of the grid.  My view page looks like this:  

<div class="row">
        <div class="col-xs-18 col-md-12">
            @(Html.Kendo().Grid<OASISBlueSyncCore.Common.Models.CourseInformation>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Select().Width(50);
                columns.Bound(p => p.Department).Width(140);
                columns.Bound(p => p.CourseID).Width(120);
                columns.Bound(p => p.BlockNumber).Width(100).Title("Block #");
                columns.Bound(p => p.CourseName);
                columns.Bound(p => p.EventStartDate).EditorTemplateName("Date").Format("{0:MM/dd/yyyy}").Width(200);
                columns.Bound(p => p.EventEndDate).EditorTemplateName("Date").Format("{0:MM/dd/yyyy}").Width(200);
                columns.Bound(p => p.EvalStartDate).EditorTemplateName("Date").Format("{0:MM/dd/yyyy}").Width(200);
                columns.Bound(p => p.EvalEndDate).EditorTemplateName("Date").Format("{0:MM/dd/yyyy}").Width(200);
            })
            .ToolBar(toolbar => { toolbar.Custom().Text("Set Selected Evaluation Dates").HtmlAttributes(new { id = "setEvalDates", style = "float: right" }); })
            .Events(ev => ev.DataBound("db"))
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Sortable()
            .Scrollable()
            .Filterable()
            .HtmlAttributes(new { style = "height:500px;" })
            .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .ServerOperation(false)
                .Model(model => model.Id(p => p.Department + "-" + p.CourseID))
                .Read(read => read.Action("Courses_Read", "CourseConfiguration"))
                .Update(update => update.Action("Courses_Update", "CourseConfiguration"))
                )
            )
        </div>
    </div>
    <div class="row">
        <div class="col-xs-18 col-md-12">
            @Html.Kendo().Button().Name("GenerateBlueFiles").HtmlAttributes(new { id = "generateBlueFiles", @class = "btn btn-default" }).Content("Generate Blue Files")
        </div>
    </div>

And then the javascript that gets called by the GenerateBlueFiles button is:

$("#generateBlueFiles").click(function (e) {
            e.preventDefault();

                var grid = $('#grid').data('kendoGrid');
                var gridContents = grid._data;
                var sel = grid.selectedKeyNames();
                console.log(sel.join(", "));  //This writes out a blank line, even if I have one or more rows selected.
                for (var x = 0; x < gridContents.length; x++) {
                    if (gridContents[x].Selected) {
                        var record = {
                            "Year": gridContents[x].Year,
                            "Selected": gridContents[x].Selected,
                            "Department": gridContents[x].Department,
                            "CourseID": gridContents[x].CourseID,
                            "BlockNumber": gridContents[x].BlockNumber,
                            "CourseName": gridContents[x].CourseName,
                            "EventStartDate": gridContents[x].EventStartDate,
                            "EventEndDate": gridContents[x].EventEndDate,
                            "EvalStartDate": gridContents[x].EvalStartDate,
                            "EvalEndDate": gridContents[x].EvalEndDate
                        }
                        selectedCourseInformation.push(record);
                    }
                }

The example in the docs only shows getting the rows using the onChange method of the grid control.  How do I accomplish something similar from outside of the grid control.  Previously, I grabbed a handle on the grid control and interrogated the contents to see if my custom Selected column was set to true, but that doesn't work, and the selectedKeyNames() doesn't seem to work when I grab the handle to the grid from outside of the grid itself.  If someone could point me in the right direction on getting the selected rows, I would appreciate it.

Thanks,

Mike

[Georgi]

Hello Michael,

Generally speaking you could access the selected row using the select method which returns an array of the selected row.

However, to use the selectedKeyNames method you should set PersistSelection to true and specify the id field of the model. I noticed that in your configuration the id is a concatenation of two fields. This would not work as the dataSource expects the name of the field. For example, you specify that the id is field1+'-' + flied2 which will end up as 'field1-field2'. But then when the dataSource tries to access this field as model[`field1-field2`] an undefined will be returned as the model does not have such field.

I would recommend you to add an additional field which value is a concatenation of the two fields and use it as an id in the grid.
 

Regards,
Georgi
Progress Telerik

[Michael]

Thank you Georgi!

I was able to use the select method and that solved my problems.

Thanks,

Mike