Kendo grid how to get the select user ID ?

[ting]

Hello i am using ajax and kendogrid to put into the table and format it however i realize i have no idea how to when user selected a row it display the id maybe in console.log etc ? how can i do it 


This is my ajax call and append into the table and kendogrid format it 

This is being call from my ajax query to be append into this table 

This is how my code look like

<script>

                        /* Call the ajax to load to load to #customer-list tbody */

                        $.ajax({

                            url: "https://ecoexchange.dscloud.me:8090/api/get",

                            method: "GET",

                            // In this case, we are going to use headers as

                            headers: {

                                // The query you're planning to call

                                // i.e. <query> can be UserGet(0), RecyclableGet(0), etc.

                                query: "UserGet(0)",

                                // Gets the apikey from the sessionStorage

                                apikey: sessionStorage.getItem("apikey")

                            },

                            success: function (data, xhr, textStatus) {

                                //console.log(data)

                                const buildTable = data => {

                                        const table = document.querySelector("#user-list tbody");

                                        for (let i = 0; i < data.length; i++) {

                                            let row =

                                            `

                                                <tr>

                                               

                                                <td class="cell-user-name"style="padding-left: 20px;"><img src = "${data[i].Picture}" class="picture" width="100px" height="100px" onError="this.onerror=null;this.src='../../assets/images/placeholder-avatar.jpg';" ></img></td>

                                                <td class="cell-user-name" style="padding-right: 80px; padding-top: 10px; font-weight: bold; font-size: 18px;">${data[i].Name}</td>

                                                </tr>

                                            `;

                                            table.insertAdjacentHTML('beforeEnd', row);

                                        }

                                    };

                                    // Fetch method

                                    const getData = async (url) => {

                                    const response = await fetch(url, {

                                        method: 'GET',

                                        headers: {

                                            query: "UserGet(1)",

                                            // Gets the apikey from the sessionStorage

                                            apikey: sessionStorage.getItem("apikey")

                                        }

                                    });

                                    const json = await response.json();

                                    $("#loading-container").hide();

                                    return buildTable(json);

                                    };

                                /*Error GET http://127.0.0.1:5501/testEnv/view/public/manageCustomers/null 404 (Not Found) */

                                /* But code are able to fetch the data */

                                getData ("https://ecoexchange.dscloud.me:8090/api/get")

                                },

                                error: function (xhr, textStatus, err) {

                                console.log(err);

                                }

                                });

                                $(window).on("resize", function(e) {

                                console.log("width:", $("#user-list").width(), "height:",$("#user-list").height())

                                });

                                        $("#user-list").kendoGrid({

                                            height: $(window).height()-$("#user-list").position()["top"]-130,

                                            selectable: "single",

                                            // width: $(window).width()-$("#customer-list").position()["width"]-10,

                                            //pageSize: 10,

                                            scrollable: {

                                                endless: true,

                                            },

                                            columns: [

                                                {

                                                    field: "",

                                                    title: "Profile",

                                                    headerAttributes: { "class": "k-text-center" },

                                                    width: 150

                                                },

                                                {

                                                    field: "",

                                                    title: "User Name",

                                                },

                                            ],

                                });

                                $("#user-list tbody").on("click", "tr", function(e) {

                                    const btns = $('.select-row');

                                    var rowElement = this;

                                    var row = $(rowElement);

                                    var grid = $("#user-list").getKendoGrid();

                                    if (row.hasClass("k-state-selected")) {

                                    var selected = grid.select();

                                    selected = $.grep(selected,function(x){

                                    var itemToRemove = grid.dataItem(row);

                                    var currentItem = grid.dataItem(x);

                                    return itemToRemove != currentItem

                                    })

                                    btns.prop('disabled', true).removeClass('disabled dark');

                                    grid.clearSelection();

                                    grid.select(selected);

                                    e.stopPropagation();

                                }else{

                                    grid.select(row)

                                    e.stopPropagation();

                                    btns.prop('disabled', false).removeClass('disabled dark');

                                }

                                });

I would need some help as to how to display the userID as this is my response for my response database ? 

[Nikolay]

Hi Ting Jun,

You can access the selected rows in the change event handler and get the respective dataItem. For example:

function onChange(e) {
        var rows = e.sender.select();
        rows.each(function(e) {
          var grid = $("#grid").data("kendoGrid");
          var dataItem = grid.dataItem(this);

          console.log(dataItem.id);
        })
      };

Here is a Dojo demo I prepared demonstrating this:

• https://dojo.telerik.com/oHayIVIn

Let me knwo if you ahve an yuqestions.

Regards,
Nikolay
Progress Telerik