Why does inner method's inside execute last?

Question

At following method i'm trying to get grid selected row. By the way, i use syncfusion component library. My question when i call the grid.rowSelected, function's inside works last. So i can't pass model in ajax. What's the reason of it ?

   function editPackage() {         
        var editPackageModel;
        var grid = document.getElementById("Grid").ej2_instances[0];
        grid.rowSelected = function(args) {
            console.log(args.data);*// works last*
            editPackageModel = args.data;*// works last*              
        }

        $.ajax({
            type: "GET",
            url: "/Package/Edit",
            contentType: "application/json; charset=utf-8",
            datatype: "json",
            data: editPackageModel,
            success: function (result) {
                $('#generalModal').html(result);
            },
            error: function () {
                alert("Dynamic content load failed.");
            }
        });
    }

Answer 1

I'm not sure exactly what is the situation with "grid", i assume you have that element ready before the function is called, so try this:

var grid = document.getElementById("Grid").ej2_instances[0];//Get node reference.
grid.rowSelected = function (args) {//Setup event listener.
    editPackage(args.data);//Pass the data from the event to your function
}


function editPackage(editPackageModel) {//Get the "model" and send ajax
    $.ajax({
        type: "GET",
        url: "/Package/Edit",
        contentType: "application/json; charset=utf-8",
        datatype: "json",
        data: editPackageModel,
        success: function (result) {
            $('#generalModal').html(result);
        },
        error: function () {
            alert("Dynamic content load failed.");
        }
    });
}