KendoUI grid for ASP.net MVC

Question

I have a requirement of a search page in which I am using KendoUI grid to display the search result. I have a textbox and button and if text is entered and on click event of button I hace to display the grid with the list of users matching to search result. I am using ASP.net MVC and KENDOUI grid.

My View:

The search box and button:

 <div id="SearchSection">
    <input  type="text" id="txtSearch" class="k-textbox"/>  
     <button  class="k-button"id="btnSearch" style="width:150px">Search</button>

</div>   

The KendoUI grid

  <div id="ADUserSection">
      <div id="ADSearchedUser">
    List of users in Active directory:
           <div id="ADuserGrid">
                  @(Html.Kendo().Grid<ADUser>()
                               .Name("kADUser")
                               .Columns(columns =>
                                {
                                 columns.Bound(p => p.UserLoginName);
                                 columns.Bound(p => p.UserDisplayName);

                                 })
                              .AutoBind(false)

                              .DataSource(ds =>
                                          {
                                            ds.Ajax()
                                              .Read(read =>
                                                   {
                                                    read.Action("GetADUser", "ManageUsers")
                                                        .Data("AdditionalData");
                                                   });

                           })
              )
        )
    </div>

</div>

My JavaScript Function:

 <script>
$(document).ready(function () {
    $("#ADUserSection").fadeOut(0);
    $("#AvailableUserRoleSection").fadeIn()
});

     var enterTest
    $("#btnSearch").click(function () {
    debugger;
    enterTest = $("#txtSearch").val().trim();


    if (enterTest == "") {
        $("#ADUserSection").fadeOut();
    }
    else {
        AdditionalData();
        $("#ADUserSection").fadeIn();
        var grid = $("kADUser").data("kendoGrid").dataSource.read({ searchText: enterTest });
        //**Breaks at this Point**//
    }
});

function AdditionalData() {
    //$("#ADuserGrid").empty();
    $("#ADuserGrid").fadeIn();
    return {
        searchText: enterTest
    }
}

My Controller Action

 public JsonResult GetADUser([DataSourceRequest] DataSourceRequest request, string searchText)
    {

        viewmodel.searchedADUser = model.GetUserFromAD(searchText);
        return Json(viewmodel.searchedADUser.ToList().ToDataSourceResult(request),      JsonRequestBehavior.AllowGet);

    }

On the button click event in javascript when I attach the grid to event I get the error the datasource read is not recognised. Exact error is:

JavaScript runtime error: Unable to get property 'dataSource' of undefined or null reference

Please help me in that. any idea please share or if I am doing anything wrong in my above code please point out.

I am very new to KendoUi and MVC so please elaborate n yur explanation.

I got the above problem becosue of missing # before the grid name.

But Now I habe one more issue, even though I am follwing all the proper step. In my above AdditionalData javascript function my parameter is not getting set set in the paaremeter

function AdditionalData() {
//$("#ADuserGrid").empty();
$("#ADuserGrid").fadeIn();
return {
    searchText: enterTest
}
}

This searchText is not getting set even tough I am getting value in enterTest. Any help will be of very great use. I am really stuck in this.

Answer 1

You're trying to access your grid with:

var grid = $("kADUser").data("kendoGrid");

$("kADUser") won't find any elements, because it's looking for a kADUser tag, and the .data() of an empty jQuery set is null.

As a result, when you try to access grid.dataSource, grid is "undefined or null" (which is what the error is telling you). You should be using an id selector:

var grid = $("#kADUser").data("kendoGrid");

In general, I'd suggest to avoid compound statements and keep it at one statement per line. This will make debugging much easier.