MVVM - Attribute binding

8 posts, 0 answers
  1. Neeraj
    Neeraj avatar
    94 posts
    Member since:
    May 2015

    Posted 06 Feb Link to this post

    Hello, i have remote template as shown below:

    Remote template:

    <script id="AirPricingWithoutPNRViewModelItemTemplate" type="text/x-kendo-template">
         <div class="postpricingItem">
            <div>
                <table>
                    <tbody data-template="T2Template" data-bind="source: data"></tbody>
                </table>
            </div>
            <div>Quote: <span data-bind="text: Total"></span></div>  /* attr: title to be attached to this span */
        </div>
    </script>

    I want the Quote element span to have 'title' attribute binding to format as in T1Template below . So that on hover i can see details.



    child Template:

        <script id="T1Template" type="text/x-kendo-template">
            
                    <tr>
                        <td>TST </td>
                        <td title="Passenger Type" data-bind="text: UnitQualifier"></td>
                        <td title="Passenger Quantity" data-bind="text: Quantity"></td>
                        <td title="PricingPCC" data-bind="text: OptionFilters.PricingPccInformation.PCCCode"></td>
                        #if (data.lkpStatus=="D") {#
                        <td title="Deleted TST"><i class="fa text-danger fa-times" aria-hidden="true"></i></td>
                        #} else {#
                        #}#
                        <td title="Price" data-bind="text: TotalSalesPriceToDisplay"></td>
                    </tr>
              
        
    </script>





  2. Georgi
    Admin
    Georgi avatar
    301 posts

    Posted 07 Feb Link to this post

    Hello Neeraj,

    Based on the provided information I assume that the requirement is to bind the title attribute of the Quote element to some value from the view model. Please correct me if I am wrong.

    A possible solution is to use the Attribute Binding.

    e.g.

    <span data-bind="attr:{title:Total},text:Total"></span></div>

    Below you will find a sample which demonstrates the above solution:



    More detailed information about Attribute Binding can be found in the documentation:



    Regards,
    Georgi
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Neeraj
    Neeraj avatar
    94 posts
    Member since:
    May 2015

    Posted 08 Feb Link to this post

    Hello Georgi,  The data to be binded to title  is not plain text. I want to bind html to title . it might have some bold font , color change etc
  4. Georgi
    Admin
    Georgi avatar
    301 posts

    Posted 12 Feb Link to this post

    Hi Neeraj,

    I apologize but I am not sure that I understand the requirement. 

    Could you please provide me with more detailed information about the required result and the use case?

    I look forward to your reply.
     

    Regards,
    Georgi
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Neeraj
    Neeraj avatar
    94 posts
    Member since:
    May 2015

    Posted 12 Feb Link to this post

    Hello, Open this link below. It contains sample that i want. I want to bind property to Title attribute has html content that i want to render properly
    http://dojo.telerik.com/AYiRe/2
  6. Neeraj
    Neeraj avatar
    94 posts
    Member since:
    May 2015

    Posted 12 Feb Link to this post

    if above link doesnt work: http://dojo.telerik.com/AYiRe/2
  7. Neeraj
    Neeraj avatar
    94 posts
    Member since:
    May 2015

    Posted 12 Feb Link to this post

    if above link doesnt work : http://dojo.telerik.com/AYiRe/2
  8. Georgi
    Admin
    Georgi avatar
    301 posts

    Posted 14 Feb Link to this post

    Hi Neeraj,

    The default title tooltip does not support HTML.

    A possible workaround is to use Kendo Tooltip:


    More information about the Kendo Tooltip can be found in the documentation:



    Regards,
    Georgi
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top