verticalAlign in editor.obj

Discontinued products Uncategorized discussions
#1

Hi,

This code won’t adjust the vertical alignment.

I tried adjusting it in the .CSS file, but no success.

Can you please tell me how it should be done.



function doOnRowSelected(rowID,celInd){

if (celInd == 2) {

mygrid.editCell();

this.editor.obj.style.verticalAlign=“middle”;

this.editor.obj.parentNode.style.verticalAlign=“middle”;

this.editor.obj.select();

}

}

#2

If you want to change vertical align - it can be done in dhtmlxgrid.css
    .dhx_combo_edit{
    .dhx_textarea{

In case of js-only solution, your code is correct, except of txt editor in FF, If you are using “txt” editor, the code will look as

this.editor.obj.style.verticalAlign=“middle”;

if (_isFF && this.editor.obj.firstChild ) this.editor.obj.firstChild.style.verticalAlign=“middle”;

#3

I’m using the “ed” editor.
I added vertical-align:middle; to .dhx_combo_edit in dhtmlxgrid.css - no change.
this.editor.obj.style.verticalAlign=“middle”; 
also produces no change
Since the cells are bigger because of an image in one cell, I’m trying to position both the cell data and the editor data so it looks and acts like a regular html textbox.
the csv data loads in FF3 and this.editor.obj.select() works well, but the csv data doesn’t even load in IE7

CODE:
var mygrid;
function doInitGrid(){
    mygrid = new dhtmlXGridObject(‘mygrid_container’);
    mygrid.setImagePath(“codebase/imgs/”);
    mygrid.setHeader(“a,Model,Qty,Price,b”);
    mygrid.setInitWidthsP("*,30,10,10,25");
    mygrid.setColAlign(“center,left,center,right,center”);
    mygrid.setSkin(“light”);
    mygrid.setColSorting(“na,str,int,na,na”);
    mygrid.setColTypes(“ch,ed,ed,price,img”);
    mygrid.setColVAlign(“middle”);
    mygrid.attachEvent(“onRowSelect”,doOnRowSelected);
    mygrid.init();
    mygrid.load(“silverdata.csv”,"",“csv”);
}
function doOnRowSelected(rowID,celInd){
    if (celInd == 2) {
        mygrid.editCell();
        this.editor.obj.style.verticalAlign=“middle”;
        this.editor.obj.select();
    }
}




CSV
1,ring,100,20,ASM001_small1.gif
2,ring,200,10,ASM001_small1.gif
3,ring,150,20,ASM001_small1.gif
4,ring,160,30,ASM001_small1.gif
5,ring,190,15,ASM001_small1.gif
#4

You need to add next line , to have the grid function correctly in all browser
    mygrid.enableMultiline(true) // render rows with non-default height correctly

The ed cell generates a textarea control when in editable state, the verticalAlign style will not change the align of text inside it, but if you know expected height of row , you can use paddings
if (celInd == 2) {
        mygrid.editCell();
        this.editor.obj.style.paddingTop=“10px”;

#5

Thank you.
This works perfectly by also adding a line for a negative marginBottom:

function doOnRowSelected(rowID,celInd){
    if (celInd == 2) {
        mygrid.editCell();
        this.editor.obj.style.paddingTop=“34px”;
        this.editor.obj.style.marginBottom="-34px";
        this.editor.obj.select();
    }
}