PanelBar.Text - Multi Line

[Joel]

Is there a way to have multiple lines (with different styles)?  Kinda like this:

 

Main Text LIne

This is my Sub Text

 

Thanks for your help,

Joel

[Ivan Danchev]

Hello Joel,

Consider using a template:

<script id="panelbar-template" type="text/kendo-ui-template">
	<div>#: item.MainTextField #</div>
        <div><em>#: item.SubTextField #</em></div>
</script>

Set it to the PanelBar:

.TemplateId("panelbar-template")

In the template you can add your own Html structure to achieve the desired appearance. In the example above, div elements specify each line of text and each line displays data from a different field of the data (e.g. MainTextField and SubTextField).

As a result the PanelBar will look like this: https://www.screencast.com/t/jBENLSTCthV

Regards,
Ivan Danchev
Progress Telerik

[Joel]

Okay... I think I understand.  Here is my PanelBar definition:

@(Html.Kendo().PanelBar()
      .Name("panelbar-nav")
      .BindTo(@Model.NavigationHistory,
          (NavigationBindingFactory<PanelBarItem> mappings) =>
          {
              mappings.For<NameValuePair>(binding => binding.ItemDataBound((item, nvp) =>
              {
                  item.Text = nvp.Context;
                  item.ImageUrl = nvp.Name;
                  item.Url = $"{nvp.Value}";
              }));
          })
      .TemplateId("panelbar-template"))

 

Here is my Script:

<script id="panelbar-template" type="text/kendo-ui-template">
    <div>#: item.Title #</div>
    <div><em>#: item.Subtitle #</em></div>
</script>

 

You likely picked up the question already, what should I remove from my definition?  Seems like I need to keep the .BindTo entry but that requires all the factoryAction stuff following it.

Also, I set the ImageUrl and Url values.  How do I include those in the mix?

Thanks for your help,

Joel

[Ivan Danchev]

Hello Joel,

Templates cannot be used in the PanelBar with server-side binding through the BindTo method. As a workaround, you can consider passing the template as item text by building a string:

mappings.For<NameValuePair>(binding => binding.ItemDataBound((item, nvp) =>
{
    item.Encoded = false;
    item.Text = "<div>" + nvp.Title + "</div>" + "<div><em>" + category.Subtitle + "</em></div>";
    item.ImageUrl = nvp.Name;
    item.Url = $"{nvp.Value}";
}));

Note that the item's Encoded option is set to false, so that Html is properly rendered in the item, otherwise Html tags will be displayed as text.

Regards,
Ivan Danchev
Progress Telerik

[Ivan Danchev]

Joel,

As a quick follow-up, the if you want to display other fields just add them to the string you pass to item.Text, as demonstrated with the Title and Subtitle fields.

Regards,
Ivan Danchev
Progress Telerik

[Joel]

I like it.  I'll  give it a try.

[Joel]

Um, no.  It doesn't work that way.  Resulting picture attached:

            @if (ProfileService.IsInRole(SecurityRoles.Manager))
            {
                @(Html.Kendo().PanelBar()
                      .Name("panelbar-nav")
                      .BindTo(@Model.NavigationHistory,
                          (NavigationBindingFactory<PanelBarItem> mappings) =>
                          {
                              mappings.For<NameValuePair>(binding => binding.ItemDataBound((item, nvp) =>
                              {
                                  item.Text = "<div>" + nvp.Context + "</div>" + "<div><em>" + nvp.ContextDetail + "</em></div>";
                                  item.ImageUrl = nvp.Name;
                                  item.Url = $"{nvp.Value}";
                              }));
                          }))
                <br />
            }

 

 

[Ivan Danchev]

Joel,

I don't see item.Encoded = false; set as I mentioned in my previous reply. What is the result when you set it?

Regards,
Ivan Danchev
Progress Telerik

[Joel]

I did miss the encoding and that got me closer.  I added the paragraph in order get the detail on the 2nd line.  However, now I have a huge margin.  I would like them all the same size as the address/email/phone links.  See attached picture.  Can I force the size without crushing the text?  Any ideas?

@(Html.Kendo().PanelBar()
      .Name("panelbar-nav")
      .BindTo(@Model.NavigationHistory,
          (NavigationBindingFactory<PanelBarItem> mappings) =>
          {
              mappings.For<NameValuePair>(binding => binding.ItemDataBound((item, nvp) =>
              {
                  item.Encoded = false;
                  item.Text = "<div>" + nvp.Context + "<p/><em>" + nvp.ContextDetail + "</em></div>";
                  item.ImageUrl = nvp.Name;
                  item.Url = $"{nvp.Value}";
              }));
          }))
<br />

[Joel]

Picture didn't upload

[Joel]

This is as close as I can get it.  I'm using a ul... maybe thats my problem.  I just can't get the white space between words to be reduced.  Any other suggestions?  This is the html I am loading into the Text property which removes the padding and margin from all the elements in the list:

<div><ul style="list-style-type: none; padding: 0; margin: 0;"><li style="padding: 0; margin: 0;">Everyone</li><li style="padding: 0; margin: 0; "><em style="padding: 0; margin: 0; ">Palmer ENT</em></li></ul></div>

[Ivan Danchev]

Joel,

You can control the distance between the lines by setting the element with class k-link line-height property value:

.k-panelbar>.k-item>.k-link {
  line-height: 1.5em;
}

For the Bootstrap v3 theme the default value is 2.34em, so reducing it, for example to 1.5em, will result in the lines being displayed closer to one another.

Assuming your item text Html structure is similar to:

<div> 
  Everyone
</div>
<div>
  <em>Palmer ENT</em>
</div>

Reducing the line-height will result in the following appearance: screenshot.

Regards,
Ivan Danchev
Progress Telerik