We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Dialog position and block one card


I used template dialog, and I would like the dialog could set the position.
I'm try to used this solution:
But not worked, $(args.element).ejDialog("instance").model is undefined.
How to set the dialog position?

And other issue is about allowDragAndDrop.
Is any function could block one card in kanban columns?
function demo(){
        kanban = $('#Kanban').data('ejKanban');
    kanban.allowDragAndDrop = false;

This code could block all card in the kanban, but I just want block one card.

Thank you very much.

Best regards.

3 Replies

BS Buvana Sathasivam Syncfusion Team September 25, 2017 12:49 PM UTC

Hi Jacob, 

Thanks for using Syncfusion products. 

Query #1: “How to set the dialog position?” 

We have achieved your requirement when dialog form open event using actionComplete event.  In this event, you can change the position of the dialog wrapper using top and left of css property.  Please refer to the following code. 


.ClientSideEvents(eve => eve.ActionComplete("complete")) 
    function complete(args) { 
        var kObj = $("#Kanban").data("ejKanban"); 
        if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") { 
            $("#" + kObj._id + "_dialogEdit").ejDialog({ open: "open" }) // Dialog open event 
    function open(args) {  // Called when dialog form was opened using dialog open event 
        var kObj = $("#Kanban").data("ejKanban"); 
        var $dialogWrapper = kObj.element.find("#" + kObj._id + "_dialogEdit_wrapper");   // Get dialog wrapper 
        $dialogWrapper.css("top", "100px");   // Set Top of dialog form 
        $dialogWrapper.css("left", "100px");  // Set bottom of dialog form 

Please check the sample and let us know if we have misunderstood your requirement.  If so, provide more details (like modify to reproduce your issue on the attached sample or share your code) regarding your requirement so that we can check and provide a solution.      

Query #2: “Is any function could block one card in kanban columns?” 

If you set allowDragAndDrop as false, Kanban does not allowed all card drag and drop operations.  

If you wish to prevent drag and drop operation for particular card, you can set args.cancel as true on cardDragStart event.  You can also remove the class name of “e-kanban-draggedcard” on dragged card and target dragged clone on particular column. 

We have blocked drag and drop operation of card which consist of primary key ‘1’.  Please refer to the following code. 


      .ClientSideEvents(eve => eve.CardDragStart("cardDragStart"))  // Card drag start event 
    function cardDragStart(args) { 
        var primaryKey = args.model.fields.primaryKey; // Get primarykey of kanban 
        if (args.data[0][0][primaryKey] == 1) {   // If primary key of card is 1 then prevent drag and drop operation 
            args.cancel = true;    // Set cancel as true 
            args.draggedElement.removeClass('e-kanban-draggedcard');  // removed Kanban dragged card class 
            if (args.draggedElement.next().hasClass('e-targetdragclone')) 
                args.draggedElement.next().remove(); // target drag clone was rmoved 

Buvana S. 

JA Jacob September 30, 2017 06:21 AM UTC

Thanks, the solution really work well.

NP Narayanasamy Panneer Selvam Syncfusion Team October 2, 2017 11:24 AM UTC

Hi Jacob, 
We are glad to know that your problem is solved.  Please let us know if you need any assistances, we would be happy to assist you. 
Narayanasamy P.

Live Chat Icon For mobile
Up arrow icon