Dialog position and block one card

[Jacob]

Hello,

I used template dialog, and I would like the dialog could set the position.
I'm try to used this solution:
https://www.syncfusion.com/forums/131456/change-the-task-information-default-position
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.

[Buvana Sathasivam]

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. 

KanbanFeatures.cshtml 

@(Html.EJ().Kanban("Kanban") 

…………… 

.ClientSideEvents(eve => eve.ActionComplete("complete")) 

) 

 

 

<script> 

    

    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 

    } 

</script> 

Sample: http://www.syncfusion.com/downloads/support/forum/132810/ze/Process_bindings_-_Copy_position913440560  

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.  

API link: https://help.syncfusion.com/api/js/ejkanban#members:allowdraganddrop  

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. 

KanbanFeatures.cshtml 

@(Html.EJ().Kanban("Kanban") 

      ………… 

      .ClientSideEvents(eve => eve.CardDragStart("cardDragStart"))  // Card drag start event 

) 

 

<script> 

    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 

        } 

    } 

</script> 

Sample: http://www.syncfusion.com/downloads/support/forum/132810/ze/Process_bindings_-_Copy-47000907  

API Link: https://help.syncfusion.com/api/js/ejkanban#events:carddragstart  

Regards, 

Buvana S. 

 

[Jacob]

Thanks, the solution really work well.

[Narayanasamy Panneer Selvam]

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. 

 

Regards, 

Narayanasamy P.