I am getting the error: JavaScript runtime error: Unable to get property 'xxx' of undefined or null reference.
This occurs when I click the "Add New Record" in my Kendo grid.
Does this have something to do with the way the model in setup?
I was able to add a record previously when my data record was more flattened out.
Please advise.
My grid is setup as:
@(Html.Kendo().Grid<
MyTest.Models.PersonModel
>()
.Name("myGrid")
.Columns(col =>
{
col.Bound(x => x.Person.ID);
col.Bound(x => x.Person.Field1);
col.Bound(x => x.Person.Field2);
col.Bound(x => x.Person.Field3);
col.Command(x => {
x.Custom("Extra Options").Click("showExtraOptions");
x.Destroy();
});
})
.ToolBar(x =>
{
x.Create();
x.Save();
})
.Sortable()
.Editable(x => x.Mode(GridEditMode.InCell))
.Navigatable()
.Scrollable(x => x.Height("auto"))
.Filterable(x => x
.Extra(false)
.Mode(GridFilterMode.Menu)
.Operators(op => op
.ForString(str => str.Clear()
.Contains("Contains")
.StartsWith("Starts with")
.IsEqualTo("Is equal to")
)
)
)
.Pageable(p => p
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(ds => ds
.Ajax()
.ServerOperation(false) // Paging, sorting, filtering and grouping will be done client-side
.Batch(true)
.PageSize(20)
.Model(m =>
{
m.Id(x => x.Person.ID);
})
.Read(r => r.Action("GetPerson", "Home"))
.Create(x => x.Action("CreatePerson", "Home"))
.Destroy(x => x.Action("DeletePerson", "Home"))
.Update(x => x.Action("UpdatePerson", "Home"))
)
)
My model is:
public
class
PersonModel
{
public
My_Person Person{
get
;
set
; }
public
List<Person_Options> PersonOptions {
get
;
set
; }
}
public
class
My_Person
{
public
string
ID{
get
;
set
; }
public
string
Field1 {
get
;
set
; }
public
string
Field2 {
get
;
set
; }
public
string
Field3 {
get
;
set
; }
}
I want export information from a Grid mvc to PDF without the tool bar but with the Client FooterTemplate, because, I have the total amount about all rows here
this is mi full code
<link href="~/Content/kendo/2016.1.112/kendo.common-material.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2016.1.112/kendo.material.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>
<script src="~/Scripts/kendo/2016.1.112/jquery.min.js"></script>
<script src="~/Scripts/kendo/2016.1.112/kendo.all.min.js"></script>
<script src="~/Scripts/kendo/2016.1.112/kendo.aspnetmvc.min.js"></script>
<style>
#grid .k-grid-content {
height: 283px !important;
}
#grid > div.k-grid-footer > div > table > tbody > tr > td:nth-child(6) {
text-align: right;
}
#grid > div.k-grid-footer > div > table > tbody > tr > td:nth-child(7) {
text-align: right;
}
/*
Use the DejaVu Sans font for display and embedding in the PDF file.
The standard PDF fonts have no support for Unicode characters.
*/
.k-grid {
font-family: "DejaVu Sans", "Arial", sans-serif;
}
/* Hide the Grid header during export */
/*.k-pdf-export .k-grid-toolbar,
.k-pdf-export .k-pager-wrap*/
.k-pdf-export .k-grid-toolbar
{
display: none;
}
</style>
@{
Layout = null;
}
<div id="transactions">
@(Html.Kendo().Grid<Account.ViewModels.AccountManagement.AccountingViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.CompanyName);
columns.Bound(p => p.ContractDescription);
columns.Bound(p => p.ConceptType);
columns.Bound(p => p.MovementDate).Title("Date").Format("{0:MMMM dd yyyy}");
columns.Bound(p => p.Billing).Title("Invoice Number");
columns.Bound(p => p.PaidFlag).Title("Status").ClientFooterTemplate("Total");
columns.Bound(p => p.Paid).Title("Amount").Format("{0:c}").HtmlAttributes(new { style = "text-align:right" })
.ClientFooterTemplate("#= kendo.format('{0:c}', sum) #");
})
.ToolBar(tools =>
{
tools.Excel();
tools.Pdf();
})
.Excel(excel => excel.FileName("Transaction.xlsx").Filterable(true).ProxyURL(Url.Action("ExcelExportTransactions", "Accounting")))
.Pdf(pdf=>pdf.AllPages()
.FileName("Transactions.pdf")
.Margin(0,1,100,1)
.ProxyURL(Url.Action("PdfExportTransactions", "Accounting")))
.Sortable()
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Sort(sort => sort.Add("CompanyName").Ascending())
.ServerOperation(true)
.Model(model => model.Id(p => p.MovementID))
.Read(read => read.Action("ReadTransactions", "Accounting"))
.Aggregates(a => { a.Add(p => p.Paid).Sum(); })
)
)
</div>
Hi,
Is there any telerik control for live tile for MVC ? There is one for ASP.Net but I was hoping to get one for MVC. If not, any ideas on what Telerik control I can use and try getting same behavior ?
My application makes use of Adobe TypeKit for loading custom fonts. I'd like the kendo editor to make use of these fonts so staff that are loading content can see what it will look like. Adobe TypeKit loads fonts/css using javascript (see below for example). Is there anyway for me to load this javascript into the iframe? Or is there anyway for me to get the iframe to be able to use the fonts/css loaded by TypeKit?
<script src=
"https://use.typekit.net/ID_HERE.js"
></script>
<script>
try
{ Typekit.load({ async:
true
}); }
catch
(e) { }</script>
Thanks!
Hi !
I want to preselect my MultiSelect with values of my ViewModelRole.Functionalities
@(Html.Kendo().Grid<
GCM.ViewModel.ViewModelRole
>()
.Name("GridRoles")
.Columns(columns =>
{
columns.Bound(c => c.Designation);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
})
.ToolBar(toolbar => {
toolbar.Create();
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.ClientDetailTemplateId("functionalityPanel")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.Id))
.Read(read => read.Action("Roles_Read", "Role"))
.Create(create => create.Action("Roles_Create", "Role"))
.Update(update => update.Action("Roles_Update", "Role"))
.Destroy(destroy => destroy.Action("Roles_Destroy", "Role"))
)
)
<
script
type
=
"text/javascript"
>
function Save(e)
{
var roleId = e.event.target.dataset.roleId;
/*
AJAX Call to update Role.Functionalities
*/
}
</
script
>
<
script
id
=
"functionalityPanel"
type
=
"text/x-kendo-template"
>
@(Html.Kendo().MultiSelect()
.Name("Fonctionnalities_#=Id#")
.Placeholder("Choisissez les fonctionnalitées")
.AutoClose(false)
.DataValueField("Id")
.DataTextField("Code")
.Value(new List<
int
>
{ 1, 2 })
.BindTo(ViewBag.functionalities)
.ToClientTemplate()
)
<
br
/>
@(Html.Kendo().Button()
.Name("Save_#=Id#")
.Content("Save")
.HtmlAttributes(new { data_role_id="#=Id#" })
.ToClientTemplate())
</
script
>
and my controller
public class RoleController : Controller
{
private SolutecNetContext db = new SolutecNetContext();
public ActionResult Index()
{
ViewBag.functionalities = db.Functionalities.ToList();
return View();
}
public ActionResult Roles_Read([DataSourceRequest]DataSourceRequest request)
{
IQueryable<
Role
> roles = db.Roles;
DataSourceResult result = roles.ToDataSourceResult(request, role => new ViewModelRole{
Id = role.Id,
Designation = role.Designation,
FunctionalitiesIds = GetFunctionalitiesIds(role.Functionalities)
});
return Json(result);
}
private List<
int
> GetFunctionalitiesIds(ICollection<
Functionality
> functionalities)
{
List<
int
> functionalitiesIds = new List<
int
>();
foreach(Functionality f in functionalities)
{
functionalitiesIds.Add(f.Id);
}
return functionalitiesIds;
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Roles_Create([DataSourceRequest]DataSourceRequest request, ViewModelRole viewModelRole)
{
if (ModelState.IsValid)
{
var entity = new Role
{
Designation = viewModelRole.Designation
};
db.Roles.Add(entity);
db.SaveChanges();
viewModelRole.Id = entity.Id;
}
return Json(new[] { viewModelRole }.ToDataSourceResult(request, ModelState));
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Roles_Update([DataSourceRequest]DataSourceRequest request, ViewModelRole viewModelRole)
{
if (ModelState.IsValid)
{
var entity = new Role
{
Id = viewModelRole.Id,
Designation = viewModelRole.Designation
};
db.Roles.Attach(entity);
db.Entry(entity).State = EntityState.Modified;
db.SaveChanges();
}
return Json(new[] { viewModelRole }.ToDataSourceResult(request, ModelState));
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Roles_Destroy([DataSourceRequest]DataSourceRequest request, ViewModelRole viewModelRole)
{
if (ModelState.IsValid)
{
var entity = new Role
{
Id = viewModelRole.Id,
Designation = viewModelRole.Designation
};
db.Roles.Attach(entity);
db.Roles.Remove(entity);
db.SaveChanges();
}
return Json(new[] { viewModelRole }.ToDataSourceResult(request, ModelState));
}
protected override void Dispose(bool disposing)
{
db.Dispose();
base.Dispose(disposing);
}
}
and I want to do something like
.Value("#=Functionalities#")
Is it possible ? Did I miss something ?
Thank for your help !
Hello,
I've been trying to implement the following (I believe quite common) scenario:
I have a page with a Grid in it and an Window, declared like this:
@(Html.Kendo().Window()
.Name("detailsWindow")
.Title(Localizer["Manage an Object"])
.Content(Localizer["Loading..."])
.AutoFocus(true)
.Iframe(false)
.Draggable()
.Events(ev => ev.Close("detailsWindow_close"))
.Resizable()
.Visible(false)
.Deferred()
)
When the user double-clicks, the Window is refreshed with an URL of a partial view, the Window is centered and shown like this:
var
detailsWindow = $(
'#detailsWindow'
).data(
'kendoWindow'
);
kendoWindow.refresh(url).center().open();
The problem is that nothing seems to work in the contents of the Window:
Obviously Kendo UI Javascripts are not applied to the new DOM elements in the Window.
My question is: Can I refresh Kendo UI somehow (preferably to the DOM elements in the Window only)?
Note: I have intentionally disabled iframes, because:
I've got a drop down list declared as follows
@(Html.Kendo().DropDownList()
.Name(
"CodeDropDown"
)
.OptionLabel(
" "
)
.DataValueField(
"Code"
)
.DataTextField(
"DisplayDescription"
)
.DataSource(source =>
{
source.Read(read =>
{
read.Action(
"_CodeDropDown"
,
"Gainful"
)
.Data(
"CodeDropDownData"
);
})
.Events(events => events.Error(
"onCodeDropDownError"
))
.ServerFiltering(
true
);
})
.AutoBind(
true
)
.Animation(
false
)
.HtmlAttributes(
new
{ style =
"width: 512px; font-size: 12px;"
})
.Events(events => events.Change(
"onCodeDropDownChange"
))
)
I then also have a checkbox which when toggled, causes a reread via this function:
function
loadCodeDropdownList() {
var
codeList = $(
"#CodeDropDown"
).data(
"kendoDropDownList"
);
codeList.dataSource.read(CodeDropDownData());
}
This works great; the items in the dropdown change and everything is fine. I have seen some examples where a refresh() is invoked on the DDL after the read, but that didn't seem to be necessary for me.
So what's the problem? Some of the items in the lists overlap so if an item is currently selected which isn't in the newly read data, I'm trying to clear it. My naive approach was to get the value, read the new data, set the value again and if the selectedIndex isn't then set, set the value to null, as in
function
loadCodeDropdownList() {
var
codeList = $(
"#CodeDropDown"
).data(
"kendoDropDownList"
);
var
code = codeList.value();
var
oldSel = codeList.selectedIndex;
codeList.dataSource.read(CodeDropDownData());
codeList.refresh();
// doesn't seem to matter if this is here
codeList.value(code);
if
(codeList.selectedIndex == 0) {
// selectedIndex is always the same as it was before the read
codeList.value(
null
);
}
}
However, this doesn't work. The value always gets set, even if it's not in the newly read items and the selectedIndex goes back to what it was.
I've also tried setting the value to null before the read, and that doesn't seem to help; true, the value becomes null and the selectedIndex is zero, but then setting the value still results in it getting set to a value not in the list and the selectedIndex goes back to what it was, even though it may be greater than the number of items that were just read.
What I have noticed, though, is that setting a breakpoint on the line where I set the value after the read makes it work. When the breakpoint is hit, the value is no longer displayed in the drop down list, and the rest works as expected. But if I just let it run, it doesn't work.
So am I running into some kind of timing issue? I've tried binding to the dataBound event and doing the setting there, but it works just the same.
Hi,
I am uploading an excel file that has some formulas in them to the kendo spreadsheet. The sheet seems to be loading in the Spreadsheet fine, but when I try to send the retrieved values from the kendo spreadsheet, there seems to be an exception - 'TypeError: this is undefined'
function
fetchDataForKidsGridModel(ExcelVals) {
debugger;
var
cellValues, range, ArrOfCellValue = [], CellValueArr,
startPoint = 17,
mandotoryColumn =
"E"
;
var
outletArr = [];
var
spreadsheet = $(
"#spreadsheet"
).data(
"kendoSpreadsheet"
);
var
sheet = spreadsheet.activeSheet();
var
endPoint = getSheetLength(sheet, startPoint, mandotoryColumn
for
(
var
l = 0; l < endPoint ; l++) {
var
StartColumn_CI = 85;
CellValueArr = [];
var
arrOfOutlets = [];
for
(
var
i = 0; i < ExcelVals.length ; i++) {
var
rowCellNo = ExcelVals[i].ColumnVal.replace(
"#"
, startPoint).trim();
range = sheet.range(rowCellNo)
cellValues = range.values();
if
(cellValues[0][0] ==
null
) {
cellValues[0][0] =
""
;
}
CellValueArr[i] = cellValues;
}
ArrOfCellValue[l] = CellValueArr;
startPoint++;
}
//ERROR is thrown at this point while debugging
$.ajax({
url:
'/UploadPO/CreateModelForGridEcomm'
,
type:
'POST'
,
async:
true
,
dataType:
'json'
,
data: { cellValues: ArrOfCellValue, BrandID: brandName },
//
success:
function
(result) {
console.log(result);
// you code comes here
GetGrid(result)
},
error:
function
(result) {
//Error Handling
if
(result.success =
true
) {
alert(result.responseText);
}
if
(result.success =
false
) {
alert(result.responseText);
}
}
});
}
Any help would be much appreciated.
Feel free to ask any questions to further clarify my question..
Thanks in advance...
$(grid).data("kendoGrid").dataSource.data([]);
which does clear the grid but it also shows 'No Data Found for the search' message. Since user didn't perform any search but only changed the radio button it doesn't seem right to display that message in the grid. So, i was wondering if there was a way to clear the grid without invoking the databound method.
Thanks.