Kendo grid how to get the select user ID ?

1 Answer 53 Views
Grid
ting
Top achievements
Rank 1
ting asked on 11 Jan 2022, 11:09 AM

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 ? 

1 Answer, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 14 Jan 2022, 09:00 AM

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:

Let me knwo if you ahve an yuqestions.

Regards,
Nikolay
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid
Asked by
ting
Top achievements
Rank 1
Answers by
Nikolay
Telerik team
Share this question
or