Dynamic create and selected the Tab after row selected in grid

[Kenneth Tang]

Dear all,

We could create a dynamic tab with grid by using rowselected event. but please advance how could make it be selected and display on the top of the tabs.

the following code which we had

var totalItems = 0;

    function rowSelected(arg) {

        var content = document.getElementById('tab-content').value;

        var ajax = new ej.base.Ajax('/Home/_StaffView?GUID='+ arg.data.EM_GUID, 'GET', true);

        ajax.send().then();

        ajax.onSuccess = function (data) {

            var ctn2 = data;

            // Required tab item object formed by using textbox inputs

            var item = { header: { text: arg.data.EM_NAME }, content: ctn2 };

            totalItems = document.querySelectorAll('#element .e-toolbar-item').length;

            // Item object and the index argument passed into the addTab method to add a new tab

            tabObj.addTab([item], totalItems-1);

        }

    };

var totalItems = 0;

    function rowSelected(arg) {

        var content = document.getElementById('tab-content').value;

        var ajax = new ej.base.Ajax('/Home/_StaffView?GUID='+ arg.data.EM_GUID, 'GET', true);

        ajax.send().then();

        ajax.onSuccess = function (data) {

            var ctn2 = data;

            // Required tab item object formed by using textbox inputs

            var item = { header: { text: arg.data.EM_NAME }, content: ctn2 };

            totalItems = document.querySelectorAll('#element .e-toolbar-item').length;

            // Item object and the index argument passed into the addTab method to add a new tab

            tabObj.addTab([item], totalItems-1);

        }

    };

Thank a lot!

KennethT

[Karthigeyan Krishnamurthi]

Hi Kenneth, 

 

Syncfusion greetings. 

 

We suspect that your requirement is to focus the dynamically added Tab items and for the same below sample is prepared. 

https://www.syncfusion.com/downloads/support/forum/146799/ze/Tab-Grid634848804 

 

function onRowSelected(args) {  

    var selectedrecords = this.getSelectedRecords() 

    for (var i = 0; i < selectedrecords.length; i++) { 

        var title = selectedrecords[i].Employees; 

        var content = selectedrecords[i].Designation;   

        // Required tab item object formed by using textbox inputs 

        var item = { header: { text: title }, content: ej.base.createElement('pre', { innerHTML: content.replace(/\n/g, '<br>\n') }).outerHTML }; 

 

        totalItems = document.querySelectorAll('#defaultTab .e-toolbar-item').length; 

        tabObj.addTab([item], totalItems); 

        tabObj.selectedItem = totalItems; 

    } 

    tabObj.refresh(); 

} 

 

If we misunderstood your requirement, kindly share the requirement image to proceed further. 

 

Regards, 

Karthi