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. UI for ASP.NET MVC is VS 2017 Ready
  4. 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