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

Problem with "Multiselection without CTRL" and getting selected rows

2 Answers 271 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jürgen
Top achievements
Rank 1
Jürgen asked on 25 Apr 2014, 07:17 AM
Hello

My code is based on this thread:
http://www.telerik.com/forums/multiple-row-selection-without-holding-ctrl-key

I have a grid:
01.@(Html.Kendo().Grid(Model.globalConfigData.Countries)
02.      .Name("CountryFilter")
03.      .Columns(columns =>
04.               {
05.                   columns.Bound(p => p.value).Width(100).Title("Wert").HtmlAttributes(new { Name = "Value" });
06.                   columns.Bound(p => p.id).Width(30).Title("Id").Hidden().HtmlAttributes(new { Name = "Id" });
07.               })
08.      .Scrollable()
09.              .Selectable(selectable => selectable.Enabled(false))
12.      .DataSource(dataSource => dataSource
13.          .Server()
14.          .Model(model => model.Id(p => p.id)))
15.)

With the custom-multiselect configured:
1.$(document).ready(function ()
2.{
3.    // Enables multiselect on the grid without holding CTRL
4.    $("#CountryFilter").delegate('tbody>tr', 'click', function ()
5.    {
6.        $(this).toggleClass('k-state-selected');
7.    });
8.});

And then a function which is fired by a button:
01.function onClick_FilterButton(e)
02.{
03.    var counter = 0;
04.    var ctySelected = [];
05. 
06.    var entityGrid = $("#CountryFilter").data("kendoGrid");
07.    var rows = entityGrid.select();
08. 
09.    rows.each(function (index, row)
10.    {
11.        ctySelected[counter] = row.cells[1].innerText;
12.        counter++;
13.    });
14. 
15.    $.ajax({
16.        type: "POST",
17.        url: "/Event/FilterButton",
18.        datatype: "json",
19.        traditional: true,
20.        data: { "ids": ctySelected }
21.    });
22.}

Now to my problem:
When I use the normal selection mode of the Kendo-Grid (selectable.Mode(GridSelectionMode.Multiple)), the onClick-function works fine, but when I activate the custom multiselect-mode, the function crashes at line 7 (entityGrid.select() => value is Null or undefined)

How can I get the selected rows when I use this functionality?

A second (not urgent) question:
1.ctySelected[counter] = row.cells[1].innerText;

Is it possible to get the cell by it's name, like:
1.ctySelected[counter] = row.cells["MyValue"].innerText;

Kind regards
Jürgen

2 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Madjarov
Telerik team
answered on 25 Apr 2014, 12:47 PM
Hello Jurgen,


When the selectable option of the Grid is set to false, the select method cannot be used. You could retrieve the selected rows via the k-state-selected class that is set to them.
E.g.
$("#Grid tbody .k-state-selected")

Regarding the second question, you could retrieve the column index by the property name, which is set as data-field attribute to the column header.
E.g.
$("#Grid thead th[data-field='ShipCountry']").index()

Then you could use this index to retrieve the specific cell and it's text on any Grid row.

I hope this information helps.

Regards,
Dimiter Madjarov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Jürgen
Top achievements
Rank 1
answered on 29 Apr 2014, 03:12 PM
Thanks, worked like expected
Tags
Grid
Asked by
Jürgen
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Jürgen
Top achievements
Rank 1
Share this question
or