detailInit: new record is bypassed by format option

[George]

Hi,

 

For some reason when I try to add a new record to my dataSource ….then refresh the grid  for my hierarchical table that uses detailInit,

 

…. the formatting is bypassed for my new record added to the dataSource.

 

 

After I add the new data to the JavaScript array... and refresh the grid, it does repopulate the child or detail grid:

 

 

But it doesn't appear to catch the format: "{0:c}"

 

 

I don't know why the new value (monetary) is getting bypassed with the format option? Here is my code for the detailInit(e):

 

functiondetailInitMainGrid(e) {

       console.log("IN: detailInitMainGrid()");
        var payCodeList = [];
         var data = _view.get("interimDS.interimPayrollRecords");

    //DEBUG:var data2 = e.data;
    
        $.each(data, function (index, value) {

            if (value.payCode != 'Total') {   // add NON-TOTAL records to data array//DEBUG://console.log("    LAST NAME:" + value.fullName + " : RECORD ID: " +value.interimPayrollRecordId);
                payCodeList.push({

                    interimPayrollRecordId: value.interimPayrollRecordId,
                    payCode: value.payCode,
                    amount: value.amount,
                    amountHrsMins: value.amountHrsMins,
                    monetary: value.monetary,

                });

            }
        });

    console.log("event data source: ID:" + e.data.interimPayrollRecordId + ", NAME: " + e.data.fullName);

    //var detailCell = e.detailCell;//detailCell.css("padding-left", "350px");
    

    $("<div/>").appendTo(e.detailCell).kendoGrid({
            dataSource:
            {
                data: payCodeList,
                serverPaging: false,
                serverSorting: false,
                serverFiltering: false,
                filter: { field: "interimPayrollRecordId", operator: "eq", value: e.data.interimPayrollRecordId }
            },
            scrollable: true,
            sortable: true,
            pageable: false,
            columns: [
                { field: "payCode", title: "Pay Code", width: "110px", attributes: { class: "child-table-details" } },
                { field: "amount", title: "Amount<br/>(HRS)", width: "50px", format: "{0:n}", attributes: { class: "child-table-details" } },
                { field: "amountHrsMins", title: "Amount<br/> (HRS:MIN)", width: "50px", attributes: { class: "child-table-details" } },
                { field: "monetary", title: "Monetary<br/>Amount", width: "50px", format: "{0:c}", attributes: { class: "child-table-details" } }
            ]
    });
    
}
 
 
    
                
                
    

I did  manage to debug through the creation of the child table (in the detailInit(e) function) when I click the little triangle on the left of the parent record, but it seems to bypass the new value I pushed to the JavaScript array structure and prints it out with our the $ or the trailing .00. I don't want to create a custom formatter in javascript, I think the format option for the monetary column should be working... but maybe there is something I am doing that causes it to malfunction or convert it to the monetary or currency format?

Thanks again for your help and patience,

George

 

[George]

If the value is "234.00" then it seems to not think of it as a float or double... because of the double quotes maybe? I tried it here in a dojo:

Untitled | Kendo UI Dojo (telerik.com)

Now if I could force that to be 234.00 without the "" I would be in business... but how?

[George]

Ok... using kendo.parseFloat() worked:

var monetary = "234.00"; //  the grid thinks its a string after its grabbed as input from a HTML textbox.
var monetaryAsFloat =  kendo.parseFloat(monetary); 

[George]

This is what I had to do to make the format option work, prior to adding it to my dataSource:

var monetary = "234.00"; //  the grid thinks its a string after its grabbed as input from a HTML textbox.
var monetaryAsFloat =  kendo.parseFloat(monetary); 

In my actual code I did it this way:

payCodeList.push({

    interimPayrollRecordId: value.interimPayrollRecordId,
    payCode: value.payCode,
    amount: value.amount,
    amountHrsMins: value.amountHrsMins,
    monetary: kendo.parseFloat(value.monetary)

});