Is there a way to define conditional rendering based on ternary operator on tpl templates?

  1. #1

    Is there a way to define conditional rendering based on ternary operator on tpl templates?

    I would like to know how to use ternary operator on tpl within a dataview using razor engine


    .Store(X.Store()
                            ....
                        ).Tpl(@<text>
                                   <tpl for=".">
                                       <div class="holder">
                                           <div class="avatar"></div>
                                           <div class="h-content">
                                               <h2>{Name}</h2>
                                               <h3>{Phone} {Extension}</h3>
                                               <p>{Position} {CompanyName}</p>
                                           </div>
                                       </div>
                                   </tpl>
                        </text>)
                )

    I would like to add something like


    <div class="holder {[condition == true ? 'classA':'classB']}">
    ....
     </div>
    I've tried that way but as soon as the code is rendering that componet it just stops at the very first element.

    Any idea of how to use ternary conditions or an alternative that may look like that?
    (i dont want to copy/paste the same layout within an "else block" just to change a thing)
  2. #2
    Hi @iskrazvezda,

    Please demonstrate what do you use as condition? My guess is that the problem is there, because the code that you want to use appears to be working as it is.

    Example
    @{
        var X = Html.X();
    }
    
    <!DOCTYPE html>
    <html>
    <head>
        <title>Ext.Net.MVC v3 Example</title>
    
        <style>
            .classA {
                color: blue;
            }
    
            .classB {
                color: green;
            }
        </style>
    </head>
    <body>
        @X.ResourceManager()
    
        @(X.DataView()
            .ItemSelector("div.holder")
            .Store(X.Store()
                .Fields("value", "description")
                .DataSource(new object[]
                {
                    new 
                    {
                        value = 1,
                        description = "Value #1"    
                    },
                    new 
                    {
                        value = 2,
                        description = "Value #2"    
                    }
                })
            )
            .Tpl(@<text>
                <tpl for=".">
                    <div class="holder {[values.value === 1 ? 'classA':'classB']}">
                        {value}: {description}
                    </div>
                </tpl>
            </text>)
        )
    </body>
    </html>
  3. #3

    TPL examples on razor engine

    I've tried with Models values, i'd would like to know if there's a online reference for the use of tpl and xtemplates on razor engine, i've search for ternary and conditional flow control structures such as switch but there's no so much topics and examples
  4. #4
    I've tried with Models values,
    Please elaborate.

    i'd would like to know if there's a online reference for the use of tpl and xtemplates on razor engine,
    I don't think it exists. Could you, please, clarify what is specific in using it on Razor engine?
  5. #5

    My example

    I'm using ternary at

     <input type="image" src="/icons/email-png/ext.axd" class="icon {[ IsPhoneNumber ? 'phone':'']}" onclick="IntentEmail('{Content}');" />
    And i would like to use a swtich construct instead of all those if's blocks



     X.DataView().AutoScroll(true).Height(129)
                        .ID("ContactListDetail")
                        .Store(
                            X.Store()
                                .ID("Store2")
                                .DataSource(Model.Detail)
                                .Model(
                                    X.Model()
                                        .Fields(
                                            X.ModelField().Name("Content"),
                                            X.ModelField().Name("ItemTypeId"),
                                            X.ModelField().Name("ItemType"),
                                            X.ModelField().Name("IsPhoneNumber"),
                                            X.ModelField().Name("Extension")
                                        )
                                )
                        )
                        .MultiSelect(true)
                        .OverItemCls("x-item-over")
                        .ItemSelector("addressbook-item")
                        .TrackOver(true)
                        .Tpl(
                            X.XTemplate()
                                .Html(@<tpl for= ".">
                                            <div class="card-item addressbook-item">
                                                <ul class="addressbook-item-detail">
                                                    
                                                        <li>
    
                                                                <tpl if="ItemTypeId == '0'">
                                                                    <input type="image" src="/icons/email-png/ext.axd" class="icon {[ IsPhoneNumber ? 'phone':'']}" onclick="IntentEmail('{Content}');" />
                                                                </tpl>
                                                                <tpl if="ItemTypeId == '1'">
                                                                    <input type="image" src="/icons/phone-png/ext.axd" class="icon" onclick="IntentCall('{Content}');" />
                                                                </tpl>
                                                                <tpl if="ItemTypeId == '2'">
                                                                    <input type="image" src="/icons/building-png/ext.axd" class="icon" onclick="IntentCall('{Content}');" />
                                                                </tpl>
                                                                <tpl if="ItemTypeId == '3'">
                                                                    <input type="image" src="/icons/page_white_text-png/ext.axd" class="icon" onclick="IntentCall('{Content}');" />
                                                                </tpl>
                                                                <tpl if="ItemTypeId == '4'">
                                                                    <input type="image" src="/icons/house-png/ext.axd" class="icon" onclick="IntentCall('{Content}');" />
                                                                </tpl>
                                                                <tpl if="ItemTypeId == '5'">
                                                                    <input type="image" src="/icons/user-png/ext.axd" class="icon" onclick="IntentCall('{Content}');" />
                                                                </tpl>
    
                                                                {ItemType:capitalize}
                                                                <span class="contact-data">{Content}</span>
    
                                                    </li>
                                                      <tpl if= "Extension != ''">
                                                           <li><span class="title">@Resources.Extension</span><span class="contact-data">{Extension}</span></li>
                                                      </tpl>
                                                    </ul>
                                            </div>
                                        </tpl>
                                )
                        )
    Last edited by iskrazvezda; Sep 09, 2015 at 5:47 PM. Reason: complementary
  6. #6
    I'm using ternary at
    <input type="image" src="/icons/email-png/ext.axd" class="icon {[ IsPhoneNumber ? 'phone':'']}" onclick="IntentEmail('{Content}'
    I guess it is not working? Please try to change IsPhoneNumber to values.IsPhoneNumber

    And i would like to use a swtich construct instead of all those if's blocks
    I think the best learning resource on using XTemplates is the ExtJS docs:
    http://docs.sencha.com/extjs/5.1/5.1.../Ext.XTemplate

    To be honest, I didn't know, but a switch statement is supported.
  7. #7

    It worked

    It worked! Thank you some much Daniil

Similar Threads

  1. Replies: 6
    Last Post: Aug 31, 2015, 8:51 AM
  2. [CLOSED] Default operator for FilterHeader fields
    By metci in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 20, 2014, 12:02 PM
  3. [CLOSED] MVC Templates
    By adelaney in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 16, 2012, 5:04 PM
  4. Replies: 2
    Last Post: Jul 15, 2009, 2:07 PM
  5. Complex Serialization and Templates
    By BrunoC in forum 1.x Help
    Replies: 1
    Last Post: Jan 30, 2009, 1:18 PM

Tags for this Thread

Posting Permissions