PanelBar.Text - Multi Line

12 posts, 0 answers
  1. Joel
    Joel avatar
    110 posts
    Member since:
    Jun 2018

    Posted 16 Jan Link to this post

    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

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1853 posts

    Posted 21 Jan Link to this post

    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.
  3. Joel
    Joel avatar
    110 posts
    Member since:
    Jun 2018

    Posted 21 Jan in reply to Ivan Danchev Link to this post

    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

  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1853 posts

    Posted 24 Jan Link to this post

    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.
  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1853 posts

    Posted 24 Jan Link to this post

    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.
  6. Joel
    Joel avatar
    110 posts
    Member since:
    Jun 2018

    Posted 24 Jan in reply to Ivan Danchev Link to this post

    I like it.  I'll  give it a try.
  7. Joel
    Joel avatar
    110 posts
    Member since:
    Jun 2018

    Posted 24 Jan in reply to Joel Link to this post

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

     

     

  8. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1853 posts

    Posted 24 Jan Link to this post

    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.
  9. Joel
    Joel avatar
    110 posts
    Member since:
    Jun 2018

    Posted 24 Jan in reply to Ivan Danchev Link to this post

    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 />
  10. Joel
    Joel avatar
    110 posts
    Member since:
    Jun 2018

    Posted 24 Jan Link to this post

    Picture didn't upload
  11. Joel
    Joel avatar
    110 posts
    Member since:
    Jun 2018

    Posted 24 Jan Link to this post

    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>
  12. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1853 posts

    Posted 29 Jan Link to this post

    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.
Back to Top