Question

我遇到了剑道网格双重加载的问题所以我使用了.autobind（false）并放了：

var wgrid = $（“＃WasteGrid”）。data（“kendoGrid”）; wgrid.dataSource.Read（）;

在doc ready函数中

。

现在我收到控制台错误，“未捕获类型错误：无法读取未定义的属性'数据源'

我的问题是如何在Javascript中手动填充kendo网格？

（我也包括了一个屏幕截图） enter image description here

这是我的代码（我还有一个_Layout.cshtml，如果这还不够，我可以发布）：

@model IEnumerable<OPS.Models.LabourSchedule>

@{
ViewBag.Title = "Ham";
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.DatePageType = "LabourEntry";
}

<script>

$(document).ready(function () {

//reads and populates the waste grid
var wgrid = $("#WasteGrid").data("kendoGrid");
wgrid.dataSource.Read();

});

//waste form update parameters
function Update_Data() {
return {
CurDate: kendo.toString($("#datepicker").data("kendoDatePicker").value(), "yyyy-MM-dd")
};
}

//waste form read parameters
function Read_Data() {
return {
LineName: "Ham",
CurDate: kendo.toString($("#datepicker").data("kendoDatePicker").value(), "yyyy-MM-dd"),
ShiftName: @(Session["currentShift"]) + ""
};
}

</script>


@section footer 
{
<div data-inline="true">

<div data-inline="true">
@if (ViewBag.curHour > 0)
{                                    
<a data-role="button" href="#" data-url="@Url.Action("Ham", "LabourEntry")" onclick="buttonLoad(this)"  data-icon="arrow-l" data-iconpos="notext" data-theme="c" data-inline="true" data-time="@ViewBag.prevHour"></a>                  
}
@for (var i = ViewBag.curHour - 7; i <= ViewBag.curHour + 7; i++)
{

if (ViewBag.curHour == i)
{                            
<a data-role="button" href="#" data-theme="b" data-inline="true">@i</a>                                
}
else if (@i >= 0 && @i <= 23)
{                             
<a data-role="button" href="#" data-url="@Url.Action("Ham", "LabourEntry")" onclick="buttonLoad(this)" data-theme="c" data-inline="true" data-time="@i">@i</a>                                          

}

}
@if (ViewBag.curHour < 23)
{                                                          
<a data-role="button" href="#" data-url="@Url.Action("Ham", "LabourEntry")" onclick="buttonLoad(this)"  data-icon="arrow-r" data-iconpos="notext" data-theme="c" data-inline="true" data-time="@ViewBag.nextHour">Arrow right</a>                    
}
<a href="#popupMenu" data-rel="popup" data-role="button" data-inline="true" data-transition="slideup" data-icon="grid" data-iconpos="notext" data-theme="b">Options</a>
</div>

</div>

<div data-role="popup" id="popupWaste" class="ui-content" data-theme="d" data-overlay-theme="a" data-dismissible="false" style="width: 90%; position: relative; margin: 20px auto;">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>

<div style="width: 100%;">

<h3>Date: <label id="lblWasteFormDate"></label>
</h3>

@(Html.Kendo().Grid<OPS.Models.LineProductWasteEntry>()
.Name("WasteGrid")
.Columns(columns =>
{

columns.Bound(p => p.Id).Hidden(true);
columns.Bound(p => p.BucketWeight).Hidden(true);
columns.Bound(p => p.LineCategoryId).Hidden(true);
columns.Bound(p => p.LineCategoryProduct).Hidden(true);
columns.Bound(p => p.LineProductId).Hidden(true);
columns.Bound(p => p.ShiftId).Hidden(true);
columns.Bound(p => p.SourceId).Hidden(true);
columns.Bound(p => p.UserId).Hidden(true);
columns.Bound(p => p.CategoryName);
columns.Bound(p => p.ProductName);
columns.Bound(p => p.Value);
columns.Bound(p => p.SourceName);
columns.Bound(p => p.Source);
columns.Bound(p => p.Weight);
columns.Bound(p => p.Weight2);
columns.Bound(p => p.Weight3);
})
.ToolBar(toolbar =>
{
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Sortable()
.Scrollable()
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.SourceName).Editable(false);
model.Field(p => p.CategoryName).Editable(false);
model.Field(p => p.ProductName).Editable(false);
model.Field(p => p.Value).Editable(false);
})
.Batch(true)
.ServerOperation(false)
.Events(events => events.Error("error"))
.Read(read => read.Action("Waste_Read", "LabourEntry")
.Data("Read_Data"))

.Update(update => update.Action("Waste_Update", "LabourEntry")
.Data("Update_Data"))
)
.AutoBind(false) 
)

</div>
</div>
<div data-role="popup" id="popupMenu" data-theme="a">
<ul data-role="listview" data-inset="true" style="min-width: 270px;" data-theme="a" class="nav-search">
<li data-role="divider" data-theme="d">Choose an action</li>

<li><a data-url="@Url.Action("PullFromPrevHour", "LabourEntry")" data-hour="@ViewBag.curHour" data-line="Ham" data-shift="@Session["currentShift"]" onclick="pullfrompeviousLoad(this)">Pull From Previous Hour</a></li>
<li><a data-url="@Url.Action("ResetToSchedule", "LabourEntry")" data-hour="@ViewBag.curHour" data-line="Ham" data-shift="@Session["currentShift"]" onclick="pullfrompeviousLoad(this)">Reset To Schedule</a></li>            
<li><a href="#popupWaste" data-rel="popup" data-position-to="window" data-transition="pop">Add Waste</a></li>
<li><a href="#popupDownTime" data-rel="popup" data-position-to="window" data-transition="pop">Add Downtime</a></li>
<li data-role="divider" data-theme="d">Navigation</li>
<li><a data-url="@Url.Action("MainBreak", "LabourEntry")" onclick="menuLoad(this)">Main Break</a></li>
<li><a data-url="@Url.Action("Loin", "LabourEntry")" onclick="menuLoad(this)">Loin</a></li>
<li><a data-url="@Url.Action("Shoulder", "LabourEntry")" onclick="menuLoad(this)">Shoulder</a></li>
<li><a data-url="@Url.Action("Packaging", "LabourEntry")" onclick="menuLoad(this)">Packaging</a></li>
</ul>
</div>

}

将js移动到网格之后并出现相同的错误我觉得它可能是脚本？这是我的_Layout代码......

<!DOCTYPE html>
<html lang="en">
<head>
@{

if (Session["currentDate"] == null)
{
HttpContext.Current.Session["currentDate"] = DateTime.Today.ToString("yyyy-MM-dd");
}

if (Session["currentShift"] == null)
{
HttpContext.Current.Session["currentShift"] = "1";
}                  
}

<title>@ViewBag.Title</title>
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="~/Resources/Triangle.ico" rel="shortcut icon" type="image/x-icon" />

@Styles.Render("~/Content/mobileCss", "~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")

<link href="@Url.Content("~/Content/kendo/2013.1.319/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.1.319/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.1.319/kendo.silver.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.1.319/kendo.dataviz.silver.min.css")" rel="stylesheet" type="text/css" />  

@*<script src="@Url.Content("~/Scripts/kendo/2013.1.319/jquery.min.js")"></script>*@
<script src="@Url.Content("~/Scripts/kendo/2013.1.319/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2013.1.319/kendo.aspnetmvc.min.js")"></script>
@*<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>*@
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

@RenderSection("DateSessions1", false)
@RenderSection("DateSessions2", false)


<script type="text/javascript">

//prevents ipad vertical bounce scrolling
document.ontouchmove = function (event) {
event.preventDefault();
}

function UpdateDate() {
UpdateSessionDate();
UpdateSessionShift();
UpdateSessionReportType();

var DatePageType = '@(ViewBag.DatePageType)';

if (DatePageType == "Reporting") {

UpdateCharts();
}
if (DatePageType == "LiveView") {
UpdateViews($('#hoursaver').val());
UpdateLineViews($('#hoursaver').val());
UpdateOverallInfoBox($('#linesaver').val());
UpdateOverviewOfLabourChart()
}
if (DatePageType == "LabourEntry") {
UpdateViews($('#hoursaver').val());
refreshLabourEntry();
}
}

function UpdateShift() {

UpdateSessionDate();
UpdateSessionShift();

var DatePageType = '@(ViewBag.DatePageType)';

if (DatePageType == "Reporting") {
UpdateCharts();
}
if (DatePageType == "LiveView") {
UpdateViews($('#hoursaver').val());
UpdateLineViews($('#hoursaver').val());
UpdateOverallInfoBox($('#linesaver').val());
}
if (DatePageType == "LabourEntry") {
refreshLabourEntry();

}
}

function pullfrompeviousLoad(objThis) {
var url = $(objThis).data('url') + '?hour=' + $(objThis).data('hour') + '&Shift=' + $(objThis).data('shift') + '&LineName=' + $(objThis).data('line');
window.location.href = url;
}

function menuLoad(objThis) {
var url = $(objThis).data('url');
// do something with the url client side variable, for example redirect
window.location.href = url;
}

function buttonLoad(objThis) {
var url = $(objThis).data('url') + '?hour=' + $(objThis).data('time');
// do something with the url client side variable, for example redirect
window.location.href = url;
}

function saveLoad(objThis) {

$('#labourform').submit();
//document.forms["labourform"].submit();
//document.labourform.submit();

var url = $(objThis).data('url') + '?hour=' + $(objThis).data('time');
// do something with the url client side variable, for example redirect
window.location.href = url;
return false;
}

// update date session data
function UpdateSessionDate() {

$.post('/SetSession/SetVariable',
{
key: "currentDate",
value: kendo.toString($("#datepicker").data("kendoDatePicker").value(), "yyyy-MM-dd")
});

};

// update shift session data
function UpdateSessionShift() {

$.post('/SetSession/SetVariable',
{
key: 'currentShift',
value: $('#shift').val()
});

};


// update report type session data
function UpdateSessionReportType() {

$.post('/SetSession/SetVariable',
{
key: "ReportType",
value: $('#ReportType').val()
});

};

function UpdateButtons(h) {
var arrayToModify = [];
var i = 0, j, k, buttonsToCreate, buttonContainer, newButton;
var buttonsToCreate = [];
var now = parseInt(h);

//sets the number of buttons to create and their values
for (var j = (now - 7) ; j <= (now + 7) ; j++) {

if (j >= 0 && j <= 23) {
buttonsToCreate[i] = j;
i++;
}
}

buttonContainer = document.getElementById('ddShift');

for (k = 0; k < buttonsToCreate.length; k++) {

if (buttonsToCreate[k] == parseInt(h) + 1) {
newButton.style.cssText = 'background-color: red;';
}

newButton = document.createElement('input');
newButton.type = 'button';
newButton.value = buttonsToCreate[k];
newButton.id = buttonsToCreate[k];
newButton.onclick = function () {
arrayToModify[arrayToModify.length] = this.id;
$('#hoursaver').val(this.id);
UpdateViews(this.id);
UpdateLineViews(this.id);
};

buttonContainer.appendChild(newButton);
}
};

//Populate the shift select element dynamically

function addCombo() {
var combo = document.getElementById('shift');
var option1 = document.createElement('option');
var option2 = document.createElement('option');
var option3 = document.createElement('option');

option1.text = 'Shift 1';
option1.value = '1';
combo.add(option1);

option2.text = 'Shift 2';
option2.value = '2';
combo.add(option2);

var DatePageType = '@ViewBag.DatePageType';

if (DatePageType != 'LabourEntry') {
option3.text = 'All Shifts';
option3.value = 'All';
combo.add(option3);
}
}

kendo.culture("en-US");

</script>

</head>

<body>

<div data-role="page" data-theme="b" id="index">

<div data-role="header" data-position="fixed">
<h1>@ViewBag.Title</h1>
<a href="#nav-panel" data-icon="bars" data-iconpos="notext" class="ui-btn-left">Menu</a>

@if (Request.IsAuthenticated)
{
@Html.ActionLink("My Account", "Index", "Account", routeValues: null, htmlAttributes: new { data_icon = "gear" })
}
else
{
@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { data_icon = "gear" })
}

<div class="datepickerbtn" style="width: 212.5px;">

@(Html.Kendo().DatePicker()
.Name("datepicker")
.Events(e =>
{
e.Change("UpdateDate");
})
.Format("yyyy-MM-dd")
.Value((String)Session["currentDate"])
)
</div>

<div class="shiftpickerbtn" id="btnshift">
<select name="shift" id="shift" onchange="UpdateShift()"></select>
</div>

</div>
<div data-role="content">

@RenderBody()
</div>
<div data-role="footer" style="text-align: center" data-position="fixed">
@RenderSection("footer", false)
</div>
<div data-role="panel" data-position-fixed="true" data-theme="b" data-content-theme="d" id="nav-panel">
<ul data-role="listview" data-theme="a" class="nav-search">
<li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
<li><a data-url="@Url.Action("Index", "Home")" onclick="menuLoad(this)">Home</a></li>
<li><a data-url="@Url.Action("Index", "LabourEntry")" onclick="menuLoad(this)">Labour Entry</a></li>
</ul>

</div>
</div>

@RenderSection("scripts", required: false)
</body>
</html>

Answer 1

将文档就绪处理程序放在Grid的初始化之下。 Grid还使用了在脚本之后执行的文档就绪函数 - 这就是抛出异常的原因 - Grid仍未初始化。

在Javascript中填充kendo ui网格

1 个答案: