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

Grid "Busy" control from Theme Builder

4 Answers 9 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Joel asked on 07 Jan 2020, 10:37 PM

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

Theme Builder Link

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

Sort by
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 07 Jan 2020, 10:54 PM
I played with this a little more and it seems that the busy indicators end up "tiled" instead of one big one centered in the middle of it.  I downloaded the Blue Opal theme and, after finishing my seizure, realized what it is doing.  How do I get one large busy indicator in the middle of the grid when it is waiting for data instead of 1000 of them?
0
Accepted
Alex Hajigeorgieva
Telerik team
answered on 10 Jan 2020, 05:32 PM

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.
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 10 Jan 2020, 07:35 PM

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" />
 
 
    <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">
              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>

 

0
Alex Hajigeorgieva
Telerik team
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.
Tags
Grid
Asked by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Alex Hajigeorgieva
Telerik team
Share this question
or