Flow
Flow

Reputation: 271

How Kendo grid select row get the selected userID?

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 enter image description here

enter image description here

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 enter image description here

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

enter image description here

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 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(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 class="col-12">

    <br />
    <div class="input-group">
      <!-- Length of the search bar -->
      <div class="col-md-10">
        <!-- Search bar components -->
        <span id="search-icon" class="fa fa-search search-icon-span"></span>

        <input class="search-input form-control" 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" class="btn btn-primary btn custom mr-1 mb-2" style="border-radius: 5px;">Add </button>

        <button onclick="window.location.href=''" id="edit" type="button" class=" btn-primary btn custom mr-1 mb-2 disabled select-row" style="border-radius: 5px; margin-left: 5px;" disabled>View Details</button>
      </fieldset>

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

Upvotes: 0

Views: 1556

Answers (1)

Shai
Shai

Reputation: 3872

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>

Upvotes: 2

Related Questions