Grid Header Custom Shortcut to populate column data

Discontinued products
#1

I would like to have a select box in the grid header, select a value, and have that value populate all of the cells for that column. I can’t find any good examples of how to do that with:
grid._in_header_custom_label=function(tag,index,data)

In the image below, you would a value in the drop down all the cells in the column would be populated with that value. Can you provide an example or the best way to do that?

image
image977×173 15.9 KB

Regards,

Rich

#2

Hello @rherring,

Could you please clarify on which Suite version you are referring, as 5.x and 6.x(and later) have significant different API.

Kind regards,

#3

Using version 3.5 Pro of the Grid.

Thanks,

Rich

#4

Hello @rherring,

Thank you for clarification.

Here is the example of the custom shortcut for the grid to populate column data on option select:

dhtmlXGridObject.prototype._in_header_custom_label=function(t,i,c){
//you may replace the using html select element with your preferred solution if you want to
    var selectEl = `<select><option value="0"></option><option value='A'>A - Cost is approved</option><option value='D'>D - Credit Memo Payback Denied</option></select>`
    t.innerHTML=c[0]+selectEl+c[1];
    var self=this;
    t.getElementsByTagName("select")[0].onclick=function(e){
        (e||event).cancelBubble=true;
    }
    t.getElementsByTagName("select")[0].onchange = function(e){
        self._build_m_order();
        var j=self._m_order?self._m_order[i]:i;
        const selectedIndex = this.selectedIndex;
        const selectedText = this.options[selectedIndex].text;
        self.forEachRowA(function(id){
            var c=this.cells(id,j);
            c.setValue(selectedText);
            c.cell.wasChanged = true;
            this.callEvent("onEditCell",[1,id,j,selectedText]);
        });
        (e||event).cancelBubble=true;
    }
}

Please, make sure to define it before creating the dhtmlxGrid constructor.

Here is the snippet demonstrating the usage of such custom shortcut:
http://snippet.dhtmlx.com/5/61e941abf

Kind regards,

#5

Siarhei,

Thanks so much, the example was perfect. I ran into one issue, if the one of the cells in the column is being edited and you pick the drop down, when the drop down overwrites the value, you get a parent child node error. I fixed it by putting self.editStop() before the for each row, to make sure the cell is closed.

Regards,

Rich

1 Like