How to get width of PqGrid column dynamically

[Ajay]

I want to set the width of textbox in pQ grid column dynamically.
My issue is I am having textbox inside the PQ grid column.When the PQ column is expanded,the textbox width in the column need also to be expanded how can i achieve.

Here is my Code:
I am trying to set width from refresh event,but how can i get the width of pq grid column dynamically when expanded.
If there is any other way,Please let me know.

 var spokenPhraseColumnModel = [{
                title: nmc.strings.LeadingKeyword, dataIndx: 'LeadingKeyword', width: 200, editable: false, align: 'left', hidden: hideLeadingKeyword
            },
            {
                title: nmc.strings.SpokenPhrase, dataIndx: 'SpokenPhrase', width: 250, editable: false, align: 'left', render: function (ui) {
                    try{
                        var rowData = ui.rowData, dataIndx = ui.dataIndx;
                        var val = rowData[dataIndx];
                        if (!isReadOnly)
                            return "<input class='spokenPhrase nmc-text' type='text' maxlength='150' value='" + val + "' style='height:23px;width:190px;color:rgb(33,33,33) !important' />";
                        else
                            return "<span >" + val + "</span>";
                    }
                    catch (error) {
                        NMCApp.showNMCExceptionWindow(error);
                    }
                }
               
            },
            { title: nmc.strings.TrailingKeyword, dataIndx: 'TrailingKeyword', width: 200, editable: false, align: 'left', hidden: hideTrailingKeyword }];
            gridSpokenPhrase.pqGrid({
                width: 760,
                height: 70,
                showTop: false,
                showBottom: false,
                hoverMode: 'row',
                selectionModel: { type: 'row', mode: 'single' },
                bottomVisible: false,
                numberCell: false,
                roundCorners: false,
                sortModel: { on: false },
                wrap: false,
                colModel: spokenPhraseColumnModel,
                dataModel: { data: spokenPhrases },
                selectionModel: { type: 'row', mode: 'single' },
                refresh: function (evt, ui) {
                    var grid = $(this);
                    grid.find(".pq-grid-cell");
                    grid.find(".spokenPhrase").width("330px");
                }
            });

[paramvir]

it's simple: column width is column.width

and column is passed as ui property in the render callback.

Code: [Select]

var width = ui.column.width;
return "<input class='spokenPhrase nmc-text' type='text' maxlength='150' value='" + val + "' style='height:23px;width:"+width+"px;color:rgb(33,33,33) !important' />";


Moreover if you want the textbox to fill the full width of the cell, then you can set width of textbox as 100%

[Ajay]

Thanks it worked