This is a migrated thread and some comments may be shown as answers.

PanelBar.Text - Multi Line

11 Answers 32 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Joel asked on 16 Jan 2020, 06:21 PM

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

11 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 21 Jan 2020, 10:32 AM

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

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 21 Jan 2020, 09:00 PM

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

0
Ivan Danchev
Telerik team
answered on 24 Jan 2020, 12:43 PM

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

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
0
Ivan Danchev
Telerik team
answered on 24 Jan 2020, 12:46 PM

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

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 24 Jan 2020, 03:05 PM
I like it.  I'll  give it a try.
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 24 Jan 2020, 03:51 PM

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

 

 

0
Ivan Danchev
Telerik team
answered on 24 Jan 2020, 03:58 PM

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

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 24 Jan 2020, 04:47 PM

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 />
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 24 Jan 2020, 04:48 PM
Picture didn't upload
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 24 Jan 2020, 07:19 PM

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>
0
Accepted
Ivan Danchev
Telerik team
answered on 29 Jan 2020, 01:43 PM

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

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
Tags
PanelBar
Asked by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Ivan Danchev
Telerik team
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Share this question
or