I'm having a problem with PivotGrid where the grid throws an error: 'Cannot read property 'value' of undefined in Kendo Pivot Grid MVC'. This behavior doesn't happen every time. I set a timeout function, thinking maybe the data wasn't sent over yet. I've tried rewriting all my javascript. Nothing seems to work.
Do you folks have any suggestions? Thank you
Declaration for PivotGrid:
@(Html.Kendo().PivotGrid<RfpPurchasePrice>()
.Name("pivotPurchasePrices")
//.Events(x => x.DataBound("autoSizePivot"))
.AutoBind(false)
.Excel(excel => excel
.FileName("historialPrices_" + DateTime.Now.ToShortTimeString() + ".xlsx")
)
.ColumnWidth(75)
.Height(315)
.DataSource(dataSource => dataSource
.Ajax()
.Transport(transport => transport.Read("GetRfpPurchasePrices", "RFPCosting"))
.Events(x=>x.Error("pivotError"))
.Schema(schema => schema
.Cube(cube => cube
.Dimensions(dimensions =>
{
dimensions.Add(model => model.Month).Caption("Month");
dimensions.Add(model => model.Year).Caption("Year");
dimensions.Add(model => model.VendorName).Caption("Vendor");
dimensions.Add(model => model.ProductCost).Caption("ProductCost");
dimensions.Add(model => model.ReceiveQuantity).Caption("ReceiveQuantity");
})
.Measures(
measures =>
{
measures.Add("CostSum").Format("{0:c}").Aggregate("CalculateCost");
}
)
))
.Columns(columns =>
{
columns.Add("Month").Expand(true);
})
.Rows(rows =>
{
rows.Add("Year");
rows.Add("VendorName").Expand(true);
})
.Measures(measures => measures.Values("CostSum"))
)
)
Datatable with dynamic fields:
var counter = 0;
//Setup data tables for season input values
var t = $('#tblAddSeason').DataTable({
"paging": false,
"ordering": false,
"scrollX": true,
"info": false,
"searching": false,
"scrollY": '300px',
"scrollCollapse": true
});
Function for adding rows:
$('#btnAddRow').on('click', function (e) {
e.preventDefault();
t.row.add([
"<input style='width: 115px' type='text' id='models[" + counter + "].SeasonStart' name='models[" + counter + "].SeasonStart' />",
"<input style='width: 115px' type='text' id='models[" + counter + "].SeasonEnd' name='models[" + counter + "].SeasonEnd' />",
"<input id='models[" + counter + "].GrowingRegion' name='models[" + counter + "].GrowingRegion'/>",
"<input style='width: 75px' id='models[" + counter + "].Warehouse' name='models[" + counter + "].Warehouse'/>",
"<input style='width: 75px' id='models[" + counter + "].Repack' name='models[" + counter + "].Repack'/>",
"<input id='models[" + counter + "].InputProduct' name='models[" + counter + "].InputProduct'/>",
"<input id='models[" + counter + "].OutputProduct' name='models[" + counter + "].OutputProduct'/>",
"<button class='btn btn-success'>Fetch</button>",
"<input autocomplete='false' type='text' class='form-control cssOverride' id='models[" + counter + "].FobCost' name='models[" + counter + "].FobCost' />",
"<input autocomplete='false' type='text' class='form-control cssOverride' id='models[" + counter + "].InboundFreightCost' name='models[" + counter + "].InboundFreightCost' />",
"<input autocomplete='false' type='text' class='form-control cssOverride' id='models[" + counter + "].WHCharge' name='models[" + counter + "].WHCharge' />",
"<input autocomplete='false' type='text' class='form-control cssOverride' id='models[" + counter + "].RepackCharge' name='models[" + counter + "].RepackCharge' />",
"<input autocomplete='false' type='text' class='form-control cssOverride' id='models[" + counter + "].PackingMaterials' name='models[" + counter + "].PackingMaterials' />",
"<input autocomplete='false' type='text' class='form-control cssOverride' id='models[" + counter + "].Shrink' name='models[" + counter + "].Shrink' />"
]).draw(false);
When the user hits the 'Fetch' button this function is fired. It grabs some parameters and feeds it to the data source of the pivot grid. This works SOMETIMES but not every time. If I change the month date pickers or some drop downs it MAY stop working but is not consistent.
Javascript:
$('#tblAddSeason tbody').on('click', 'button', function (e) {
e.preventDefault();
//Find row index
var idx = t.row($(this).parents('tr')).index();
//Find datepicker season month selection
var start = t.cell(idx, 0).nodes().to$().find('input').val();
var end = t.cell(idx, 1).nodes().to$().find('input').val();
var prodId = t.cell(idx, 5).nodes().to$().find('input').val();
//Convert month name 'JAN' to integer 1
startMonth = getMonthFromString(start)
endMonth = getMonthFromString(end)
var data = {
prodId: prodId,
month1: startMonth,
month2: endMonth
}
if (prodId && startMonth && endMonth) {
$("#pivotPurchasePrices").data("kendoPivotGrid").dataSource.data([]);
$("#pivotUsdaData").data("kendoPivotGrid").dataSource.data([]);
var pivotPrices = $("#pivotPurchasePrices").data("kendoPivotGrid");
pivotPrices.dataSource.read(data);
var pivotUsda = $("#pivotUsdaData").data("kendoPivotGrid");
pivotUsda.dataSource.read(data);
$("#exportUsda").fadeIn();
$("#exportHistory").fadeIn();
$("#pivotPurchasePrices").fadeIn();
$("#pivotUsdaData").fadeIn();
$(".pricingHeaders").fadeIn();
$.ajax({
type: "POST",
url: "/RFPCosting/GetUSDAProduct",
data: data,
dataType: "json",
success: function (response) {
$('#lblUsdaProduct').html(response);
}
});
}
});
When the error is fired:
kendo?v=UrrZxjxAYh2OzBW5awHWSPND63FEZBQZyo1oU36iL4Y1:1 Uncaught TypeError: Cannot read property 'value' of undefined
at init._buildRow (kendo?v=UrrZxjxAYh2OzBW5awHWSPND63FEZBQZyo1oU36iL4Y1:1)
at init._buildRows (kendo?v=UrrZxjxAYh2OzBW5awHWSPND63FEZBQZyo1oU36iL4Y1:1)
at init._tbody (kendo?v=UrrZxjxAYh2OzBW5awHWSPND63FEZBQZyo1oU36iL4Y1:1)
at init.build (kendo?v=UrrZxjxAYh2OzBW5awHWSPND63FEZBQZyo1oU36iL4Y1:1)
at init.refresh (kendo?v=UrrZxjxAYh2OzBW5awHWSPND63FEZBQZyo1oU36iL4Y1:1)
at init.f (jquery.min.js:2)
at init.trigger (kendo?v=UrrZxjxAYh2OzBW5awHWSPND63FEZBQZyo1oU36iL4Y1:1)
at init._process (kendo?v=UrrZxjxAYh2OzBW5awHWSPND63FEZBQZyo1oU36iL4Y1:1)
at init.success (kendo?v=UrrZxjxAYh2OzBW5awHWSPND63FEZBQZyo1oU36iL4Y1:1)
at init.success (kendo?v=UrrZxjxAYh2OzBW5awHWSPND63FEZBQZyo1oU36iL4Y1:1)
This guy seemed to have the exact same problem but no one posted an answer: Cannot read property 'value' of undefined in Kendo Pivot Grid MVC
