Anything like .TextWidth in Javascript

[szlamany]

I am using a slickgrid tool and it has column width settings you do up front when defining how the grid will be created.

At any rate - I would like to "measure" the size of the text I have in array's filling this slickgrid - something like you have in VB.Net with .TextWidth where you pass a string with some font-like object and it tells you the pixel width or something to that affect.

Thanks!

[penagate]

Yes, but only by putting the text into an element, adding that element into the DOM, and retrieving its calculated width — an expensive process if you are measuring the width of each cell to calculate the ideal column width.

[szlamany]

I am thinking of doing this server-side in VB.Net and handing the figure off to the client.

[penagate]

OK, but you can't rely on the client text metrics matching those of the server.

I thought of a better solution: just find the longest string and give that as the column width in ex units.

[szlamany]

I wrote this function - and I'm calling it on an array of data feeding a jQuery slickgrid

        function textWidth(strText) {
            if (strText.length == 0) {
                return 0;
            }
            var wesWidth = $("#acs-text-width");
            if (wesWidth.length == 0) {
                wesWidth = $("<span id='acs-text-width'></span>").appendTo("body");
            }
            return wesWidth.html(strText).outerWidth();
        }

with this css

#acs-text-width
{
    position: absolute;
    left: -1000px;
    top: -1000px;
}

It seems fast at the moment - I'll have to get more experience with larger datasets over the next few days.

[penagate]

Did you try just giving the width in ex or em?

[szlamany]

Did you try just giving the width in ex or em?

I'm not sure what you mean by this?

I'm filling a column object that a slick grid is going to render with code like this

columnDefinition = { id: propertyName,
    name: strCInfo,
    toolTip: "",
    field: propertyName,
    width: String(intCInfo),
    resizable: true,
    sortable: true,
    cssClass: strCss
};
objNewColumn = new Object();
mergeObjects(objNewColumn, columnDefinition);
newColumns.push(objNewColumn);

And most of the time I use the textwidth of the heading to drive the value of intCInfo.

intCInfo = 0;                               // clear the width value
.
. ... other metadata rules go here
.
if (intCInfo == 0) {
    intCInfo = textWidth(strCInfo) + 21;    // use heading
}

But sometimes the "column" name from the SQL has a bit of metadata as a prefix - ~wide causes it to run down the column measuring text. > causes it to make the column right-justified for numbers

if (strCInfo.length >= 5) {                 // check for ~wide rule
    if (strCInfo.substring(0, 5) == "~wide") {
        strCInfo = strCInfo.substring(6);
        intCInfo = textWidth(strCInfo) + 21;
        for (var i = 0; i < arrTotals.length; i++) {
            if ((arrTotals[i]["~font"] || "") == "BOLD") {
                intCTemp = textWidth(arrTotals[i][propertyName], true) + 10;
            } else {
                intCTemp = textWidth(arrTotals[i][propertyName], false) + 10;
            }
            if (intCTemp > intCInfo) {
                intCInfo = intCTemp;
            }
        }
    }
}

strCss = "";
if (strCInfo.length >= 1) {
    if (strCInfo.substring(0, 1) == ">") {
        strCInfo = strCInfo.substring(1);
        strCss = "acs-cell-number";
    }
}

I just had to add the TRUE/FALSE to TEXTWIDTH to handle another property - a row property - that drives the row towards a CSS for BOLD and colored. That's what that IF is that I added above in the row loop - if ((arrTotals[i]["~font"] || "") == "BOLD")

Now my function looks like this

function textWidth(strText, blnBold) {
    if (strText.length == 0) {
        return 0;
    }
    var strId = "acs-text-width" + (blnBold ? "-bold" : "");
    var wesWidth = $("#" + strId);
    if (wesWidth.length == 0) {
        wesWidth = $("<span id='" + strId + "'></span>").appendTo("body");
    }
    return wesWidth.html(strText).outerWidth();
}

The bold edit was needed to fix the following image

[szlamany]

Doesn't everyone write crazy sql like this

If @Detail$N_Y='N'
Begin
Select	 'FIXED'							"~fixed"
	,'BOLD'								"~font"
	,'1'								"~sort"
	,Convert(varchar(10),@Start_Date,101) + ' to '
	+ Convert(varchar(10),@End_Date,101)				"~wide~Date Range"
	,Min(RE.ReceiptNo)						"First Receipt"
	,Max(RE.ReceiptNo)						"Last Receipt"
	,Count(Distinct RE.ReceiptNo)					">Receipt Count"
	,Count(Distinct Case When RL.Payment='CHECK' Then RE.ReceiptNo End)
									">Receipt Count (Checks)"
	,Convert(varchar(20),Sum(Case when RL.Payment='CASH' 
		Then dbo.GetPayRecExt_F(RL.Quantity,RL.Price,RL.PriceFloor,RL.PriceCeiling) Else 0 End),1)
									">Total Cash Amount"
	,Convert(varchar(20),Sum(Case when RL.Payment='CASH' 
		Then 0 Else dbo.GetPayRecExt_F(RL.Quantity,RL.Price,RL.PriceFloor,RL.PriceCeiling) End),1)
									">Total Checks Amount"
	,Convert(varchar(20),Sum(dbo.GetPayRecExt_F(RL.Quantity,RL.Price,RL.PriceFloor,RL.PriceCeiling)),1)
									">Total Amount"
From ReceiptLines_T RL
Left Join Receipt_T RE on RE.ReceiptNo=RL.ReceiptNo and RE.RType=RL.RType
Left Join ReceiptItems_T RI on RI.Class=RL.Class and @Type like RI.OffId
Where RE.RDate Between @Start_Date and @End_Date and RL.RType=@Type
Union All
Select	 ''								"~fixed"
	,''								"~font"
	,'2'+Convert(varchar(8),RE.RDate,112)+'1'	"~sort"
	,Convert(varchar(10),RE.RDate,101)
	,Min(RE.ReceiptNo)						"First Receipt"
	,Max(RE.ReceiptNo)						"Last Receipt"
	,Count(Distinct RE.ReceiptNo)			">Receipt Count"
	,Count(Distinct Case When RL.Payment='CHECK' Then RE.ReceiptNo End)
											">Receipt Count (Checks)"
	,Convert(varchar(20),Sum(Case when RL.Payment='CASH' 
		Then dbo.GetPayRecExt_F(RL.Quantity,RL.Price,RL.PriceFloor,RL.PriceCeiling) Else 0 End),1)
											">Total Cash Amount"
	,Convert(varchar(20),Sum(Case when RL.Payment='CASH' 
		Then 0 Else dbo.GetPayRecExt_F(RL.Quantity,RL.Price,RL.PriceFloor,RL.PriceCeiling) End),1)
											">Total Checks Amount"
	,Convert(varchar(20),Sum(dbo.GetPayRecExt_F(RL.Quantity,RL.Price,RL.PriceFloor,RL.PriceCeiling)),1)
											">Total Amount"
From ReceiptLines_T RL
Left Join Receipt_T RE on RE.ReceiptNo=RL.ReceiptNo and RE.RType=RL.RType
Left Join ReceiptItems_T RI on RI.Class=RL.Class and @Type like RI.OffId
Where RE.RDate Between @Start_Date and @End_Date and RL.RType=@Type
Group by RE.RDate
Order by 3
End

I'm reusing about 12 years worth of T-SQL SPROCS that used to render in VB6 MS Flex Grids!! VB6 did all this text measuring really fast...