How do I make search input in kendo grid?

Question

I am a new Software Developer. In my new company, I use their framework to code. And its using Kendo. I tried to make a search field for Kendo Grid so I can find a specific information in that grid. I tried this method but it doesn't work. Honestly, I don't understand how to use 'transport' things. I call an API to get datas for my grid and I call it in my grid's line of code.

{
  type: 'panel',
  fields: [{
    type: 'panel',
    text: 'Payment List',
    name: 'payment',
    fields: [{
      type: 'grid',
      name: 'paymentGrid',
      data: [],
      toolbar: function () {
        return `<div class="toolbar" style="width:370px">
                          <label class="search-label" for="search-reservation" style="color:white"> Cari berdasarkan No. Pesanan: </label>
                          <input type="search" id="search-reservation" class="search-class">
                      </div>`
      },
      sourceOptions: {
        pageSize: 10
      },
      options: {
        selectable: true,
        autoheight: true,
        allowCopy: true,
        altrows: true,
        pageable: {
          refresh: true,
          buttonCount: 5,
          pageSizes: [10, 20, 50, 100]
        },
        dataBinding: function () {
          record = (this.dataSource.page() - 1) * this.dataSource.pageSize();
        }
      },
      url: function (option) {
        var arg = option.data
        $.ajax({
          method: 'POST',
          url: APILink,
          data: JSON.stringify(arg),
          dataType: 'json',
          contentType: 'application/json',
        }).done(function (resp) {
          if (resp.data != null) {
            var nameMap = [];
            $.each(resp.data, function (key, val) {
              nameMap.push({
                id: val.id,
                supplier: val.supplier,
                reservation_id: val.reservation_id,
                currentPayment: val.state
              });
            });
            option.success({
              data: nameArray,
              total: resp.total
            });
          }
        }).fail(function (jqXHR, status, err) {
          option.error(err);
        });
      },
      fields: [{
        name: 'number',
        text: 'No. ',
        template: "#= ++record #",
        width: 70,
      }, {
        name: 'supplier',
        text: 'Supplier',
      }, {
        name: 'reservation_id',
        text: 'No. Reservation',
      }, {
        name: 'currentPayment',
        text: 'status',
      }, {
        name: 'checked',
        text: 'choose',
        width: 100,
        template: function (item) {
          return !!item.checked
            ? `<input id="${item.id}" name='ceklis-boks[]' class="check" checked value="${item.id}" type=\'checkbox\' />`
            : `<input id="${item.id}" name='ceklis-boks[]' class="check" value="${item.id}" type=\'checkbox\' />`
        }
      }],
      onDataBound: 'dataBound',
    }]
  }

Then I used the same code as I mention before in previous link, and replace the ID (#) in that code with mine. But, it won't work. I come to his fiddle and I thought it was because his PlainDs variable and $("#category").kendoAutoComplete({...}) or serverPaging, serverSorting, or serverFiltering. So, I comment all of it here and still working properly. So basically, I can just write the code from line 49 - 81 like in his post. But why it doesn't work? For your information, I call the grid with its name or sometimes I give it a class. But it won't work. Is it a problem if I use class or name instead of ID?

Answer 1

The term "Not working" is too broad here, if you can be more specific on what is not working, we may be able to pinpoint better. However I assume you know how to get the grid to display and so on. so basically to get the search to work I usually have this in the click event of my "Search" button:

var grid = $("#myGrid").data("kendoGrid");
var ds = grid.dataSource;
var searchVal = $("#search-reservation").val();

if ( searchVal ) {
    ds.filter({ 
        field: "reservation_id", operator: "eq", value: searchVal 
    });
} 
else {
    ds.filter({});
}