title: kendoui Grid with autocomplete on its toolbar?
body: <p><strong>Update:</strong>
  I tried and spent alot of my time fixing the issue, and at last problem solved.
  But initially Many Thanks to OnaBai and to my colleague who helped to come this far.</p>
  
  <p>Now i am stuck here.</p>
  
  <p>I type username and it show display on dropdown and after pressing TAB or ENTER it show the result in grid.
  The result is only shown in grid if it is from page "1", but if it is from page "2" or any other further page the result is not shown.</p>
  
  <p>Here is how it is working:
  <img src="https://i.stack.imgur.com/VxqE4.jpg" alt="enter image description here"></p>
  
  <p>but when if i search for other user which is not on page 1 then it dont show display the other user in grid. instead i get empty grid.
  <img src="https://i.stack.imgur.com/T3gHM.jpg" alt="enter image description here"></p>
  
  <p><strong>FireBug screenShots:</strong>
  <img src="https://i.stack.imgur.com/Qtu9L.jpg" alt="enter image description here">
  <img src="https://i.stack.imgur.com/i4OBu.jpg" alt="enter image description here"></p>
  
  <p>Here is my Updated Code after i did some more changes in the code.:</p>
  
  <pre><code>  &lt;?php
  /*foreach($users_list_data-&gt;result() as $row){
      echo $row-&gt;Username."&lt;br /&gt;";
  }*/
  ?&gt;
  
  &lt;div id="grid"&gt;&lt;/div&gt;
      &lt;div id="details" /&gt;
      &lt;div class="second_column_content_container"&gt;
      &lt;/div&gt;
  
  
  
  &lt;script&gt;
  
  function create_user() {
  
      var entryform = $("#insert_user_info");
      $.ajax({
          type : 'POST',
          url : '&lt;?php echo base_url(); ?&gt;/index.php/user_management/manage_users/createUser',
          data : entryform.serialize(),
          success : function(response) {
              $(".second_column").html(response);
          }
      });
  }
  
  function create_user_form() {
  
  
      $.ajax({
          type : 'POST',
          url : '&lt;?php echo base_url(); ?&gt;/index.php/user_management/manage_users/load_user_form',
  
          success : function(response) {
              $(".second_column").html(response);
          }
      });
  }
  
  function onChange(arg) {
  
  
  
          var selected = "";
          var grid = this;
  
          grid.select().each(function() {
              var dataItem = grid.dataItem($(this));
              selected = dataItem.Username;
          });
  
    $.ajax({
          type: "POST",
          url: "&lt;?php echo base_url()?&gt;index.php/user_management/manage_users/get_user_groups/"+selected,
  
          beforeSend: function(){
  
  
              $("#pre_image").attr("src","http://localhost/zorkif_new/images/pre.gif");
  
          },
  
          success: function(output_string) {
  
  
              $('.data_column_a').html(output_string);
  
          }
      });
   }
  
  
      var wnd, detailsTemplate;
      $(document).ready(function(){
          var serverBaseUrl = "&lt;?php echo base_url(); ?&gt;";
          $("#grid").kendoGrid({
              dataSource:{
                  serverPaging: true,
                  transport: {
                      read: serverBaseUrl + "index.php/user_management/manage_users/list_view/",
                      update: {
                          url: serverBaseUrl + "index.php/user_management/manage_users/userUpdate/",
                          type: "POST"
                      }
  //                    destroy: {
  //                        url: serverBaseUrl + "index.php/user_management/manage_users/userDelete/",
  //                        dataType: "jsonp"
  //                    }
                      //update: "&lt;?php echo base_url() ?&gt;index.php/user_management/manage_users/list_view/"
                  },
                  error: function(e) {
                      alert(e.responseText);
                  },
                  schema:{
                      data: "data",
                      total: "total",
                      model: {
                          id: "UserID",
                          fields: {
                              FirstName: { editable: true },
                              LastName: { validation: { required: true} },
                              MiddleNames:{validation:{required:true}}
                          }
                      }
                  },
                  pageSize:5
  
              },
              toolbar: kendo.template($("#toolbarTemplate").html()),
              scrollable: true,
  
              selectable: "row",
              sortable: true,
              filterable: true,
              pageable: {
                  input: true,
                  numeric: false
              },
              columns: [
                  {
                      field: "UserID",
                      hidden:true
                  },
                  {
                      field: "Username",
                      title:"Username"
                  },
                  { field: "FirstName",
                      title:"First Name"
                  },
                  {field:"MiddleNames"},
                  {field:"LastName"},
                  {field:"City"},
                  {field:"Email"},
                  //{field:"Actions"},
                  //{command: { text: "Delete", click: showDetails }, title: " ", width: "140px"},
                  {command: { text: "Details", click: redirectToPage }, title: " ", width: "140px" },
                  { command: { text: "Edit", click: redirectToEditPage }, title: "&amp;nbsp;", width: "140px" }
              ],
              change: onChange,
              editable: "popup"
          });
          $("#users").kendoAutoComplete({
              minLength: 3,
              dataTextField: "Username",
              dataSource: {
                  serverFiltering: true,
                  transport: {
                      read: {
                          type: "GET",
                          dataType: "json",
                          contentType:'application/json; charset=utf-8',
                          url: serverBaseUrl + "index.php/user_management/manage_users/search_user/",
                          data: function (arg){
                              //alert(arg);
                              //alert({Username:autocompleteUsers.data("kendoAutoComplete").value});
                                 return {Username : $("#users").data("kendoAutoComplete").value()};
                              //return $("#users").data("kendoAutoComplete").value();
                              }
                      }
                  }
              },
              change: onChangeAutoComplete
          });
  
          function onChangeAutoComplete(){
              var value = this.value();
              var grid = $('#grid');
              if (value) {
                  grid.data("kendoGrid").dataSource.filter({ field: "Username", operator: "Contains", value: value });
              } else {
                  grid.data("kendoGrid").dataSource.filter({});
              }
          }
          /*$("#users").kendoAutoComplete({
              minLength: 3,
              dataTextField: "Title",
              //JSON property name to use
              dataSource: {
                  pageSize: 10,
                  //Limits result set
                  transport: {
                      read: {
                          url: "/echo/json/",
                          //using jsfiddle echo service to simulate JSON endpoint
                          dataType: "json",
                          type: "POST",
                          data: {
                              // /echo/json/ echoes the JSON which you pass as an argument
                              json: JSON.stringify([
                                  {
                                      "Title": "Doctor Who: The Trial of a Time Lord"},
                                  {
                                      "Title": "Doctor Who: The Key to Time"},
                                  {
                                      "Title": "Doctor Who: The Time Meddler"},
                                  {
                                      "Title": "Doctor Who: The End of Time"}
                              ])
                          }
                      }
                  }
              }
          });*/
  
          /*change: function () {
                  var value = this.value();
                  if (value) {
                      grid.data("kendoGrid").dataSource.filter({ field: "UserID", operator: "eq", value: value });
                  } else {
                      grid.data("kendoGrid").dataSource.filter({});
                  }
              }
          });*/
          /*$("#users").blur(function() {
              var data = $(this).data("kendoAutoComplete").dataSource._data,
                      nbData = data.length,
                      found = false;
  
              for(var iData = 0; iData &lt; nbData; iData++) {
                  if(this.value === data[iData].Title)
                      found = true;
              }
              console.log(found);
          });*/
  
          wnd = $("#details").kendoWindow({
                      title: "Customer Details",
                      modal: true,
                      visible: false,
                      resizable: false,
                      width: 300
                  }).data("kendoWindow");
          detailsTemplate = kendo.template($("#template").html());
  
      });
  
      function redirectToPage(e){
          e.preventDefault();
          var row = $(e.target).closest("tr");
          var item = $("#grid").data("kendoGrid").dataItem(row);
          $.ajax({
              type: "POST",
              url: "&lt;?php echo base_url().'index.php/user_management/manage_users/ViewProfile/'?&gt;"+JSON.parse(item.UserID),
              success: function(output_string){
                  $('.second_column_content_container').html(output_string);
                  //$('.second_column_content_container').innerHTML("hello");
                  //alert(output_string);
              },
              error: function(data){
                  alert("error");
              }
          });
      }
      function redirectToEditPage(e){
          e.preventDefault();
          var row = $(e.target).closest("tr");
          var item = $("#grid").data("kendoGrid").dataItem(row);
          $.ajax({
              type: "POST",
              url: "&lt;?php echo base_url().'index.php/user_management/manage_users/edit_user/'?&gt;"+JSON.parse(item.UserID),
              success: function(output_string){
                  $('.second_column_content_container').html(output_string);
                  //$('.second_column_content_container').innerHTML("hello");
                  //alert(output_string);
              },
              error: function(data){
                  alert("error");
              }
          });
      }
          //show details on a popup
         function showDetailsPopup(e) {
          e.preventDefault();
          var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
          wnd.content(detailsTemplate(dataItem));
          wnd.center().open();
      }
  
      //This will redirect to Next Page
      function showDetails(e) {
          e.preventDefault();
          var row = $(e.target).closest("tr");
          var item = $("#grid").data("kendoGrid").dataItem(row);
          $.ajax({
              type: "POST",
              url: "&lt;?php echo base_url().'index.php/user_management/manage_users/list_view/'?&gt;"+JSON.parse(item.UserID),
              success: function(data){
                  alert("done");
                  //$('.second_column_content_container').html(output_string);
                  //$('.second_column_content_container').innerHTML("hello");
                  //alert(output_string);
              },
              error: function(data){
                  alert("error");
              }
          });
  
  
          //var grid = $("#grid").data("kendoGrid");
  
          //alert(JSON.parse(item.UserID));
          //window.location.href="http://www.google.com/";
  
  
  
      }
  &lt;/script&gt;
          &lt;script type="text/x-kendo-template" id="template"&gt;
                  &lt;div id="details-container"&gt;
                      &lt;h2&gt;#= FirstName #&lt;/h2&gt;
                      &lt;h2&gt;City: #= City # &lt;/h2&gt;
                  &lt;/div&gt;
          &lt;/script&gt;
  &lt;script type="text/x-kendo-template" id="toolbarTemplate"&gt;
      &lt;div class="toolbar"&gt;
          &lt;label class="category-label" for="users"&gt;Search Users: &lt;/label&gt;
          &lt;input type="text" id="users" style="width: 250px;" /&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  
  &lt;div class="data_column_a"&gt;
      &lt;img src=""  id="pre_image" &gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now how to solve this very extremely difficult problem  O_o??</p>
  
  <hr>
  
  <p>Update:
  This Username is on Page 2 of the Grid as can be seen in ScreenShot.
  <img src="https://i.stack.imgur.com/mm4pC.jpg" alt="enter image description here"></p>
  
  <p>But during Search, it sends the headers of page 1 when i search for username that is other than of page 1.</p>
  
  <p><img src="https://i.stack.imgur.com/a8Ecq.jpg" alt="enter image description here"></p>
  
  <p>Banging my head to walls, How to Solve ?</p>