заполнить кендо щ сетку в Javascript

Question

Я была проблема с кендо сетки двойной загрузкой, так что я использовал .autobind (ложь) и положить:.

вар wgrid = $ («# WasteGrid») данные ("kendoGrid"); wgrid.dataSource.Read();

в документе готовность функции.

Теперь я получаю ошибку консоли, «неперехваченным Тип ошибки: Не удается прочитать свойство„источник данных“неопределенных»

Мой вопрос, как я вручную заполнить кендо сетку в JavaScript?

(Я включил снимок экрана, а)

вот мой код (я также _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

Поместите документ готовым обработчиком ниже инициализации сетки. Сетка также использует готовую функцию документа, которая выполняется после вашего скрипта - вот почему выбрано исключение - сетка все еще не инициализирована.