Telerik Forums / Kendo UI for jQuery Forum / Grid /

Grid selectable problem

Kendo UI
Resources Buy Try

14 posts, 0 answers

Faruk

2 posts

Member since:
Dec 2011

Posted 11 Oct 2012 Link to this post

I have a grid that I bind explicitly with method .data("kendoGrid").dataSource.read();

But the selectable property is not working for the grid. I cannot select the databound columns. I guess this is somewhat due to the fact that I bind the grid explicitly.

Do I have to do something else work selectable to work?

searchGrid = $("#SearchGrid").kendoGrid({

            scrollable: false,

            selectable: "multiple row",

            autoBind: false,

            dataBound: gridDataBound,

            select: rowSelected,

            columns: [

                {

                    field: "Book.Code",

                    title: "Kitap",

                    width: 60

                },

                {

                    field: "No",

                    title: "Poz No",

                    width: 100

                },

                {

                    field: "Description",

                    title: "Tanım"

                },

                {

                    field: "Unit",

                    title: "Birim",

                    width: 60

                },

                {

                    field: "UnitPrice.Value",

                    title: "Birim Fiyat",

                    template: '#= kendo.format("<b>{0:yyyy}</b> : {1:c}", new Date(UnitPrice.Date), UnitPrice.Value) #',

                    width: 120

                }

            ],

            dataSource: new kendo.data.DataSource({

                serverFiltering: true,

                serverPaging: true,

                transport: {

                    read: {

                        url: "/Api/Item",

                        cache: true

                    },

                    parameterMap: function () {

                        var searchText = searchSuggest.data("kendoAutoComplete").value();

                        var bookID = books.data("kendoDropDownList").dataItem().ID;

                        var searchField = searchFields.data("kendoDropDownList").dataItem().Value;

                        var priceYear = priceYears.data("kendoDropDownList").dataItem();

                        return {

                            searchText: searchText,

                            bookID: bookID == "" ? "null" : bookID,

                            searchField: searchField,

                            priceYear: priceYear == "Tüm Yıllarda" ? "null" : priceYear

                        };

                    }

                }

            })

        });
Vladimir Iliev
Admin

2206 posts
Posted 16 Oct 2012 Link to this post

Hi Fatuk,

I tried to reproduce the problem locally but to no avail – everything is working as expected on our side. Could you please provide more information about your current setup or run-able project where the issue can be reproduced?

For convenience I prepared a small sample, based on the information that you provided so far and attached it to this thread. Could you please try to reproduce the issue in this example?

Kind Regards,
Vladimir Iliev
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

remote-data-demo.zip
Ace

9 posts

Member since:
Feb 2012

Posted 24 Oct 2012 Link to this post

i have this problem too.. i dont know why my grid is not selectable. Here's my sample

$("#itemlist").kendoGrid({
columns:[
{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
}],
dataSource: {
data: [
{
FirstName: "Joe",
LastName: "Smith"
},
{
FirstName: "Jane",
LastName: "Smith"
}]
},
selectable: true
});
Ace

9 posts

Member since:
Feb 2012

Posted 24 Oct 2012 Link to this post

I found the solution to my case:

Jquery 1.8.1 and 1.8.2 ---> makes the grid selection won't work
Jquery 1.8.0 and below --> make the grid selection work.
Ziv

1 posts

Member since:
Oct 2012

Posted 29 Oct 2012 Link to this post

I have the same problem with KendoUi grid and jquery 1.8.2.
The selectable property does not work. Nothing happens when I click on a row.
When changing to jquery 1.7.2, it works fine.
Mike

33 posts

Member since:
Jul 2012

Posted 26 Oct 2015 Link to this post

I'm having the same issue and even the attached sample (http://www.telerik.com/forums/grid-selectable-problem?actionMode=replyThread#izdxzPOBIkOcRUPAocpOGA) is not working for me. Please advise.
Mike

33 posts

Member since:
Jul 2012

Posted 26 Oct 2015 Link to this post

So I ran the attachment in IE (11) and lo and behold it works. It also works Firefox (41.0.1). This functionality appears to be broken in the latest version of Chrome (46.0.2490.80). Please advise on a work around for Chrome.
Mike

33 posts

Member since:
Jul 2012

Posted 26 Oct 2015 Link to this post

So it appears there might be two problems, one of which I have solved. Some old css was making things unselectable in my project. The other problem however is that it still doesn't work in the example from above.
Konstantin Dikov
Admin

2466 posts
Posted 28 Oct 2015 Link to this post

Hi Mike,

I have tested the attached example in the latest Chrome version (46.0.2490.80 m) and the selection is working correctly on my side. You can test the following dojo example on your end and see if any problems will be observed:

http://dojo.telerik.com/UtIwo

I am looking forward to your reply with the results.

Regards,
Konstantin Dikov
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Mike

33 posts

Member since:
Jul 2012

Posted 28 Oct 2015 in reply to Konstantin Dikov Link to this post

Konstantin,

I have tested your link on my machine as well as on tw of my colleagues machines and the grid rows are NOT selectable on any of these three machines in Chrome. In my current project that uses the grid it is working however so maybe it is an issue with your example?

When I open the debugging tools after loading your example I do not see any error.

Mike
Konstantin Dikov
Admin

2466 posts

Posted 29 Oct 2015 Link to this post

Hi Mike,

I have once again tested the dojo example from my previous post and rows are selected correctly. Could you please record a short video demonstrating the behavior on your side with the dojo example?

Kind Regards,
Konstantin Dikov
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Rekha

4 posts

Member since:
Mar 2016
Posted 26 Mar 2016 Link to this post

Hi ,

I have a problem with grid selection--

I have a main grid company in which I have contacts,projects,history as a link items to open their respective grids. I got stuck with a scenario .

If I click on Contacts link from the main grid it opens a Contact grid(which is child grid).if you see in the picture I clicked on first contacts link of company ADP Boston . I want to highlight the main grid first coloum(respective columns) after I opened the child grid.

Second Problem is: If i click on projects link in main grid It should open only projects grid but here since i clicked on contacts first it is opening projects grid below the contacts grid. After I click on projects link from main grid I should close already open grids and open new grid.

GridSelectIssue.png

GridClose issue.png
Rekha

4 posts

Member since:
Mar 2016
Posted 26 Mar 2016 in reply to Konstantin Dikov Link to this post

Hi ,
I have a problem with grid selection--
I have a main grid company in which I have contacts,projects,history as a link items to open their respective grids. I got stuck with a scenario .
If I click on Contacts link from the main grid it opens a Contact grid(which is child grid).if you see in the picture I clicked on first contacts link of company ADP Boston . I want to highlight the main grid first coloum(respective columns) after I opened the child grid.
Second Problem is: If i click on projects link in main grid It should open only projects grid but here since i clicked on contacts first it is opening projects grid below the contacts grid. After I click on projects link from main grid I should close already open grids and open new grid. Can you please help me on this .

GridSelectIssue.png

GridClose issue.png
Konstantin Dikov
Admin

2466 posts

Posted 28 Mar 2016 Link to this post

Hi Rekha,

Before moving to your queries, when you post in the forum, please try to either open new threads or use existing threads that relate to your questions, because currently I see no correlation between the original issue and your requirements.

Now, regarding your questions. For highlighting the clicked column you should handle the click event and manually traverse the cells in the corresponding column and add custom CSS class to them. As for removing the existing grid you could use the "destroy" method and if necessary, clear the wrapping element's content, before initializing the new grid.

If other questions arise, please open a regular support ticket or separate forum thread.

Regards,
Konstantin Dikov
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Grid selectable problem

Faruk

Vladimir Iliev

Ace

Ace

Ziv

Mike

Mike

Mike

Konstantin Dikov

Mike

Konstantin Dikov

Rekha

Rekha

Konstantin Dikov