Hey i'd like to make a dashboard using the TileLayout Component in .Net Core. But I want to add different kinds of widgets from a List in the model. Each Container shall be added using one of many templates. I want the templates to render a partial view and have the views get their own data using the Id of the widget. But I don't know how to give the view the id of the container that is currently being created.

This is the code I have so far:

<div class="container-fluid">
@(Html.Kendo().TileLayout()
        .Name("dashboardLayout")
        .HtmlAttributes(new {style = "overflow:hidden;"})
        .Width(String.Format("{0}", (@customModel.ColumWidth * @customModel.ColumCount)))
        .Columns(@customModel.ColumCount)
        .RowsHeight(String.Format("{0}px", @customModel.RowHeight))
        .ColumnsWidth(String.Format("{0}px", @customModel.ColumWidth))
        .Gap(g => g.Columns(@customModel.VerticalGap).Rows(@customModel.HorizontalGap))
        .Reorderable(true)
        .Resizable(true)
        .Containers(c => {
            foreach(DashboardWidgetConfigurationModel widget in @customModel.Widgets) {
                c.Add().Header(h=>h.Text(@customModel.ColumWidth.ToString())).BodyTemplateId("single-value-circle-widget").ColSpan(5).RowSpan(2);
            }
        })
        .Events(e => e.Resize("onTileResize"))
    )
</div>

<script id="single-value-circle-widget" type="text/x-kendo-template">
    @await Html.PartialAsync("../Dashboard/SingleValueCircleWidget", #= widget #)  //the widget model contains the id
</script>

Long story short:

I want to access the current DashboardWidgetConfigurationModel from the foreach loop in the template.

I have a tile layout with 11 containers in it.  I need to set the background color of 3 of the tiles to a different color.  I am using .NET Core tag helpers.

I tried adding a class attribute to one of the <container> tags, but it had no effect. 

Good afternoon,

I have a yearly dashboard where I have set up a slightly complicated scenario using several MVC Core components.

When you select a year from the dropdown it forces each of the charts/grids to read the data based on the selected year. The 'Yearly Activity' tab is the default tab and works nicely. I have a few pie charts and a bar chart on one tab which are arranged using the TileLayout - this allows them to be resized and dragged. It looks like this:

On the second tab "Monthly Activity by Operator" there is a kendo grid which displays aggregated data based on the selected year. However, when I click on the second tab and change the year in the dropdown, then click back on the first tab, the bar and pie chart have updated correctly data-wise but have not resized correctly in layout - they appear zoomed in:

I've tried making them resize if I click on the 'Yearly Activity' tab:

function tabSelect(e) {

        var tab = $(e.item).find("> .k-link").text();

        if (tab == "Yearly Activity") {

            kendo.resize($(".k-grid, .k-chart"));

        }

    }

I also have these functions, which are almost exactly as written in the demos:

    $(document).ready(function () {

        kendo.resize($(".k-grid, .k-chart"));

    });

    function onTileResize(e) {

        if (e.container) {

            // for widgets that do not auto resize

            // https://docs.telerik.com/kendo-ui/styles-and-layout/using-kendo-in-responsive-web-pages

            kendo.resize(e.container, true);

            $(document).bind("kendo:skinChange", updateTheme);

        }

    }

    function updateTheme() {

        var charts = $(".k-chart");

        $.each(charts, function (i, elem) {

            var theme = kendoTheme;

            if (/(default-|bootstrap-|material-|classic-)/.test(kendoTheme)) {

                theme = "sass";

            }

            $(elem).getKendoChart().setOptions({ theme: theme });

        });

    }

    $(window).on("resize", function () {

        kendo.resize($(".k-card-body"));

    });

How can I get the charts to resize themselves correctly, as if I was on the first tab when I changed the year?

Kind regards,

Richard

Please go to demo https://demos.telerik.com/aspnet-core/tilelayout/resizing and decrease width and height of all 3 items to 1 row and 1 column

-> the height of the TileLayout container decreases to the height of 1 row.

How can I increase it again or keep a specified height?

I can set a minimum height in pixels by HtmlAttributes, but no percentual or calculated value.

Hello

when mixing Text() and TemplateId() for the headers in a LayoutGrid, it is working fine until Text() is used the first time. After that the header uses the content of the previous header.

The complete example (just copy / paste it):

I would expect for the headers:

- Liste 1

- List 2

- Header for List

- List 2

I get this:

The last one is wrong.

Of course, I can use TemplateId() for all of them.

If it is by design, add a note to the documentation, please.

Best regards

Christine

Hello,

I bought kendo UI ASP.NET Core and i using it in my asp net core project.

i want to use kendo ui map in my project and i use tile layer like this

 layers: [{
                            type: "bing", // this layer is the map  , layer[0]
                            imagerySet: "aerialWithLabels",

                            key: "h0yO0NtadB4lkxJAaBhO~9ZxiGd8wv3tE3MGtwDCVaQ~AvJmJR3vegm0gJw6grYJ2OnnVtgMio1FeEMb4mMBKU2qmxvtIZxx7Hl-rAasXWSH"
                        }

the key is my key from microsoft bing map.

my question:

i want to use the map without internet connection . i have rastar map on local file in my computer and i want to use this map or bing map offline without internet

is it possible? and how can i do this? i try many guide in the site and i just cant understand what is wrong.

Dear Admin,

I need to bind dynamically data model one by one in kendo title layout. I couldn't found any data source binding or any other ajax binding.

i have get list from controller in model collection i couldn't bind data using bodytemplate or BodyTemplateId.

Any one help me? I have share attached file with you to understand my code and help me for better solution.

Please provide solution in .net core because i am using .net core 3.1

I'm using the .NET Core HTMLHelper to instantiate an instance of the tile layout, the problem I'm running into is that the tile widths just shrink instead of reacting like a flex where the cards will stack as the layout gets narrower. Is there a way to do this either via javascript or CSS?

Code:

I would like to resize the height and width of all of the containers so that at certain breakpoints the Layout changes it's grid setting. Currently it seems that the grid CSS is all being placed inline, so you can't overwrite that with a media query in the CSS. I've also tried using a jQuery function on window resize to set the options of the tile layout, but the layout doesn't change and some of the content within the containers disappears.

Window resize code:

Thanks in advance,

Nick

Hello,

I use Nuget AspNet.Core (2020.1.406) but "Html.Kendo().TileLayout()" is not found...

Thanks

Nathan