Conditional formatting example, strange syntax

8 posts, 0 answers
  1. John
    John avatar
    11 posts
    Member since:
    Mar 2015

    Posted 07 May 2015 Link to this post

    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;
                    }
                }
            }

     

     

  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 12 May 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. John
    John avatar
    11 posts
    Member since:
    Mar 2015

    Posted 12 May 2015 in reply to Maria Ilieva Link to this post

     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?

  5. Brett
    Brett avatar
    42 posts
    Member since:
    Aug 2014

    Posted 12 May 2015 in reply to John Link to this post

    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.
  6. Brett
    Brett avatar
    42 posts
    Member since:
    Aug 2014

    Posted 12 May 2015 in reply to John Link to this post

    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. 

  7. Brett
    Brett avatar
    42 posts
    Member since:
    Aug 2014

    Posted 12 May 2015 in reply to Brett Link to this post

    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. 



    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 #"
  8. John
    John avatar
    11 posts
    Member since:
    Mar 2015

    Posted 12 May 2015 in reply to Brett Link to this post

    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>

     

  9. Brett
    Brett avatar
    42 posts
    Member since:
    Aug 2014

    Posted 12 May 2015 in reply to John Link to this post

    I'm glad you found a solution, but that isn't client-side templating.. so, I guess you went orange :P

    I use server-side templating and binding quite a bit myself.. I generally avoid eval (and reflection by declaring/defining a data structure used for control binding. Then, in the container/binder I explicitly cast Container.DataItem to my object.

    consider the following...

    // A class used as a ViewModel

    public class MyDataItem
    {
       public int ID {get;set;}
       public bool IsActive {get;set;}
       public string ActiveDisplayText {
             get { return (this.IsActive) ? "Yes" : "No";} 
             set { 
                   if (value != null && value.trim().length > 0) {
    // assuming you're passing a string "yes" or "no" (either display text or value of a control item).. you could, of course, pass the value attribute of a checkbox input.. which could be "0" or "1", "true" or "false", "yes" or "no".
                        switch (value.trim().ToLower()) {
                                case "y":
                                       this.IsActive = true;
                                break;
                                case "n": 
                                       this.IsActive = false;
                                break;
                                default:
                                       //do nothing, or throw validation exception of some sort
                                break;
                         }
                  }   
          }
    }


    // Code-Behind (RadGrid1.OnNeedDataSource EventHandler)

    protected void OnNeedDataSource(object sender, System.EventArgs e)
    {
         RadGrid1.DataSource = GetData().AsEnumerable().Select(model => new MyDataItem() { ID = model.ID, IsActive = model.IsActive});
    }


    //Markup

    <telerik:GridTemplateColumn DataField="IsActive" HeaderText="Active" UniqueName="Active">
    <ItemStyle Font-Size="X-Small" />
    <ItemTemplate>
    <span class="<%# ((MyDataItem)Container.DataItem).IsActive %>"><%# ((MyDataItem)Container.DataItem).ActiveDisplayText %></span>
    </ItemTemplate>
    </telerik:GridTemplateColumn>



    Additionally, you could replace the span with a RadButton ToggleType="checkbox" and define the toggle states.. using the ActiveDisplayText for text field and the IsActive for the value field.

    The benefit of using server-side templating here is that you can embed Rad controls in the templates.. that isn't something you can do with the client-side binding..

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017