向Kendo Grid添加文本搜索

我正在嘗試第一次使用開源Kendo Grid。我有了基本的網格並運行得很好，但是現在我需要添加一個搜索功能，並搜索名字和姓氏。我試圖做到這一點在阿賈克斯，但我被困在了一個錯誤：向Kendo Grid添加文本搜索

錯誤：無法調用方法的不確定

我的代碼「讀」：

 <div id="search-index"> 
       <div class="editor-field"> 
        <label>First Name:</label> 
        @Html.TextBox("FirstName") 

        <label style = "margin-left: 15px;">Last Name:</label> 
        @Html.TextBox("LastName", "", new { style = "margin-right: 15px;" }) 
       </div>    
       <div id="search-controls-index"> 
         <input type="button" id="searchbtn" class="skbutton" value="Search" /> 
         <input type="button" id="addPersonbtn" class="skbutton" value="Add New Person" onclick="location.href='@Url.Action("AddPerson", "Person")'"/> 
       </div> 
     </div> 

     <div id="index-grid"></div>   
    </div> 



    $(document).ready(function() { 


     var grid = $('#index-grid').kendoGrid({ 
      height: 370, 
      sortable: true, 
      scrollable: true, 
      pageable: true, 
      dataSource: { 
         pageSize: 8, 
         transport: { 
            read: "/Home/GetPeople", 
            dataType:"json" 
            } 
         }, 
      columns: [ 
           { field: "FirstName", title: "First Name" }, 
           { field: "LastName", title: "Last Name" }, 
           { field: "Gender", title: "Gender" }, 
           { field: "DOB", title: "Date of Birth", template: '#= kendo.toString(new Date(parseInt(DOB.substring(6))), "MM/dd/yyyy") #' }, 
           { field: "IsStudent", title: "Is a Student?" }] 
     }); 


     $("#searchbtn").on('click', function() { 
      var fsname = $("#FirstName").val(); 
      var ltname = $("#LastName").val(); 

      $.ajax({ 
       type: 'GET', 
       url: '@Url.Content("~/Home/GetPeople")', 
       data: { fname: fsname, lname: ltname }, 
       success: function (data) { 
        grid.dataSource.read(); 
       }, 
       error: function() { 
        $("#index-grid").html("An error occured while trying to retieve your data."); 
       } 
      }); 
     }); 
    });

應該的問題，但這裏是我的控制器（採用asp MVC 3）：

public JsonResult GetPeople(string fname, string lname) 
    { 
     if (((fname == "") && (lname == "")) || ((fname == null) && (lname == null))) 
     { 
       var peopleList = repo.GetPeople(); 

       return Json(peopleList, JsonRequestBehavior.AllowGet); 
     } 
     else 
     { 
      var personResult = repo.GetSearchResult(fname, lname); 

      return Json(personResult, JsonRequestBehavior.AllowGet); 
     } 
    }

來源

2013-04-29 BattlFrog

它是否對GetPeople進行初始頁面加載調用？ – Myzifer 2013-05-01 09:04:30

僅供參考，您可以使用'string.IsNullOrWhitespace（fname）'來檢查空，空字符串或空白。不需要手動進行所有那些檢查......非常混亂。 – 2014-08-02 04:51:36

的問題是，$("#grid").kendoGrid()返回其不具有dataSource字段jQuery對象。以下是如何獲得對客戶端對象的引用：http://docs.kendoui.com/getting-started/web/grid/overview#accessing-an-existing-grid

來源

2013-04-29 19:07:27

我可能錯過了一些東西，但在我看來，我已經在追隨它。變量「網格」是整個網格的數據源，等等。我對編程總的來說很陌生，所以我可能無論如何都會犯這個錯誤。我搜索了幾天，並沒有發現任何人將文本搜索與Kendo網格相結合。你知道有關它的任何提及嗎？ – BattlFrog 2013-04-29 21:17:32

您是否檢查過我發送的幫助文章？它顯示瞭如何獲取對網格客戶端對象的引用。 – 2013-04-30 08:19:03

是的，但我仍然無法弄清楚如何用文本框搜索過濾我的網格。我對編程還很陌生，我知道我最終會想出來，但我已經花了6個小時的時間了，需要繼續前進。感謝您的時間。 – BattlFrog 2013-04-30 19:48:07

向Kendo Grid添加文本搜索

回答

相關問題