[Solved] Adding separator between menu item in sitemap

[Tawit]

I use sitemap binding for generate menu item.
How can adding seperator to "----------------------"

<siteMapNode>
    <siteMapNode title="Billing">
      <siteMapNode area="Billing" controller="CustomerDiscount" action="Index" title="Customer Discount" />
      <siteMapNode title="Customer Discount" visible="false">
        <siteMapNode area="Billing" controller="CustomerDiscount" action="Edit" title="Edit Customer Discount" />
        <siteMapNode area="Billing" controller="CustomerDiscount" action="Create" title="Create Customer Discount" />
      </siteMapNode>

      <siteMapNode area="Billing" controller="-" action="Index" title="----------------------" />
     
      <siteMapNode area="Billing" controller="BillingCalculation" action="Index" title="Billing Calculation" />
      <siteMapNode title="Billing Calculation" visible="false">
        <siteMapNode area="Billing" controller="BillingCalculation" action="Edit" title="Edit Billing Calculation" />
        <siteMapNode area="Billing" controller="BillingCalculation" action="Create" title="Create Billing Calculation" />
      </siteMapNode>

      <siteMapNode area="Billing" controller="BillingResult" action="Index" title="Billing Result" />
      <siteMapNode title="Billing Result" visible="false">
        <siteMapNode area="Billing" controller="BillingResult" action="Edit" title="Edit Billing Result" />
        <siteMapNode area="Billing" controller="BillingResult" action="Create" title="Create Billing Result" />
      </siteMapNode>
    </siteMapNode>   
</siteMapNode>

[John DeVight]

Hi Tawit,

As far as I know, there is no support for a separator line.  However, what I have done in this situation is add the separator line after the menu is rendered.  Assuming the name of your menu controls is "Menu", you could add the following code to the Html.Telerik().ScriptRegistrar.OnDocumentReady() method:

$('#Menu').children('li.t-item:contains("Billing")')
    .find('span.t-link:contains("Customer Discount")')
        .closest('li.t-item')
        .after($('<li/>').attr('class','t-item t-state-default').html('<hr/>'))

What this does is locate the "Billing" menu, find the "Customer Discount" menu item and add a "separator line" after the "Customer Discount" menu item.

Hope this helps.

Let me know if you would like for me to post a sample application...

Regards,

John DeVight

[Tawit]

Hi John,

    I used your sample code in my project. But it nothing happend.
    Please post a sample application for me.

Thank  you,
Tawit.

[John DeVight]

Hi Tawit,

Sorry about that.  I based my code on a menu where the menu item wasn't a link to another page.  The following should work:

$('#Menu').children('li.t-item:contains("Billing")')
    .find('.t-link:contains("Customer Discount")')
        .closest('li.t-item')
        .after($('<li/>').attr('class','t-item t-state-default').html('<hr/>'))

I'll post a sample application shortly...

Regards,

John DeVight

[John DeVight]

Attached is a sample application.

[Tawit]

Thank you very much.

[Deepak]

Here's another solution:

In the SiteMap, add the following:

<siteMapNode title="---" /> 

Add the Client-side OnLoad event to the menu and put the following code in there:

$("#TopMenu span:contains(---)").each(function ()         
{             
    $(this).html("<hr/>");             
    $(this).css("padding-left", "0px");             
    $(this).css("padding-right", "0px");         
});