Hi,
I created a TileLayout with MVC
@(Html.Kendo().TileLayout()
.Name("zoneWorkflow").Columns(1)
.Gap(g => g.Columns(8).Rows(8))
.Columns(1)
.Reorderable(true)
.Resizable(true)
.HtmlAttributes(new { Title = this.LocalResources("LegendeEtapes") })
.RowsHeight("auto"))
On the header template I added a button to remove tile with handle to
removeOperationBox(e) { // e is a KendoButton into Header tile
const itemId = e.sender.element.parents("div[role='listitem']").attr("id");
const workflow = $("#zoneWorkflow").data("kendoTileLayout");
const index = workflow.items.findIndex(i => i.id === itemId);
workflow.items.splice(index, 1);
}
Hi!
I'm using the TileLayout which needs BodyTemplateId to Render. Inside my assigned BodyTemplateId I have this code below which works if the data from Address does not contain a hash (#) character. Say, the Address from the database is "UNIT #1 ABC BLDG" will not render the TextArea.
Code:
<script id="address-template" type="text/x-kendo-template">
<div class="row">
<div class="text-left col-md-1">
@Html.LabelFor(m => m.CompleteAddress, "Address")
</div>
<div class="col-md-5">
@(Html.Kendo().TextAreaFor(m => m.CompleteAddress).Rows(2)
.Readonly(true)
.ToClientTemplate()
)
</div>
</div>
</script>
@(Html.Kendo().TileLayout()
.Name("TileLayout")
.Columns(4)
.RowsHeight("20px")
.Containers(c =>
{
c.Add().BodyTemplateId("address-template").ColSpan(4).RowSpan(6);
})
)
What to do?
Thanks!
RGA
I have a dashboard page made up of several different sections. Each section is rendered via a Html.Action call.
Is it possible to rearrange these into kendo scripts so the whole page can leverage the TileLayout wrapper?
I tried below, but it's throwing all sorts of console errors. The child actions do contain their own javascript scripts which may be the problem perhaps?
<script id="views-corporatedocuments-template" type="text/x-kendo-template">
@Html.Action("CorporateDocuments")
</script>
<script id="views-lowmargin-template" type="text/x-kendo-template">
@Html.Action("LowMarginOrders")
</script>
<script id="views-lateshipments-template" type="text/x-kendo-template">
@Html.Action("LateShipments")
</script>
I am trying to implement tile layout in my asp.net mvc5 project. the order of my kendo references in my _layout.cshtml file are:-
<link href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="https://kendo.cdn.telerik.com/2020.1.219/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.219/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.219/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.219/js/kendo.aspnetmvc.min.js"></script>
When i run the project the tiles are not visible and I get error:
Tiles:114 Uncaught TypeError: jQuery(...).kendoTileLayout is not a function
at HTMLDocument.<anonymous> (Tiles:114)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at Function.ready (jquery.min.js:2)
at HTMLDocument.K (jquery.min.js:2)
Please provide a solution.
Thanks,Mrinal
I am attempting to add a RadialGuage to a TileLayout - without many options other than the value, this works just fine, however when adding ranges for color bands, the rendering fails and I get a javascript error in the browser console.
I'm not sure if this has something to do with having to use ToClientTemplate() or not, however I'm stumped and have been unable to workaround this so far:
<
script
id
=
"radial"
type
=
"text/x-kendo-template"
>
<
div
id
=
"gauge-container"
>
@(Html.Kendo().RadialGauge()
.Name("gauge")
.Pointer(pointer => pointer.Value((int)Model.DialValue))
.Scale(scale => scale
.MinorUnit(5)
.StartAngle(-30)
.EndAngle(210)
.Max(125)
.Labels(labels => labels
.Position(GaugeRadialScaleLabelsPosition.Inside)
.Font("20px Arial")
)
.Ranges(ranges =>
{
ranges.Add().From(0).To(75).Color("#f44004");
ranges.Add().From(75).To(100).Color("#a2dd21");
ranges.Add().From(100).To(125).Color("#2cb235");
})
).ToClientTemplate()
)
<
span
class
=
"widgetlabel"
>Overall Efficiency<
br
/>@Model.DialValue%</
span
>
</
div
>
</
script
>
I'm trying to create a tile based dashboard, but when I try to put a chart into a container, I get the error:-
VM391:3 Uncaught ReferenceError: value is not defined
at eval (eval at compile (kendo.all.js:234), <anonymous>:3:1161)
at init._initContainers (kendo.all.js:174269)
at
new
init (kendo.all.js:174169)
at HTMLDivElement.<anonymous> (kendo.all.js:2520)
at Function.each (jquery.min.js:2)
at n.fn.init.each (jquery.min.js:2)
at n.fn.init.e.fn.<computed> [as kendoTileLayout] (kendo.all.js:2519)
at HTMLDocument.<anonymous> (Index:87)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
--
The chart when placed outside of the TileLayout, works perfectly, and the chart from the demo works as well.
the code is:-
<
script
id
=
"IPWL_WL"
type
=
"text/x-kendo-template"
>
@(Html.Kendo().Chart<
BSOLPTLPortal.Models.IPWLWaitChartRecord
>()
.Name("ipwlChartOne")
.Title(title => title
.Text("Inpatient Waiting List - Waiting List (11)")
.Visible(true)
.Position(ChartTitlePosition.Top))
.Theme("office365")
.Legend(legend => legend
.Visible(false)
.Position(ChartLegendPosition.Bottom)
)
.Series(series => series
.Column(model => model.Value).Labels(true).Gap(0.5)
)
.ChartArea(area => area
.Height(350)
.Background("transparent")
)
.CategoryAxis(axis => axis
.Categories(model => model.WaitingBand)
.Labels(labels => labels.Rotation(0))
.MajorGridLines(lines => lines.Visible(false))
.Title("Weeks Waiting"
)
)
.ValueAxis(axis => axis.Numeric().Title("People Waiting").Visible(true)
)
.DataSource(ds =>
{
ds.Read(read => read.Action("_IPWLChartbyAdmissionTypex", "IPWL")
);
}
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#=value#")
.Format("{0}")
).ToClientTemplate()
)
</
script
>
@(Html.Kendo().TileLayout()
.Name("tilelayout")
.Columns(2)
.RowsHeight("285px")
.ColumnsWidth("50%")
.Containers(c => {
c.Add().Header(h => h.Text("Header One")).BodyTemplateId("IPWL_WL").ColSpan(1).RowSpan(1);
c.Add().Header(h => h.Text("Header Two")).BodyTemplate("Body Text Two").ColSpan(1).RowSpan(1);
c.Add().Header(h => h.Text("Header Three")).BodyTemplate("Body Text Three").ColSpan(2).RowSpan(1);
})
.Reorderable(true)
.Resizable(true)
)
I'm using version v2021.1.119 of Kendo UI for MVC.
Thanks