This is a migrated thread and some comments may be shown as answers.

Grid "Busy" control from Theme Builder

4 Answers 174 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Joel asked on 07 Jan 2020, 10:37 PM

I used your theme builder which... thank you. These things are complicated.

I love what it gave me except for the busy indicators. I swear, I thought I was being punked the first time I saw this. These are horrendous. Prior to discovering the theme builder, I was going just without anything from the theme builder and I had one large circular motion busy indicator. That was awesome.

How do I get back there? Can you tell me how to use my theme except go back to the previous busy indicator?

To create my theme, I picked the bootstrap v3 theme and change some colors... then downloaded it. The builder itself doesn't let you see the busy indicator on the grid so you have to use the theme to see what it provides.

Thanks for your help,

Joel

4 Answers, 1 is accepted

Accepted

answered on 10 Jan 2020, 05:32 PM

kendo-custom.zip

Hi, Joel,

Thank you for the information about this rather interesting event.

I tried to reproduce it by downloading the BlueOpal theme from the ThemeBuilder in a sample attached here to no avail. Remember to include the common file for the theme before the custom css file, in this case - kendo.common.css:

https://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling#using-the-less-theme-builder

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css" />

The loading indicator is directed by this class:

.k-loading-image {
    background-image: url(https://kendo.cdn.telerik.com/2019.3.1023/styles/BlueOpal/loading-image.gif);
}

You can inspect it if you just type this in the browser console which should show one loading indicator over the body:

kendo.ui.progress($("body"),true)

If you have any idea how we can reproduce this, please let us know the steps we should take.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.

answered on 10 Jan 2020, 07:35 PM

gridverybusy.png

gridsortabusydouble.png

You nailed it. I did not have the kendo.common.min.css posted anywhere in my _layout page.

I have attached pictures of the tiled busy indicator (GridVeryBusy.PNG). Then, the result after I put in the reference to the min.css (GridSortaBusyDouble.PNG).

So, right now it looks like I have 2 busy indicators running; the .gif and another rotation with the thin black line.

Can you tell me how to:

Show gif but turn off black line rotation? Then, make gif fill 25% of the area of the grid (make bigger)
Show black line rotation and turn off gif.

_Layout header that works:

<html>

<head>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>@Glossary.Company Portal - @ViewData["Title"]</title>

<link href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />

<link href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.bootstrap-v4.min.css" rel="stylesheet" type="text/css" />

<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jszip.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.aspnetmvc.min.js"></script>

<environment names="Development">

<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" />

<link rel="stylesheet" href="~/css/site.css" />

<link rel="stylesheet" href="~/css/kendo.custom.css" />

</environment>

<environment names="Staging,Production">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"

asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"

asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />

<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />

<link rel="stylesheet" href="~/css/kendo.custom.css" asp-append-version="true" />

</environment>

</head>

answered on 15 Jan 2020, 04:34 PM

Hello, Joel,

From the provided image, it appears that there is another Kendo UI Theme included - may be one of our SASS themes? It is better not to include multiple CSS themes - just one common and a theme file for the LESS OR the single SASS CSS file.

The black circle does not belong to the LESS Blue Opal theme and if you would like to increase it, this CSS does the job because the SASS themes use a font icon and not sprites:

    <style>
      .k-loading-image::after, .k-loading-image::before {
        font-size: 12em;
      }
    </style>

If you want to carry on with the gif, keep in mind that it is a sprite, and it might not look so good bigger but to control it, this CSS should do the trick:

    <style>
      .k-loading-image {
        background-size: 25%;
      }
    </style>

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.