Telerik Forums
UI for ASP.NET MVC Forum
2 answers
106 views

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);
}
The splice method work perfectly the item was removed from collection. But the relative Tile in the Layout not removed from view. If I repeat the call for button for this tile the index is equal to -1 (because is not in the items collection anymore).

I tried the example of remove from Add / Remove TileLayout but this operation remove all jquery listeners from remaining tiles.

Thanks
FranckSix
Top achievements
Rank 2
Iron
Iron
Veteran
 answered on 20 Jun 2023
0 answers
60 views

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

Richard
Top achievements
Rank 1
 updated question on 24 Jan 2023
1 answer
439 views

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>

Eyup
Telerik team
 answered on 25 May 2022
1 answer
267 views

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

Petar
Telerik team
 answered on 16 Nov 2021
3 answers
95 views

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>
Tsvetomir
Telerik team
 answered on 16 Mar 2021
1 answer
136 views

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

Tsvetomir
Telerik team
 answered on 26 Feb 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
Iron
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
Iron
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?