Few Questions

[Sagi Karni]

Hello,

1. What is your recommendation concerning enableNativeScrolling for mobile devices ? why does the default value is false ?

What exactly is the difference between native and non native scrolling? Especially concerning the scroll performance and smoothness

 

2. Do you have some kind of a router object (similar to angular / kendo ui) to controls the routing of urls

 

3. Can the navigationDrawer have any content in it (or only lists are allows ?)

 

4. How do you define a complex "View" (one that has complex content) like in the question I asked here : https://www.syncfusion.com/forums/121638/fixed-element

is this the correct way ? (Defining a ejmscrollpanel)

 

5. Do you have some event for View been loaded? Let’s say I have navigation drawer with rel='nofollow' href to several views. exactly like in (http://js.syncfusion.com/demos/mobile/#navigationdrawer|default)

When I click the "Home" the url is changing to http://...#home and the view with id=home is loaded (again, where is the router objects ?)

Can I know that the (home) view is about to be loaded (some kind of loaded event)  ?

 Can the views themselves contain syncfusion's components ? (In the sample the views only contain plain html content) , let’s say "home" div contains ejmListView.

If so , Will the ejmListView be initialized when the page loads or only when the user clicked “Home”

 

 

Thx in advanced foe all your help

Sagi

  

[Dhinesh Ravi]

Hi Sagi,

Thank you for contacting Syncfusion Support.

Refer to the following response for the respective queries.

Query1: What is your recommendation concerning enableNativeScrolling for mobile devices ? why does the default value is false ?

EnableNativeScrolling property in ScrollPanel enables the default browser supported scrolling, disables the Essential Studio Mobile ScrollPanel. Default value is set to false, on behalf of to enable Essential Studio Mobile ScrollPanel. Smoothness will slightly differ for Essential Studio Mobile scrollpanel, when compared to the Native scroller of browser. But, there are limitations while native scroller is used, such as fixed elements needs to be handled in the sample, whereas these things have been already handled in Essential Studio Mobile ScrollPanel

Query2: Do you have some kind of a router object (similar to angular / kendo ui) to controls the routing of urls.

We don’t handled third party routing to route the controls. We have used page and subpage concepts using Ajax Navigation within the Essential Javascript for Mobile application container AppView.

Query3: Can the navigationDrawer have any content in it (or only lists are allows ?)

Essential Studio NavigationDrawer is a template control and we can use any templates inside the NavigationDrawer unlike ListView control. ListView will gets rendered in the NavigationDrawer when the property data-ej-enablelistview is set as false. Otherwise any content given within the NavigationDrawer element will be render as template. Refer to the following code example for simple layout

[html]

    <div data-role="ejmnavigationdrawer" data-ej-width="100" id="navpane" data-ej-targetid="header_leftbutton" data-ej-allowscrolling="true"

        data-ej-type="overlay" data-ej-position="fixed"

        data-ej-contentid="container">

        <!--Template content-->
    </div>

We have also created simple for the requirement. Refer the sample in the following link

http://jsplayground.syncfusion.com/n5twxbld

Query4:  How do you define a complex "View" (one that has complex content) like in the question I asked here https://www.syncfusion.com/forums/121638/fixed-element is this the correct way ? (Defining a ejmscrollpanel)

In the forum, you have handled the ScrollPanel wrongly. Usually ScrollPanel control renders within the div element of target element. Refer to the following link for online documentation of ScrollPanel.

http://help.syncfusion.com/mobilejs/scrollpanel/getting-started

We have updated your code example in the forum #121638. So please check the forum regarding the usage of ScrollPanel

Query6: Do you have some event for View been loaded? Let’s say I have navigation drawer with rel='nofollow' href to several views.

When the view is loaded using ejmListView rel='nofollow' href property, then there is no event will get triggered. But if we load the content dynamically to the View of navigation drawer, we can use the events “viewbeforeload”, “viewload” and “viewloadfailed” in AppView. These events needs to be achieved manually in the sample side.

We can use App.loadView method in our application to load the html file dynamically. Refer to the following code example.

[html]

<div data-role="ejmnavigationdrawer" data-ej-width="100" id="navpane" data-ej-targetid="header_leftbutton" data-ej-allowscrolling="true"

        data-ej-type="overlay" data-ej-position="fixed"

        data-ej-contentid="container">

        <div id="scrollcontent" class="defaultsample">

                <div id="tile1" class="tempimage e-m-state-active" data-ej-touchend="touch" data-role="ejmtile" data-ej-theme='dark' data-ej-imageurl='setting.png'

                    data-ej-imagepath="http://js.syncfusion.com/UG/Mobile/Content/tile" data-ej-text="Settings">

                </div>

                </div>

            </div>

We have used our Tile control inside the NavigationDrawer left pane as a template. On clicking the Tile, touch function will be triggered and the dynamic content will be loaded in right pane. Refer to the following code example.

[html]

<script>

        function touch(e) {

        //Closes the Navigation drawer

            $("#navpane").ejmNavigationDrawer("close");

        //gets the tile text so that respective html file will be fetched

        htmlFile = e.text

        App.loadView(htmlFile + ".html").done(function (absUrl, options, newPage, isAjaxLoading) {

            //cleans the div element

            $("#contents").empty();

            //Initializes the syncfusion widgets

            ej.widget.init(newPage);

            //Changes the document title as per selected tile

            document.title = e.text;

            //appends the newly fetched datas to the contents div

                $("#contents").append(newPage.show());

            });

        }

Once the tile is clicked, App.loadView method will fetch the respective html file and appends it to the body of the application and triggers the following events.

[html]

    <script>

         //Before fetching the html file

        $(document).bind("viewbeforeload", function (e) {

            console.log(e.type);

        });

        //After fetching the html file

        $(document).bind("viewload", function (e) {

            console.log(e.type);

        });

        //If html file is not in the respective location

        $(document).bind("viewloadfailed", function (e) {

            console.log(e.type);
        });
</script>

We have created simple sample to achieve your requirement. Refer to the sample in the following attachment.

Sample

Query7: When I click the "Home" the url is changing to http://...#home and the view with id=home is loaded (again, where is the router objects ?

As already explained in query2, we have used page and subpage concepts using Ajax navigation to load the View, instead of third party routers

Query8:  Can the views themselves contain syncfusion's components ? (In the sample the views only contain plain html content) , let’s say "home" div contains ejmListView.

Yes, we can use Syncfusion components to load the right side view.

While creating the sample based on your requirement with ListView on right pane, we have detected a bug. We have confirmed that “ListView not loaded properly in NavigationDrawer” is a defect and a support incident has been created under your account to track the status of this report. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents 


We have explained step by step procedure to render our Essential Studio Javascript controls in our online documentation. Refer to the following link for the document.

http://help.syncfusion.com/mobilejs/introduction/overview

And also we have described the control properties and their usage in the following API reference document.

http://help.syncfusion.com/mobilejs/api/ejmautocomplete



Regards,
Dhinesh R