I'm using kendo ui with mvc pivto grid local_flat_data_binding. I have problem in the chrome's console saying that 'kendoPivotConfigurator is not a function'
Here is my layout's code
@Scripts.Render("~/bundles/jquery")<
br
>
@Scripts.Render("~/bundles/jqueryval")<
br
> <
br
>
@Styles.Render("~/Content/css")<
br
>
@Scripts.Render("~/bundles/modernizr")<
br
>
<
br
> <
br
>
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common-bootstrap.min.css"
/><
br
>
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2018.2.620/styles/kendo.bootstrap.min.css"
/><
br
><
br
>
<
script
src
=
"http://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"
></
script
><
br
>
<
script
src
=
"http://kendo.cdn.telerik.com/2018.2.620/js/kendo.aspnetmvc.min.js"
></
script
><
br
><
br
>
<
script
src
=
"https://kendo.cdn.telerik.com/2018.2.620/js/jszip.min.js"
></
script
><
br
><
br
>
<
script
src
=
"http://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"
></
script
><
br
>
<
script
src
=
"http://kendo.cdn.telerik.com/2018.2.620/js/kendo.timezones.min.js"
></
script
><
br
>
<
script
src
=
"http://kendo.cdn.telerik.com/2018.2.620/js/kendo.aspnetmvc.min.js"
></
script
>
my html page and the controller are exactly like the examples sample.
Thank you
Hi,
how can I set the first day of the week used by the Kendo UI DatePicker in an Angular 2/4 project?
Thanks,
Mike
when I lock columns to make them static this causes my grid to shrink. I don't think resize function is working. Funny part is when I inspect my page on browser and close the dev tools in chrome grid resizes it and it turns into normal.
here is my script;
$(document).ready(
function
() {
$(
"#berth-grid"
).kendoGrid({
dataSource: {
type:
"json"
,
transport: {
read: {
url:
"@Html.Raw(Url.Action("
BerthList
", "
PortGuideAdmin
"))"
,
type:
"POST"
,
dataType:
"json"
,
data:
function
() {
var
data = {
PortId:
'@(Model.Id)'
};
addAntiForgeryToken(data);
return
data;
}
},
update: {
url:
"@Html.Raw(Url.Action("
BerthUpdate
", "
PortGuideAdmin
"))"
,
type:
"POST"
,
dataType:
"json"
,
data: addAntiForgeryToken
},
destroy: {
url:
"@Html.Raw(Url.Action("
BerthDelete
", "
PortGuideAdmin
"))"
,
type:
"POST"
,
dataType:
"json"
,
data: addAntiForgeryToken
}
},
schema: {
data:
"Data"
,
total:
"Total"
,
errors:
"Errors"
,
model: {
id:
"Id"
,
fields: {
PortId: { editable:
false
, type:
"number"
},
TerminalId: { editable:
false
, type:
"number"
},
TerminalName: { editable:
true
, type:
"string"
},
BerthName: { editable:
true
, type:
"string"
},
BerthNo: { editable:
true
, type:
"string"
},
BerthOperator: { editable:
true
, type:
"string"
},
BerthType: { editable:
true
, type:
"string"
},
TerminalType: { editable:
true
, type:
"string"
},
Latitude: { editable:
true
, type:
"number"
},
Longitude: { editable:
true
, type:
"number"
}
}
}
},
requestEnd:
function
(e) {
if
(e.type ==
"update"
) {
this
.read();
}
},
error:
function
(e) {
display_kendoui_grid_error(e);
// Cancel the changes
this
.cancelChanges();
},
pageSize: @(Model.PortBerthSearchModel.PageSize),
serverPaging:
true
,
serverFiltering:
true
,
serverSorting:
true
},
pageable: {
refresh:
true
,
pageSizes: [@(Model.PortBerthSearchModel.AvailablePageSizes)],
@await Html.PartialAsync(
"_GridPagerMessages"
)
},
editable: {
confirmation:
"@T("
Admin.Common.DeleteConfirmation
")"
,
mode:
"inline"
},
height: 400,
resizable:
true
,
columns: [
{
field:
"TerminalId"
,
title:
"Terminal Id"
,
locked:
true
,
width: 200
}, {
field:
"TerminalName"
,
title:
"Terminal Name"
,
//locked: true,
width: 200
},
{
field:
"BerthName"
,
width: 200,
title:
"Berth Name"
,
//locked: true
},
{
field:
"BerthNo"
,
width: 200,
title:
"Berth No"
},
{
field:
"BerthOperator"
,
width: 200,
title:
"Berth Operator"
},
{
field:
"BerthType"
,
width: 200,
title:
"Berth Type"
},
{
field:
"TerminalType"
,
width: 200,
title:
"Terminal Type"
},
{
field:
"Latitude"
,
width: 200,
title:
"Latitude"
},
{
field:
"Longitude"
,
width: 200,
title:
"Longitude"
},
{
command: [
{
name:
"edit"
,
text: {
edit:
"@T("
Admin.Common.Edit
")"
,
update:
"@T("
Admin.Common.Update
")"
,
cancel:
"@T("
Admin.Common.Cancel
")"
}
}, {
name:
"destroy"
,
text:
"@T("
Admin.Common.Delete
")"
}
],
width: 200
}
]
});
});
I'm using MVC and I have a dropdown list that pulls from the rows in the database and when an option from the dropdown list is selected, I want it to populate additional fields on the View that are other columns in the row on the database.
My View with the dropdown and the field I want populated.
<div class="group">
@Html.LabelFor(model => model.TransactionTemplateName, htmlAttributes: new { @class = "window-label-left" })
@(Html.Kendo().DropDownList()
.Name("TransactionTemplateName")
.DataTextField("TransactionTemplateName")
.DataValueField("ID")
.Filter("contains")
.Events(e => e.Change("onChange"))
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetTransactionTemplate", "Transactions");
});
})
.HtmlAttributes(new { style = "width: 50%" })
)
</div>
<div class="group">
@Html.LabelFor(model => model.DESCRIPTION, htmlAttributes: new { @class = "window-label-left" })
@Html.EditorFor(model => model.DESCRIPTION, new { htmlAttributes = new { @class = "window-text" } })
@Html.ValidationMessageFor(model => model.DESCRIPTION, "", new { @class = "text-danger" })
</div>
My method in the Controller to call the dropdown list and hopefully the additional column
public JsonResult GetTransactionTemplate(string text)
{
var northwind = new TreasuryEntities();
var products = northwind.TransactionTemplates.Select(product => new TransactionViewModel
{
ID = product.ID,
TransactionTemplateName = product.TEMPLATE_ID,
DESCRIPTION = product.DESCRIPTION
});
if (!string.IsNullOrEmpty(text))
{
products = products.Where(p => p.TransactionTemplateName.Contains(text));
}
return Json(products, JsonRequestBehavior.AllowGet);
}
I'm having trouble with the script needed to populate the other fields.
function onChange() {
$("#TransactionTemplateName").change(function () {
$("#ID").val(ID);
$("#DESCRIPTION").prop('readonly', false);
$("#DESCRIPTION").val();
$("#DESCRIPTION").prop('readonly', true);
})
}
So I was trying to follow the following example with my own data to illustrate our Downtime by shift by day.
http://dojo.telerik.com/@tsvetomir/iSEZE
Here is my attempt at it.
https://dojo.telerik.com/iMowIkaL
What I was hoping to do was to get 4 stacked and grouped bars out of the data sent.
I should have a bar for shift 1 on Date 9-6, shift 2 on Date 9-6, shift 1 on Date 9-7 and shift 2 on Date 9-7. Each of the four bars would have 2 reasons grouped together on each bar. I have attached a jpeg of what I am ultimately trying to replace.
What am i doing wrong here?
My code is like this because I want to have a button with search icon so :
$("#tcOptions").kendoButton({
spriteCssClass: "k-icon k-i-search",
click: onOptionsBtnClick
});
but the browser generated my button into something with k-sprite in front of my css like this :
<
span
class
=
"k-sprite k-icon k-i-search"
></
span
> will not show icon
Consequently nothing is showing unless I manually remove this k-sprite from my button css in HTML:
<
span
class
=
" k-icon k-i-search"
></
span
> will show icon
Btw, it is not working since I upgraded my kendoUI into this version Kendo UI v2017.1.223
Any help? Thanks,
I notice this even in the Kendo UI menu demos. The bottom of the sub menus has a jitter, more apparent if using the material theme, but exists in all themes. The bottom option is cut off half-way and then flashes to the corrected height. It does something similar with any of the animations.
Is there any way to fix this?