[英]KendoUI grid for ASP.net MVC
I have a requirement of a search page in which I am using KendoUI grid to display the search result. 我需要一个搜索页面,我在其中使用KendoUI网格来显示搜索结果。 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.
我正在使用ASP.net MVC和KENDOUI网格。
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 KendoUI网格
<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: 我的JavaScript功能:
<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. 当我将网格附加到事件时,在javascript中的按钮单击事件我得到错误,无法识别数据源读取。 Exact error is:
确切的错误是:
JavaScript runtime error: Unable to get property 'dataSource' of undefined or null reference JavaScript运行时错误:无法获取未定义或空引用的属性“dataSource”
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. 我对KendoUi和MVC很新,所以请详细说明你的解释。
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
在上面的AdditionalData javascript函数中,我的参数没有在paaremeter中设置set
function AdditionalData() {
//$("#ADuserGrid").empty();
$("#ADuserGrid").fadeIn();
return {
searchText: enterTest
}
}
This searchText is not getting set even tough I am getting value in enterTest. 这个searchText没有设置甚至很难我在enterTest中获得价值。 Any help will be of very great use.
任何帮助都将非常有用。 I am really stuck in this.
我真的陷入了困境。
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. $("kADUser")
将找不到任何元素,因为它正在查找kADUser
标记,并且空jQuery集的.data()
为null。
As a result, when you try to access grid.dataSource
, grid
is "undefined or null" (which is what the error is telling you). 因此,当您尝试访问
grid.dataSource
, grid
是“未定义或null”(这是错误告诉您的)。 You should be using an id selector: 您应该使用id选择器:
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.
这将使调试更容易。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.