Basic setup in an MVC project

[DoomerDGR8]

I see the demo and the setup instructions make no sense to me because the JS that is checking existing theme goes as:

<script>
    $(document).ready(function () {
        // Initialize ripple container
        if (kendoTheme == "material-v2") {
            $(".row").kendoRippleContainer();
            $(".demo-section").show();
        } else {
            $(".demo-section").hide();
        }
    });
</script>

[Dimitar]

Hello Hassan,

The Kendo UI RippleContainer widget provides the Material ink ripple effect for the Kendo UI components. The ripple effect is compatible only with the Sass-based Material theme, as it is strictly related to material design.

All you need to do in order to utilize the RippleContainer is reference the kendo.material-v2 theme and then initialize the container:

<div id="example">
  <button class="k-button">Default Button</button>
</div>

<script>
  $(document).ready(function(){
    $("#example").kendoRippleContainer();
  });
</script>

The referred code in the demo is specific for the demo to allow only showing the Ripple effect when the Material v2 theme is selected from the Theme Chooser. You should not be using this code in the current scenario.

In terms of the other questions:

- In terms of Bootstrap - it depends what part of the framework you are using in combination with the Kendo UI widgets. In general we recommend using Bootstrap 3 when working with the Less-based themes, and respectively use Bootstrap 4 when working with the Sass-based themes (current scenario).

- In terms of setting up the RippleContainer across the application, you could initialize it on the body element in the _Layout.cshtml of the application:

<script>
      $(document).ready(function(){
        $("body").kendoRippleContainer();
      });
</script>

I hope this helps. In case you have any additional questions, please let me know.

Regards,
Dimitar
Progress Telerik