Razor syntax help in Client Detail Template for Grid

3 posts, 1 answers
  1. Donna Stewart
    Donna Stewart avatar
    127 posts
    Member since:
    Apr 2009

    Posted 21 Jun 2013 Link to this post

    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>

  2. Donna Stewart
    Donna Stewart avatar
    127 posts
    Member since:
    Apr 2009

    Posted 24 Jun 2013 Link to this post

    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
  3. Answer
    Donna Stewart
    Donna Stewart avatar
    127 posts
    Member since:
    Apr 2009

    Posted 24 Jun 2013 Link to this post

    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
Back to Top