[Solved] MVVM - Attribute binding

[Neeraj]

Hello, have 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  So that on hover  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>

[Georgi]

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:

• http://dojo.telerik.com/@joronator/UlUze

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

• https://docs.telerik.com/kendo-ui/framework/mvvm/bindings/attr

Regards,
Georgi
Progress Telerik

[Neeraj]

Hello Georgi,  The data to be to not plain text. I want to bind  to  it might have some bold color change etc

[Georgi]

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

[Neeraj]

Hello, Open this link below. It contains that want. I want to bind property to Title attribute has content that want to render properly
http://dojo.telerik.com/AYiRe/2

[Neeraj]

if above link work: http://dojo.telerik.com/AYiRe/2

[Neeraj]

if above link work : http://dojo.telerik.com/AYiRe/2

[Georgi]

Hi Neeraj,

The default title tooltip does not support HTML.

A possible workaround is to use Kendo Tooltip:

• http://dojo.telerik.com/@joronator/IbUkEM

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

• https://docs.telerik.com/kendo-ui/api/javascript/ui/tooltip

Regards,
Georgi
Progress Telerik