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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

selecting event firing incorrectly

Thread ID:

Created:

Updated:

Platform:

Replies:

144760 May 21,2019 01:19 PM UTC May 27,2019 11:57 AM UTC ASP.NET Core - EJ 2 1
loading
Tags: Tabs
Ian
Asked On May 21, 2019 01:19 PM UTC

Hi,

I've been experimenting with tab control wizard demo and can't make sense of when exactly the 'selecting' event is supposed to trigger. I've added some console logging statements in two functions and the output from these suggests that there is a problem with the selecting event firing incorrectly. The event is firing each time a tab is disabled, and the values for previousIndex and selectedIndex also seem incorrect.

I've changed the tabSelecting event handler to the following:

    function tabSelecting(e) {
        console.log("+++++++++++++++++++++++++");
        console.log("tabSelecting event fired");
        console.log("name: ", e.name);
        console.log("previousIndex: ", e.previousIndex);
        console.log("selectedIndex: ", e.selectedIndex);
        console.log("+++++++++++++++++++++++++");
        if (e.isSwiped) {
            e.cancel = true;
        }
    }

and changed part of the tabNavigations to the following:

            case "searchNext":
                /* Validate the Source, Destination, Date and Class chosen and proceed only if all the fields are selected */
                if (!ej.base.isNullOrUndefined(startPoint.value) && !ej.base.isNullOrUndefined(endPoint.value) &&
                    !ej.base.isNullOrUndefined(ticketType.value) && !ej.base.isNullOrUndefined(journeyDate.value)) {
                    if (!ej.base.isNullOrUndefined(startPoint.value) && startPoint.value === endPoint.value) {
                        document.getElementById("err1").innerText = "* Arrival point can\"t be same as Departure";
                    }
                    else {
                        console.log("-------------------------");
                        console.log("Beginning of else block for searchNext case statement")
                        console.log("disabling tab: 0");
                        tabObj.enableTab(0, false);
                        console.log("enabling tab: 1");
                        tabObj.enableTab(1, true);
                        filterTrains(args);
                        console.log("selecting tab: 1");
                        tabObj.select(1);
                        console.log("End of else block for searchNext case statement")
                        console.log("-------------------------");
                        document.getElementById("err1").innerText = "";
                        document.getElementById("err2").innerText = "";
                    }
                }
                else {
                    document.getElementById("err1").innerText = "* Please fill all the details before proceeding";
                }
                break;

The console output is as follows:

-------------------------
wizard:201 Beginning of else block for searchNext case statement
wizard:202 disabling tab: 0
wizard:102 +++++++++++++++++++++++++
wizard:103 tabSelecting event fired
wizard:104 name:  selecting
wizard:105 previousIndex:  0
wizard:106 selectedIndex:  0
wizard:107 +++++++++++++++++++++++++
wizard:102 +++++++++++++++++++++++++
wizard:103 tabSelecting event fired
wizard:104 name:  selecting
wizard:105 previousIndex:  0
wizard:106 selectedIndex:  0
wizard:107 +++++++++++++++++++++++++
wizard:204 enabling tab: 1
wizard:207 selecting tab: 1
wizard:102 +++++++++++++++++++++++++
wizard:103 tabSelecting event fired
wizard:104 name:  selecting
wizard:105 previousIndex:  0
wizard:106 selectedIndex:  0
wizard:107 +++++++++++++++++++++++++
wizard:209 End of else block for searchNext case statement
wizard:210 -------------------------

Can you please clarify what the correct behaviour here should be.

Thanks

Ian

Karthigeyan Krishnamurthi [Syncfusion]
Replied On May 27, 2019 11:57 AM UTC

Hi Ian, 
 
Greetings from Syncfsuion. 
 
Selecting will be triggered once the tab item is clicked just like action begin action. When the tab item is interacted (enable / disable), Selecting will be triggered and the previous tab item values will be maintained in previousIndex and selectedIndex. For example, when the 2nd index item is selected then its previousIndex (0) and selectedIndex (1) will be based on 1st index tab item. We have modified the wizard sample, so that Selecting event will be triggered twice instead of thrice. 
 
function tabNavigations(args) { 
    switch (args.target.id) { 
        case 'searchNext': 
        debugger 
            /* Validate the Source, Destination, Date and Class chosen and proceed only if all the fields are selected */ 
            if (!ej.base.isNullOrUndefined(startPoint.value) && !ej.base.isNullOrUndefined(endPoint.value) && 
                !ej.base.isNullOrUndefined(ticketType.value) && !ej.base.isNullOrUndefined(journeyDate.value)) { 
                if (!ej.base.isNullOrUndefined(startPoint.value) && startPoint.value === endPoint.value) { 
                    document.getElementById('err1').innerText = '* Arrival point can\'t be same as Departure'; 
                } 
                else { 
                  console.log("-------------------------"); 
                    // no select needed 
                        console.log("Beginning of else block for searchNext case statement")                       
                         console.log("enabling tab: 1"); 
                         tabObj.enableTab(1, true); 
                          console.log("disabling tab: 0"); 
                        tabObj.enableTab(0, false); 
                        filterTrains(args); 
                        console.log("End of else block for searchNext case statement") 
                        console.log("-------------------------"); 
                } 
            } 
            else { 
                document.getElementById('err1').innerText = '* Please fill all the details before proceeding'; 
            } 
            break; 
        case 'bookTickets': 
            /* Based on the selected station generate Grid content to display trains available */ 
            if (availTrainGrid.getSelectedRecords() === undefined || availTrainGrid.getSelectedRecords().length === 0) { 
                document.getElementById('err2').innerText = '* Select your convenient train'; 
            } 
            else { 
                // no select needed 
                tabObj.enableTab(2, true); 
                tabObj.enableTab(1, false); 
                document.getElementById('err2').innerText = ''; 
            } 
            break; 
        case 'confirmTickets': 
            /* Get the Passenger details and validate the fields must not be left empty */ 
            var name = document.getElementById('pass_name1'); 
            var age = document.getElementById('pass_age1'); 
            var gender = document.getElementById('pass_gender1'); 
            if (name.value === '' || age.value === '' || gender.value === '') { 
                document.getElementById('err3').innerText = '* Please enter passenger details'; 
            } 
            else { 
 
              // no select needed 
                tabObj.enableTab(3, true); 
                tabObj.enableTab(2, false); 
                document.getElementById('err3').innerText = ''; 
                finalizeDetails(args); 
            } 
            break; 
    } 
} 
 
Regards, 
Karthi 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon