pass information to dialog and recover using KO

[Juan Acosta]

Hi,

I'm integrating one application with Knockout and Synfusion. 

I have some doubts about the manage of the dialogs. 

https://help.syncfusion.com/aspnetmvc/dialog/how-to#create-a-confirmation-dialog-with-footer-section

I was following this page and I added custom events on OK or Cancel. 

However, the events are not triggered. 

<div class="control">

    @{

        Html.EJ().Dialog("basicDialog").Containment(".control").Title("Delete Container Confirmation").

            ContentTemplate(

            @<div class="cnt">

                The container will be permanently deleted and cannot be recovered. Are you sure?

            </div>

            ).Target(".control")

            .ShowOnInit(false)

            .EnableResize(false)

            .ShowFooter(true)

            .FooterTemplateId("sample")

            .ClientSideEvents(evt => evt.Close("onDialogClose")).Render();

    }

</div>

<script id="sample" type="text/x-jsrender">

    <div class="footerspan" style="float:right">

        @Html.EJ().Button("btn1").Size(ButtonSize.Mini).Height("30").Width("70").Text("Ok").ClientSideEvents(evt=>evt.Click("confirmDelete()"))

        @Html.EJ().Button("btn2").Size(ButtonSize.Mini).Height("30").Width("70").Text("Cancel").ClientSideEvents(evt => evt.Click("cancelDelete()"))

    </div>

    <!--<div class="condition" style="float:left; margin-left:15px">

        @Html.EJ().CheckBox("check1").Text("Dont ask me this again")

    </div>-->

</script>

<script>

        function openDialog() {

            $("#basicDialog").ejDialog("open");

        }

        function onDialogClose(args) {

            alert('Close');

        }

        function confirmDelete(args) {

            $("#basicDialog").ejDialog("close");

            alert('Delete');

        }

        function cancelDelete(args) {

            $("#basicDialog").ejDialog("close");

            alert('Cancel');

        }

    </script>

I'm calling the open function from KO view model. I was wondering if the events could be tied to the control and get a return of any flag with the user selection. 

ViewModel KO

$(document).on("click", ".kout-delete", null, function (ev) {

        var current = ko.dataFor(this);

        var selection = openDialog();

        if (selection=="OK")

              viewModel.lookupVCollection.destroy(current);

    });

Or if cannot return anything at least, that I can pass the current detail to the openDialog and into the     Html.EJ() .Dialog("dialog"). So, I won't lose the current detail.

Could you help me with this.

Kind regards.

Juan 

[Narayanasamy Panneer Selvam]

Hi Juan Acosta,   

  

Thanks for contacting Syncfusion Support.   

   

Query	Solution
However, the events are not triggered.	We were able to reproduce this issue with the shared code. This is because you had used Click event name as function in the ClientSideEvents. Please view the code changes in the below code example block:        @Html.EJ().Button("btn1").Size(ButtonSize.Mini).Height("30").Width("70").ClientSideEvents(evt=>evt.Click("Okbtn")).Text("OK")
Calling the open function from KO view model	We have prepared a sample with shared code using KnockOut, and the click event is working fine with our dialog control. We have prepared a sample with your requirements. Please find it in the sample link: http://www.syncfusion.com/downloads/support/directtrac/general/SYNCFU~2-2145978064.ZIP
if cannot return anything at least, that I can pass the current detail to the openDialog and into the     Html.EJ() .Dialog("dialog"). So, I won't lose the current detail.	To be clearer, opening a dialog doesn’t return any value. Can you please explain the exact scenario on what data you need to pass and which current detail should be maintained? Modify the shared sample based on your scenario and send it to us so that we can provide a solution.

  

     

Regards,
Narayanasamy P. 

[Juan Acosta]

Hi Narayanasamy,

I checked your solution and I found the issue. Also, I could connect to KO without any problems.
One question, could you check this ticket.
https://www.syncfusion.com/forums/125442/recover-dropdownlist-name-or-pass-additional-parameters-on-clientevents
The issue is kind of similar.
But the point is how to get the id of the referential object or pass an additional value in the events.
My point is how to pass values with the call reference. I notice the events have to be in the function name only
.ClientSideEvents(evt=>evt.Click("confirmDelete")
if I want something like
.ClientSideEvents(evt=>evt.Click("confirmDelete(10)")
having
function confirmDelete(args) {
}
The event stop working.

Could you give a hand with that.

Kind regards,
Juan

[Narayanasamy Panneer Selvam]

Hi Juan Acosta, 

 

Thanks for your update.   

   

Query	Solution
how to get the id of the referential object	We can get the id of current element and  particular element by the following way.  Code example:  function onOpen(args)    { alert("the corresponding id is :"  + this.element[0].id);            }  Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionMvcApplication6-735186300
how to pass values with the call reference	Currently we haven’t provided support for passing value to events. We have added it to our feature request list and it can be tracked through our Features Management System:    https://www.syncfusion.com/support/directtrac/features/EJMVC-5363

  

  

Regards,
Narayanasamy P.