PROBLEM WITH ENABLE DRAGANDDROP METHOD IN THE GRID

HI,
When i am enabled a drag and drop option for the grid
and i added few row to the grid which has the html tag
the radio,listbox,combobox,textbox,textarea are freezed.
i can,t able to change and enter any values in the elements of html :smiley: :smiley:

And the elements are working fine when the enabledraganddrop is false

Unfortunately the issue cannot be reproduced locally.
If the problem still occurs for you please, provide with any kind of sample of your code with the init of your code and the generated xml/json used for the loading data to the grid.

Hi,
I am also getting same issue, unable to focus on the textbox while enable the drag and drop.

please find sample program here.

tabbar.addTab(id, title, width, pos, active, closable);
var tab = tabbar.tabs(id);
tabGrid = tab.attachGrid();
tabGrid.enableMultiselect(true);
activeTab = tab;
activeTabGrid = tabGrid;

var component = new Component(id, title, ‘Tab’, true, true, false, ‘’, false, ‘’, false, ‘’, ‘’, ‘’);
tabs[id] = new TabContainer(tab, component);

// tabGrid.setIconsPath(‘./JavaScripts/dhtmlx4/’+defaultTheme+‘/imgs/’);
tabGrid.setHeader(“Item,ItemType,Options”);
tabGrid.setColumnIds(“Item,ItemType,Options”);
tabGrid.setColTypes(“ed,ro,ro”);
//tabGrid.setColSorting(‘str,str,str’);
tabGrid.setInitWidthsP(‘50,45,5’);
tabGrid.setColAlign(‘left,left,center’);
tabGrid.setNoHeader(true);
tabGrid.init();
tabGrid.enableMultiselect(true);
tabGrid.enableDragAndDrop(true);
tabGrid.enableColSpan(true);
tabGrid.attachEvent(“onDrop”, function(sId, tId, dId, sObj, tObj, sCol, tCol) {
this.forEachRow(function(id) {
var index = this.getRowIndex(id);
var comp = this.getUserData(id, ‘component’);
if(comp!==null)
{
comp.catOptionOrder = index + 1;
}
});

});

tabGrid.attachEvent(“onDrag”, function(sid, tid, sobj, tobj) {

  if (sobj !== tobj)
  {
     // activeTabGrid.enableDragAndDrop(false);
     var d = optionsDataView.get(sid);
     var index = this.getRowIndex(tid);
     var component = Object.create(_components[sid - 1]);
     var rowId; //= this.getRowsNum() + 1;
     component.catOptionOrder = index;
     rowId = newAddCATOptions + ':' + count;
     count++;
     if (component.type === 'Label') {
        component.name = component.name + labelCount++;
        this.addRow(rowId, [component.title], index);
        this.setColspan(rowId, 0, 2);
     } else if (component.type === 'Text Box') {
        component.name = component.name + textboxCount;
        textboxCount++;
        //  this.addRow(rowId, [component.title, component.html], index);
        //alert("index"+index);
     } else if (component.type === 'Text Area') {
        component.name = component.name + textareaCount;
        textareaCount++;
        //  this.addRow(rowId, [component.title, component.html], index);
     } else if (component.type === 'Check Box') {
        component.name = component.name + checkboxCount;
        checkboxCount++;
        //   this.addRow(rowId, [component.title, component.html], index);
     } else if (component.type === 'Radio') {
        component.name = component.name + radioCount;
        radioCount++;
        //   this.addRow(rowId, [component.title, component.html], index);
     } else if (component.type === 'Combo Box') {
        component.name = component.name + comboCount;
        comboCount++;
        //   this.addRow(rowId, [component.title, component.html], index);
     } else if (component.type === 'List') {
        component.name = component.name + listCount;
        listCount++;

     }
     this.setUserData(rowId, 'component', jQuery.extend(true, {}, component));
     component.redraw(EventSourceTypes.ControlStyle);
     if (component.type !== 'Label') {
        this.addRow(rowId, [component.title, component.html], index);


        this.cellById(rowId, 1).setValue(component.html);
     }
     // activeTabGrid.enableDragAndDrop(true);
     for (var i = 0; i < this.getRowsNum(); i++)
     {
        var rowid = this.getRowId(i);
        var comp = this.getUserData(rowid, 'component');
        if(comp!==null)
        {
        comp.catOptionOrder = i + 1;
        }
     }


  } else
  {
     return true;
  }

});

please find the attachment, you can find the form design.

after we drag and drop we are enable to focus on the text filed and combo etc…,
But if we right click the focus is going as expected.

Please updated us ASAP.

Thanks in advance.


Unfortunately the problem cannot be reproduced locally.
If the issue still occurs for you please, provide with a complete demo, where the problem can be reconstructed locally.
Here you can find a tutorial about creating a complete demo:
docs.dhtmlx.com/auxiliary_docs__ … pport.html