Razor syntax help in Client Detail Template for Grid

[Donna Stewart]

I have a grid in which I am using the client detail template and I need a little help with the syntax.  I am trying to do a fairly simple conditional against an item in the parent grid data.  When I start typing the syntax as I think it should be, I get "Preprocessor directives must appear as the first non-whitespace character on a line".  Here is what I am typing:

Minutes Early/Late: @if(#: PODInfo.MinutesEarlyLate #  > 0){  #: PODInfo.MinutesEarlyLate # Late  } else { On Time }

I am fairly new to Razor, and maybe here I need Javascript instead.  I have actually tried both, but it is the # syntax with which I think I am having trouble.

Thank you in advance for any help!

Donna

In case - here's the grid

@(Html.Kendo().Grid<GMCRepository.Models.DataServices.ShipmentInformation>().Name("ShipmentList")
.DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read.Action("ShipmentInfoList", "DataInquiry"))
)
.Columns(columns =>
{
    columns.Bound(shipment => shipment.TrackingNumber);
    columns.Bound(shipment => shipment.ShipDate);
    columns.Bound(shipment => shipment.ShipperInformation.Address.City);
    columns.Bound(shipment => shipment.ShipperInformation.Address.StateProvince);
    columns.Bound(shipment => shipment.RecipientInformation.Address.City);
    columns.Bound(shipment => shipment.RecipientInformation.Address.StateProvince);
    columns.Bound(shipment => shipment.AmountDue);
    columns.Bound(shipment => shipment.BillingInfo.BillToAccount);
    columns.Bound(shipment => shipment.CustomerReference);
})
.ClientDetailTemplateId("shipmentDetail-template")
)

Here's the client detail template:

<script id="shipmentDetail-template" type="text/x-kendo-template">
    <div class="shipment-grid-detail">
        <div class="row-fluid">
            <div class="span4 shipment-div">
                <h4>Shipper Information</h4>
                #: ShipperInformation.Name # <br />
                #: ShipperInformation.Company # <br />
                #: ShipperInformation.Address.AddressLine1 # <br />
                #: ShipperInformation.Address.AddressLine2 # <br />
                #: ShipperInformation.Address.City #, #: ShipperInformation.Address.State #  #: ShipperInformation.Address.PostalCode #, #: ShipperInformation.CountryCode #
            </div>
            <div class="span4 shipment-div">
                <h4>Recipient Information</h4>
                #: RecipientInformation.Name # <br />
                #: RecipientInformation.Company # <br />
                #: RecipientInformation.Address.AddressLine1 # <br />
                #: RecipientInformation.Address.AddressLine2 # <br />
                #: RecipientInformation.Address.City #, #: RecipientInformation.Address.State #  #: RecipientInformation.Address.PostalCode #, #: RecipientInformation.CountryCode #
            </div>
            <div class="span4 shipment-div">
                <h4>Shipment Information</h4>
                Ship Date: #: ShipDate # <br />
                Service: #: PackageInfo.Service # <br />
                Packaging: #: PackageInfo.PackageDescription # <br />
                Actual Weight: #: PackageInfo.ActualWeight.Weight # #: PackageInfo.ActualWeight.WeightUnit # <br />
                Billed Weight: #: PackageInfo.BilledWeight.Weight # #: PackageInfo.BilledWeight.WeightUnit # <br />
                Dimensions: #: PackageInfo.dimensions.DimLength # x #: PackageInfo.dimensions.DimWidth # x #: PackageInfo.dimensions.DimHeight # #: PackageInfo.dimensions.DimUOM # <br />
                Pieces: #: PackageInfo.Pieces #
            </div>
        </div>
        <div class="row-fluid">
            <div class="span4 shipment-div">
                <h4>Delivery Information</h4>
                POD Date: #: PODInfo.PODDate # <br />
                POD Name: #: PODInfo.PODSignature # <br />
                Minutes Early/Late: @if(#: PODInfo.MinutesEarlyLate #  > 0){  #: PODInfo.MinutesEarlyLate # Late  } else { On Time }
            </div>
            <div class="span4 shipment-div">
                <h4>Billing Information</h4>
                Payment Option: #: BillingInfo.PaymentOption # <br />
                Zone: #: BillingInfo.CarrierZone # <br />
                Bill To Account: #: BillingInfo.BillToAccount # <br />
                Payment File Ref: #: BillingInfo.PaymentReference # <br />
                Closing Run: #: BillingInfo.PaymentRefFileName # <br />
                Bundle Number: #: BillingInfo.BundleNumber #
            </div>
            <div class="span4 shipment-div">
                <h4>Charge Information</h4>
                <div class="row-fluid">
                    <div class="span6">
                        Original Amount: <br />
                        Credits: <br />
                        Refunds: <br />
                        Amount Due:
                    </div>
                    <div class="span6">
                        #: OriginalAmount # <br />
                        #: Credits # <br />
                        #: Refunds # <br />
                        #: AmountDue #
                    </div>
                </div>
                <div class="row-fluid">
                    @(Html.Kendo().Grid<GMCRepository.Models.DataServices.ChargesInformation>().Name("ShipmentCharges")
                    .DataSource(dataSource => dataSource.Ajax().Read(read => read.Action("ChargesList", "DataInquiry"))
                    )
                    .Columns(columns =>
                    {
                        columns.Bound(charge => charge.ChargeDescription);
                        columns.Bound(charge => charge.ChargeAmount);
                    })
                    .ToClientTemplate())
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span4 shipment-div">
                <h4>Cost Center Information</h4>
                Cost Center: #: BillingInfo.CostCenter # <br />
                Match Type: #: BillingInfo.CostCenterMatchType # <br />
            </div>
            <div class="span4 shipment-div">
                <h4>References</h4>
            </div>
        </div>
    </div>
</script>

[Donna Stewart]

I realize now that I can not use Razor for my conditional.  I believe I should be able to use javascript, right?  I just can't seem to get the syntax correct.  I keep getting an invalid template error when the grid is rendered.    Am I wrong in thinking I can use an element from the grid data item in a conditional statement in the client detail template?  If I can do this, I need help with the syntax....  I really do appreciate anyone who can help me out here!

Thanks so much,
Donna

[Donna Stewart]

I figured this out finally!  I realized I could not use Razor here, so I switched to JavaScript.  It took me a while to figure out the code and syntax, but with the help of a You Tube video by Ricardo Covo I got it working.  (Thank you Ricardo!)  Here is what I ended up with:

Minutes Early/Late: # if( data.PODInfo.MinutesEarlyLate > 0  ){ #  #: PODInfo.MinutesEarlyLate # Late  # }  else { # On Time # } #

I'm sure I've seen this somewhere in the Kendo docs, but it wasn't obvious to me, so I thought I would post the solution in case anyone else runs into this.

Thanks,
Donna