Dialog change kendo.confirm title

3 Answers 1715 Views
General Discussions
Saop
Top achievements
Rank 1
Saop asked on 04 Oct 2016, 02:01 PM

Please open Dialog form.

How can I change title for dialog opened with kendo.confirm(... ?

May I suggest that you extend kendo.confirm method with optional second parameter for title.

 

Eduardo Serra
Telerik team
commented on 04 Oct 2016, 04:26 PM

Hello Matjaž,

It is not possible to change the title for a dialog opened with kendo.confirm. Generally, the browser's confirm dialog supports only a single parameter, the text, so that you can't change the title; take a look at Mozilla's documentation for example.

With the kendo.confirm, we are trying to imitate this behavior. If you still believe the developers should consider adding this feature in future releases, I encourage you to participate in the Kendo UI Feedback and Feature Request Portal and express your opinion.

I hope this helps.

Regards,
Eduardo Serra
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
Chris
Top achievements
Rank 1
commented on 21 Feb 2018, 04:12 PM

Really... is this how Telerik-developers think???? That's a huge disappointment...
I don't need you to "imitate"; I expect you to improve! Otherwise I might as well use the original browsers' confirm.
Ianko
Telerik team
commented on 23 Feb 2018, 12:11 PM

Hi Chris,

I can assure you that here, at Progress, we are looking into improving our products as per to the best understandings of our clients and the developers using Kendo UI. In order to best put all feedback, feature requests and ideas into a well-organized planning procedure we are using the feedback portal as a channel: http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback. This is why we encourage everyone to post ideas, feedback and opinion on the product there. That way every single item is evaluated and planned according to votes, which affects the importance of the task. That way we can make sure that every single feature/improvement is added based on exact demand.

With that said, I suggest you to vote for this item here: http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/suggestions/17024842-modify-the-title-of-the-predefined-dialogs. That way the task about including a title option in the predefined dialogs will gain more priority and put it closer to the to-do features. 

As for the predefined Dialogs, maybe, using imitate is a wrong word here. In terms of design concepts and specification of the provided predefined dialogs, the requirement was to create Alert, Confirm and Prompt dialogs that function just like the browser's predefined dialogs. The ones we provide, however, have the Kendo themes and stylization, which improves the UX behavior of the web application. Generally, when using a Kendo theme, the predefined dialogs will look like a part of the web application instead of a plain browser dialog. And that is the main idea of having the Kendo UI predefined dialogs.

I entirely understand that there are many cases that customization is needed. And there are application requirements that those predefined dialogs may not be suitable for. However, such needs can be also accomplished, by using directly the Kendo Dialog widget and define a dialog that best accomplishes the needs of the particular application. The Kendo Dialog is the base of the predefined widget and you can set it up the way you need it. 

Regards,
Ianko
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Jonathan
Top achievements
Rank 1
commented on 23 Feb 2018, 06:46 PM

Keep in mind that even if these Dialog reproduce the original browser Dialogs in behavior, there's a huge advantage to used them over.
When you use the browser dialogs after a page pop one a 2nd time the browser offer users an option to mute pop-up from the given site. While the Kendo being 100% HTML based dialogs, they bypass that browser feature. That and the aforementioned theme integration to them makes them a very must go alternative in my opinion.

3 Answers, 1 is accepted

Sort by
1
Accepted
Jonathan
Top achievements
Rank 1
answered on 04 Oct 2016, 08:13 PM
Hello!

Altho you cannot change the Title it's possible to hide it using css:

.k-dialog .k-window-titlebar .k-dialog-title {
        visibility: hidden;
    }
Jonathan
Top achievements
Rank 1
commented on 04 Oct 2016, 08:19 PM

I suggest you hide some css to shrink it too because that result in a huge margin up top.
Saop
Top achievements
Rank 1
commented on 05 Oct 2016, 05:09 AM

Thank you.
Greg
Top achievements
Rank 1
commented on 19 Jun 2018, 07:00 PM

the title in the dialog is in it's own html span, you can change the value using jquery (or straight javascript) with

$("span.k-dialog-title").html("New Title For Modal");

0
Ben
Top achievements
Rank 1
answered on 17 Oct 2016, 03:47 PM

If you want to replace the text of the kendo.confirm title, this CSS is working for me:

.k-confirm .k-window-titlebar::before {
    content: 'Confirmation';
}

.k-confirm .k-window-titlebar .k-dialog-title {
        visibility:collapse;
    }

I hope this helps,

Ben

 

Matt
Top achievements
Rank 1
commented on 27 Oct 2016, 12:51 PM

I had been using the MVC server wrappers however I also found you cannot set the title, however using the kendo.ui.Confirm you can use the following;

 

function onArchiveCustomer(e) {
    ....
    $("#confirm").kendoConfirm({
        title: "Archive",
        content: "Are you sure you want to <strong>Archive</strong> this Customer?",
        messages:{
            okText: "Archive"
        }
    }).data("kendoConfirm").result.done(function()
    {
      ......
Matt
Top achievements
Rank 1
commented on 27 Oct 2016, 12:53 PM

 
function onArchiveCustomer(e) {
        ....
        $("#confirm").kendoConfirm({
            title: "Archive",
            content: "Are you sure you want to <strong>Archive</strong> this Customer?",
            messages:{
                okText: "Archive"
            }
        }).data("kendoConfirm").result.done(function()
        {
         ...

 

Using the code above utilising the kendo.ui.Confirm you can set the title, previously I was using the MVC server wrappers but also found there was no way to set the title.  Hope this helps ...

samk
Top achievements
Rank 1
commented on 05 Sep 2018, 10:06 PM

I am calling this function on a button click to render a confirm dialog. It works fine when I click the button the first time. If I click again , it says "cannot  read property .... on undefined".Any help will be greatly appreciated.
samk
Top achievements
Rank 1
commented on 05 Sep 2018, 10:08 PM

I mean this fucntion

 

function onArchiveCustomer(e) {
        ....
        $("#confirm").kendoConfirm({
            title: "Archive",
            content: "Are you sure you want to <strong>Archive</strong> this Customer?",
            messages:{
                okText: "Archive"
            }
        }).data("kendoConfirm").result.done(function()
        {
         ...

Veselin Tsvetanov
Telerik team
commented on 07 Sep 2018, 12:59 PM

Hi Samk,

After being closed, the Kendo Confirm will be automatically destroyed and its HTML element will be removed from the DOM of the page. Therefore, in order to be able to open it again, you will need to append again its DOM element to the page:
$("#confirm").kendoConfirm({
  title: "Archive",
  content: "Are you sure you want to <strong>Archive</strong> this Customer?",
  messages:{
    okText: "Archive"
  }
}).data("kendoConfirm").result.done(function(){
  $('body').append($('<div id="confirm">'));
}).fail(function(){
  $('body').append($('<div id="confirm">'));
});

Here you will find a small sample implementing the above suggestion.

Regards,
Veselin Tsvetanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Chuck
Top achievements
Rank 1
Iron
answered on 03 Aug 2021, 07:37 PM

Set CSS to:

.k-dialog .k-window-titlebar .k-dialog-title {
height: 0px;
visibility: hidden;
}

SET JavaScript:


kendo.confirm("<div style='font-size: 24px; position: absolute; top: -4px'>Title here</div><div style='padding-top: 12px'>Body text here... Body text here...</div>").
then(function () {
//Ok
}, function () {
//Cancel
});

Result:

 

 

 

 

 

 

 

Veselin Tsvetanov
Telerik team
commented on 04 Aug 2021, 11:54 AM

Hi Chuck,

Thank you for your input in the discussion. The suggested alternative is a viable approach that will result in a Kendo Confirm with a custom title.

Tags
General Discussions
Asked by
Saop
Top achievements
Rank 1
Answers by
Jonathan
Top achievements
Rank 1
Ben
Top achievements
Rank 1
Chuck
Top achievements
Rank 1
Iron
Share this question
or