We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Expand/Collpase container for an Overview control

Hi,

I'd like to place an Overview control in a collapse/expand container at the "bottom" left of my screen.
Would a ejMenu or ejAccordian by suitable?
I want to be able to place a title like "Pan & Zoom" on the control so the user knows to click on it to expand it.

The selected control must allow the content to be expanded upwards, since it will be at the bottom.

I'm using another vendor's menu control right now, but I'm getting a lot of errors that I can't explain.
I thought I'd use one of SyncFusion controls.

Any suggestions?

Thanks

Jim




5 Replies

SG Shyam G Syncfusion Team February 16, 2015 10:57 AM UTC

Hi Jim

Thanks for using Syncfusion products.

We are glad to inform you that we have created a simple sample to achieve your requirement by using  the ejAccordion control.

Here is the sample

Sample:http://www.syncfusion.com/downloads/support/directtrac/118234/WebApplication20-280499418.zip

Please let me know if any concerns.

Regards,

Shyam G




JJ Jim Jacobs February 16, 2015 03:55 PM UTC

Hi Shyam,

Thanks for the sample.
It works with one serious glitch.

I need the accordion to come up collapsed when the page is initially loaded.
I got this to work by setting the SelectedItemIndex to -1 (per your online doc).
However, when I do this, the Overview doesn't render properly, and I get a lot of javascript NaN errors.

See the attached video.

Here's what I'm using:

<div style="width: 240px; position: fixed; left: 15px; bottom: 23px; margin: auto;">
        <ej:Accordion ID="BasicAccordion" runat="server" EnableMultipleOpen="true" HeightAdjustMode="Content" Collapsible="True" SelectedItemIndex="-1">
            <Items>
                <ej:AccordionItem Text="Overview">
                    <ContentSection>
                        <ej:Overview ID="OverviewControl" runat="server" Height="155px" Width="200px" SourceId="DiagramContent"></ej:Overview>
                    </ContentSection>
                </ej:AccordionItem>
            </Items>
        </ej:Accordion>
    </div>

I've been playing with the height and width values, so the ones above don't match the video, but that shouldn't be important anyway.

Any thoughts on what is causing the NaN errors.

Thanks

Jim

Attachment: Syncfusion__Overview_in_Accordian_Errors__16Feb2015_3936f390.zip


SG Shyam G Syncfusion Team February 17, 2015 12:21 PM UTC

Hi Jim

Thanks for the update.

We have analyzed your provided information(code snippet) with our sample and we are unable to reproduce the reported issue at our end. Could you please modify the below sample to reproduce the reported issue in our end? .This will help us to verify and to provide better solution. Please refer the sample and video below for your reference.

Sample:http://www.syncfusion.com/downloads/support/directtrac/118234/accordions-794619951.zip

Video:http://www.syncfusion.com/downloads/support/directtrac/118234/pathnode939633860.zip

Please let me know if any concerns.

Regards,

Shyam G




JJ Jim Jacobs February 20, 2015 08:23 PM UTC

Hi Shyam,

Thanks for the sample.
I got it running in my environment and also was able to reproduce my issue.
It seems to be related to loading the diagram from a web service.

I've attached a video demonstrating the following:
  1. The diagram you provided rendering and the overview working
  2. Clicking on a button to clear the diagram
  3. Clicking on a button to load a diagram from a database using a web service
  4. The diagram renders fine
  5. The overview is not quite right - some shapes are not shown as coloured and the whole thing looks washed out
  6. The console shows lots of NaN errors
  7. I then delete the overview and launch the app again
  8. I can render my diagram from the database without any NaN errors

I have also attached the aspx page that shows my script - this is the same as what I'm using in my app.

Unfortunately, I can't really send you a working solution, but as the information I have provided demonstrates, there is something not quite right here.

Any thoughts or suggestions?

Thanks

Jim


Attachment: Syncfusion__Overview_in_Accordian_Errors__20Feb2015_708ee50.zip


SG Shyam G Syncfusion Team February 23, 2015 12:58 PM UTC

Hi Jim

Thanks for the update.

We are able to reproduce the reported issue at our end. We have logged “Issue with rendering path Node, when parent element display style as none” as a defect and created a new incident 135723 on behalf of you related to this forum. We suggest you to follow up the incident for further reference using your direct trac account. However we have created a workaround sample to achieve your requirement and it is available in the below link for download.

Sample:http://www.syncfusion.com/downloads/support/directtrac/118234/workaroundsample997598391.zip

Please let me know if any concerns.

Regards,

Shyam G



Loader.
Live Chat Icon For mobile
Up arrow icon