Styling for Dialiog in .NET Core

[Danielle]

I'm wondering if there is any support for styling a Dialog in the .net core version of telerik that I am trialling right now?  The documentation lists the ability to add a cssclass but that is only for the button, not for the entire dialog itself, I need to replicate previous functionality we were using where a cssclass is applied to the object in javascript when the dialog has been open for a certain amount of time.

This was the only documentation I could find and it's only able to add a class to the button, not the entire dialog.

Configuration, methods and events of Kendo UI Dialog - Kendo UI for jQuery (telerik.com)

[Alexander]

Hi Danielle,

Thank you for choosing the Telerik UI for ASP.NET Core product.

Based on my current understanding, the desired outcome is to incorporate a Telerik UI for ASP.NET Core Dialog incarnation within your current application. Am I assuming correctly?

If this is the case, at this stage there is no built-in configuration for styling each of the DOM components that the Dialog is comprised of via built-in API configuration other than the buttons.

Nevertheless, in the context of the Telerik UI for ASP.NET Core Dialog please allow me to go through such an approach in a more decoupled manner:

Dialog Content:

In order to embed any arbitrary class within the Dialog's content a possible recommendation would be to utilize the .HtmlAttributes() API configuration of the component.

Here is an example:

@(Html.Kendo().Dialog()
         .Name("dialog")
         .HtmlAttributes(new { @class = "myClass"})
)

This would produce the following result within the rendered HTML markup:

Buttons Styling:

To embed CSS classes to the existing actions you can utilize the built-in Actions.Add.CssClass() which I presume you already might be aware of. But nonetheless, here is an example configuration scenario:

@(Html.Kendo().Dialog()
    .Name("dialog")
    ...
    .Actions(actions =>
    {
        actions.Add().Text("Skip this version").CssClass("redBtn");
        actions.Add().Text("Remind me later").CssClass("whiteBtn");
        actions.Add().Text("Install update").CssClass("greenBtn");
    })
)

This would then supplement each of the specified classes to the respective buttons' HTML markup:

Title and Actions containers:

In order to further style both the title and action containers a possible recommendation would be to incorporate the following set of CSS rules:

<style>
  .k-dialog-titlebar{
      background-color:black;
      color:white;
  }
  .k-dialog-actions{
      background-color:black;
  }
</style>

Taking the aforementioned suggestions into consideration will allow you to customize the Dialog identically to the following:

For your convenience, here is a Telerik REPL example that further depicts the mentioned above:

• Telerik REPL for ASP.NET Core Example

Finally, I would like to mention that you can instantiate a trial license, particularly for the Telerik UI for ASP.NET Core suite. This will enable you to receive timely support and open separate ticket threads that will be processed through our internal support system as well. 

Kind Regards,
Alexander
Progress Telerik

[Danielle]

Alexander - thank you for the thorough explanation! I will try to put that in place.

[Danielle]

I'm still a little confused.  The format of my dialog is using TagHelper, not HTMLHelper.  I tried adding a class to the main dialog and it only applies the class to the content section.  Honestly it makes very little sense that the ID and the class are added to just the content section and not to the entire dialog.

 

        <kendo-dialog name="dlgSession" title="Warning" width="375" modal="false" on-close="onSessionDLGClose" class="warning"
                      on-open="onSessionDLGOpen" visible="false" >
            <actions>
                <action text="Ok" primary="true" css-class="btnStandard" click="sessionRenew"></action>
            </actions>
            <content>
                <p id="spTimeOutCurrentExpiration">Your current session will expire in <br /><span id="spnTimeoutPopup"></span></p>
                <br />
            </content>
        </kendo-dialog>

This results in the following html rendered:

 

Is there any way to add a class to the entire element using the TagHelper method?

[Alexander]

Hi Danielle,

I agree with your point of view that at first glance, adding a class directly to the content of the Dialog may seem counter-intuitive at first glance.

By design, the content encapsulated all Window custom content (div.k-window-content), thus this is the reason. Nonetheless, there are other alternatives to supplementing an arbitrary class to the wrapper element of the component.

One of which is suggested in the following resource:

• https://stackoverflow.com/questions/51794223/how-to-specify-custom-css-class-for-kendo-window

Although the example tackles a Kendo UI for jQuery Window, an identical approach is also feasible for the Dialog, as it is a derivative of the Window component.

Nonetheless, for your convenience here is a revised Telerik REPL example that tackles the previously mentioned sample with a TagHelper incarnation:

• Telerik REPL for ASP.NET Core Example (Revised)