Dialog change kendo.confirm title

[Seyfor]

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]

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

 

 

[Chris]

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]

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

[Jonathan]

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.

[Jonathan]

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]

I suggest you hide some css to shrink it too because that result in a huge margin up top.

[Seyfor]

Thank you.

[Greg]

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");

[Ben]

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]

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]

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]

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]

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]

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

[Chuck]

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]

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.