Conditional formatting example, strange syntax

[John]

I was browsing 

http://demos.telerik.com/aspnet-ajax/grid/examples/data-binding/client-side/client-item-template/defaultcs.aspx

 I don't recognise the syntax used within the span tags and VS 2013 doesn't like it.

 <span style="#=formatTitle(ContactTitle)#">#=ContactTitle #</span>

I am trying to change the style of a column depending on value after binding the Grid view, something like this

 

        private void OnNWDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
        {
            if (e.Item.ItemType == ListItemType.Item ||
                e.Item.ItemType == ListItemType.AlternatingItem)
            {
                DataRowView rv = (DataRowView)e.Item.DataItem;
                // Get fourth column value.
                Int32 nUnitsInStock = Convert.ToInt32(rv.Row.ItemArray[3]);
                if (nUnitsInStock < 20)
                {
                    e.Item.Cells[3].BackColor = Color.Red;
                }
            }
        }

 

 

[Maria Ilieva]

Hi John,

I run the mentioned demo locally in VS2013 and it works properly without any issue. Can you please let me know what the error about the mentioned syntax is so that we can further assist?

Regards,
Maria Ilieva
Telerik

 

 

[John]

 I don't recognise the syntax used within the span tags and VS 2013 doesn't like it. <span style="#=formatTitle(ContactTitle)#">#=ContactTitle #</span>

 

What does it do?

[Brett]

that is the client template databinder format.. my vs2013 doesn't complain about markup syntax, I suppose you're using an optional markup validator.. 

At any rate, that markup is suppose to be in a client template tag on a control that supports it. your function below is clearly server-side (code-behind). This is a bit of apples and oranges.

[Brett]

the demo you referenced uses web services..  

to give a simpler example...

<script>
var mydataobject = [{"id":0, "First": "John", "Last": "Adams"}, {"id":1, "First": "George", "Last": "Washington"}, {"id":2, "First": "Thomas", "Last": "Jefferson"}]; // 

function ListViewCreated(sender, e) {
           sender.set_dataSource(mydataobject);
           sender.dataBind();
}

</script>

 
// telerik control declared (in markup) within a pages form.. defines a clienttemplate that is used with the databind operation.

<telerik:RadListView id="RadListView1" runat="server">

 <ClientSettings>
     <ClientEvents OnListViewCreated="ListViewCreated" />
     <DataBinding ItemPlaceHolderID="layoutDIV">
              <ItemTemplate>
                       <div data-item='{"id": #= id =, "First": "#= First #", "Last":" #= Last #"}'>
                                <span class="id">#= id =</span>
                                <div class="name">
                                         <span class="first">#= First #</span> <span class="last">#= Last #</span>
                                 </div>
                        </div>
                    </ItemTemplate>
                     <LayoutTemplate>
                            <div id="layoutDIV">
                            </div>
                      </LayoutTemplate>
                  </DataBinding>
             </ClientSettings>
</telerik:RadListView>


in this example, I'm using html5 data attributes... this should function, but I haven't tested it. 

[Brett]

[quote]Brett said:

the demo you referenced uses web services..  

to give a simpler example...

<script>
var mydataobject = [{"id":0, "First": "John", "Last": "Adams"}, {"id":1, "First": "George", "Last": "Washington"}, {"id":2, "First": "Thomas", "Last": "Jefferson"}]; // 

function ListViewCreated(sender, e) {
           sender.set_dataSource(mydataobject);
           sender.dataBind();
}

</script>

 
// telerik control declared (in markup) within a pages form.. defines a clienttemplate that is used with the databind operation.

<telerik:RadListView id="RadListView1" runat="server">

 <ClientSettings>
     <ClientEvents OnListViewCreated="ListViewCreated" />
     <DataBinding ItemPlaceHolderID="layoutDIV">
              <ItemTemplate>
                       <div data-item='{"id": #= id =, "First": "#= First #", "Last":" #= Last #"}'>
                                <span class="id">#= id =</span>
                                <div class="name">
                                         <span class="first">#= First #</span> <span class="last">#= Last #</span>
                                 </div>
                        </div>
                    </ItemTemplate>
                     <LayoutTemplate>
                            <div id="layoutDIV">
                            </div>
                      </LayoutTemplate>
                  </DataBinding>
             </ClientSettings>
</telerik:RadListView>


in this example, I'm using html5 data attributes... this should function, but I haven't tested it. 

[/quote]

can't edit, but there is 1 syntax issue I can see. it's in the data attribute, "Last":" #= Last #" needs a space after the colon.. "Last": " #= Last #"

[John]

There is probably a smarted way of doing things but In the end, I just put an immediate if statement in the code behind:

<telerik:GridTemplateColumn DataField="Active" HeaderText="Active" UniqueName="Active">
                  <ItemStyle Font-Size="X-Small" />
                             <ItemTemplate>
                                   <%# (Boolean.Parse(Eval("Active").ToString())) ? "Yes" : "<span style='color:red'>No</span>" %>
                  </ItemTemplate>
   </telerik:GridTemplateColumn>