Anything like .TextWidth in Javascript

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!

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.

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

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.

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

Code:

---

        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

Code:

---

#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.

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

Quote:

---

Originally Posted by penagate

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

Code:

---

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.

Code:

---

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

Code:

---

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;
            }
        }
    }
}

---

Code:

---

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

Code:

---

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

Doesn't everyone write crazy sql like this :eek:

Code:

---

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...