How Kendo grid select row get the selected userID?-CodePudding

Hi i need some help for to get the select row id as i realize i am able to get my ajax from my response however is there a way where i select the row i can display the id selected one ?

Updated by using the new onchange i have make a selected id however i got error still

var dataSource = new kendo.data.DataSource({
  read: {
    url: "https://ecoexchange.dscloud.me:8090/api/get",
    dataType: "JSON",
    method: "GET",
    headers: {
      query: "UserGet(1)",
      // Gets the apikey from the sessionStorage
      apikey: sessionStorage.getItem("apikey")
    }
  },
});

$("#user-list").kendoGrid({
  dataSource: dataSource,
  height: $(window).height() - $("#user-list").position()["top"] - 130,
  selectable: "single, row",
  change: function(e) {
    var selectedRows = this.select();
    var selectedDataItems = [];
    for (var i = 0; i < selectedRows.length; i  ) {
      var dataItem = this.dataItem(selectedRows[i]);
      selectedDataItems.push(dataItem);
    }
    // selectedDataItems contains all selected data items
    /* The result can be observed in the DevTools(F12) console of the browser. */
    if (selectedDataItems && selectedDataItems.length > 0) {
      $("#selection")[0].innerHTML = selectedDataItems[0].UserID;
    }
  },

  // 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 am calling my ajax to kendo grid where kendo grid created the grid and the selected row

This is how the page look like

However i have no idea how to select the row display the userID display where then if this is selected when press view details the information be pass into there

This is the response example

[
    {
        "UserID": 1,
        "Name": "Kelyn Wong",
        "Username": "kelynwong",
        "Email": "[email protected]",
        "Picture": null,
        "UserRole": "Approving Admin"
    },
    {
        "UserID": 2,
        "Name": "Kai Jie",
        "Username": "kaijie",
        "Email": "[email protected]",
        "Picture": null,
        "UserRole": "Admin"
    },

This is how the row selected look like when the user select the row

This the whole code from body to script from using ajax to kendo grid

< 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 style="padding-left: 20px;"><img src = "${data[i].Picture}"  width="100px" height="100px" one rror="this.onerror=null;this.src='../../assets/images/placeholder-avatar.jpg';" ></img></td>
    <td  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(0)",
            // 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');
  }
});


// <!-- Search bar  function -->

$("#search-user-name").on("keyup change", function() {
    var usernames = $("#search-user-name").val().toLowerCase();

    //console.log(usernames);
    if (usernames == "") {
      $('#user-list tbody tr td.cell-user-name').parent().show();
    } else {
      $("#user-list tbody tr").filter(function() {
        var usernameText = $(this).children("td.cell-user-name").text().toLowerCase();

        $(this).toggle(
          (usernameText.indexOf(usernames) >= 0)
        );
      })

    };

  })

  <
  /script>

<!-- the white rectange body contain-->
<div id="container-body">
  <div >

    <br />
    <div >
      <!-- Length of the search bar -->
      <div >
        <!-- Search bar components -->
        <span id="search-icon" ></span>

        <input  placeholder="Name" type="text" name="User Name" id="search-user-name">
      </div>

      <!-- button all of it-->
      <fieldset class='btn-group'>

        <button onclick="window.location.href='addUsers.html'" id="add" type="button"  style="border-radius: 5px;">Add </button>

        <button onclick="window.location.href=''" id="edit" type="button"  style="border-radius: 5px; margin-left: 5px;" disabled>View Details</button>
      </fieldset>

      <div >
        <div  style="overflow:hidden; padding-top: 20px;">
          <table id="user-list" >
            <!-- Loading Spinner Div -->
            <div id="loading-container">
              <p>Fetching all users data...</p>
              <div id="loading-spinner">
              </div>
              <tbody>
              </tbody>
          </table>
          </div>
        </div>

CodePudding user response：

You can use the change event of the Kendo Grid to get the selected row. See the snippet below for a demo from the Kendo documentation.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script>
</head>
<body>
  <label>
    Selection: <span id="selection"></span>
  </label>
<div id="grid"></div>
<script>
  var dataSource = new kendo.data.DataSource({
    transport: {
      read: {
        url: "https://demos.telerik.com/kendo-ui/service/products",
        dataType: "jsonp"
      }
    },
    pageSize: 10
  });
  
  $("#grid").kendoGrid({
    dataSource: dataSource,
    selectable: "single, row",
    change: function(e) {
      console.log("change", this.dataItem(this.select()[0]));
      
      const selection = this.select();
      if (selection && selection.length > 0) {
        $("#selection")[0].innerHTML = this.dataItem(selection[0]).ProductID;
      }
    }
  });
</script>
</body>
</html>