Telerik Forums
UI for ASP.NET MVC Forum
1 answer
41 views
I have a TileLayoutItems component on my page
For some reason nor button nor span would actually appear inside header of TileLayoutItem

    <TelerikTileLayout Columns="3"
                       ColumnWidth="285px"
                       RowHeight="285px"
                       Reorderable="true"
                       Resizable="true"
                       ColumnSpacing="0px"
                       RowSpacing="0px">
        <TileLayoutItems>
            <TileLayoutItem @ref="reference">
                <HeaderTemplate>
                    @* <button @onclick="OnCloseButtonClicked"></button> *@
                    <span>sometext</span>
                </HeaderTemplate>
                <Content>
                    <img class="k-card-image" draggable="false" src="images/cards/places/barcelona.jpg" alt="Barcelona" />
                </Content>
            </TileLayoutItem>
            <TileLayoutItem HeaderText="Sofia">
                <Content>
                    <img class="k-card-image" draggable="false" src="images/cards/places/sofia.jpg" alt="Sofia" />
                </Content>
            </TileLayoutItem>
            <TileLayoutItem HeaderText="Rome">
                <Content>
                    <img class="k-card-image" draggable="false" src="images/cards/places/rome.jpg" alt="Rome" />
                </Content>
            </TileLayoutItem>
        </TileLayoutItems>
    </TelerikTileLayout>

Eyup
Telerik team
 answered on 25 Nov 2024
2 answers
193 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
124 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
657 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
377 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
164 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
199 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
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
DateInput
Drawer
SplitView
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Template
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
AppBar
BottomNavigation
Card
FloatingActionButton
Licensing
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
DateTimePicker
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?