Telerik – Appbuilder > Getting javascript / jquery scroll functions to work in Telerik

/***********************************************

UPDATE

There is now a new way for scrolling to the top of the page in Telerik, and it does NOT require you to set the Kendo application to have native scrolling enabled!

The function call for doing this is:


kendo.mobile.application.scroller().reset();

Calling this function will scroll the screen to the top. And it does not require you to have to set useNativeScrolling: true as well.

In fact, I would recommend the above solution BEFORE trying the solution below, as I have had issues with the below solution (the application would lock-up the scrolling, so the user could not even scroll the window at all, ie with a finger swipe).

Hope this helps!

Jeff

***********************************************/

Hi there!

The other day I needed to find a way to scroll to the top of the page in Telerik (after pressing a button). I tried a standard javascript function call to do this – namely, window.scrollTo(0, 0), but this didn’t work for me right away. I had to set the Kendo application object to have native scrolling enabled in order to get this function to work.

To do this, find in your code where you have declared the kendo.mobile.Application object, and modify its initialization properties to have useNativeScrolling: true. In my code (generated by Telerik), this is found in the app.js file:

app.js


var bootstrap = function() {
        $(function() {
            app.mobileApp = new kendo.mobile.Application(document.body, {
                transition: 'slide',
                skin: 'nova',
                initial: 'components/home/view.html',
                useNativeScrolling: true
            });

            kendo.bind($('.navigation-link-text'), app.navigation.viewModel);
        });
    };

By default, the useNativeScrolling: true line is not included, so you have to add that in. Once that line is added, you can now use window.scrollTo(0, 0) or other javascript/jquery scroll functions in your code!

By the way, if you do not want to use native scrolling, you may want to consider using the Kendo Mobile ‘scroller’ object instead. I found myself that this would not work for me, but it might work for you. You can find out more information about it from here – http://docs.telerik.com/kendo-ui/api/javascript/mobile/ui/scroller. Also, if you want extra Kendo tips, as well as more info about the differences/advantages of native scrolling (vs Telerik scrolling) you can visit this link here – http://developer.telerik.com/featured/20-kendo-ui-mobile-telerik-appbuilder-tips-tricks/.

Hope this helps!

Telerik – Appbuilder > Enable / Disable navigation (in a view)

Hi there!

A new lesson in coding I had to learn the other day – I was working with Telerik – Appbuilder, and I wanted to be able to add the navigation to a view (the bottom menu) but at the same time did NOT want to add the current view to the navigation. With the Telerik UI, you can add the navigation to a view, but it always requires that the current view also be included in it.

So, I found a way to add the navigation, without adding the current view to it! The below code does it, and works as follows:

1) First, you will need to figure out the id of the current view. Open the view.html file of the view you want to add the navigation to, and look at the very top line. It will look something like this:

view.html


<div data-role="view" data-title="View" data-layout="main-nonav" data-model="app.myView" data-show="app.myView.onShow" data-after-show="app.myView.afterShow" data-reload="true" id="myViewScreen" class="screen">

If you look carefully, you will see the id of this view is myViewScreen.

Also note that in this view, you can see that the data-layout attribute is set to main-nonav. As you could imagine, this means the view is configured to have no navigation! To fix this, the below code does this, and is as follows:

view.html


<!-- START_CUSTOM_CODE_myView -->
    <!-- Add custom code here. For more information about custom code, see http://docs.telerik.com/platform/screenbuilder/troubleshooting/how-to-keep-custom-code-changes -->
    <script>
        // enable navigation
        $('#myViewScreen').attr("data-layout", "main");
    </script>
    .... (rest of HTML/code for view)

This little chunk of code simply changes the attribute value of the view (the attribute being ‘data-layout’) to ‘main’. And now that the view has this value for the ‘data-layout’ attribute, it will now have the navigation in it!

NOTE: One big thing to note as well about the above code – you may be tempted to simply change the ‘data-layout’ attribute in the very first line of view.html to ‘main’. YOU DO NOT WANT TO DO THIS! And the reason you do not want to do this is because, the first line of code is Telerik-generated. This means, once you make changes to the views (ie add a new view, or change a view title), it will erase the data-layout=”main” change, and you will no longer have the desired functionality.

Hope this helps!

PS. Also, although I haven’t tried it, I could imagine you could disable the nav from a view, for a view that you want to include in the navigation. In other words, you want the current view to be in the nav bar, but you don’t want the nav bar to show in the current view.

If this is what you want to do, you could imagine it would be similar to the above. Simply find the id (as discussed above) of the view, and with it, add the following code to view.html:

view.html


<!-- START_CUSTOM_CODE_myView -->
    <!-- Add custom code here. For more information about custom code, see http://docs.telerik.com/platform/screenbuilder/troubleshooting/how-to-keep-custom-code-changes -->
    <script>
        // disable navigation
        $('#myViewScreen').attr("data-layout", "main-nonav");
    </script>
    .... (rest of HTML/code for view)

As you can see, this will change the ‘data-layout’ attribute value from “main” (which it should already be) to “main-nonav”. By doing this, it should remove the nav from the current view.

Again, hope this helps 😉

Happy coding everyone!

Entity Framework 7 > Seed a user and setting up roles

During my coding travels the other day, I was combing the web in search for a tutorial on how to add an initial user (via migrations) and setup a role for that user in EF7.  Being unable to find such a post, I have decided to post my own as a tutorial.

SETTING UP AN ‘ADMIN’ USER AND ‘ADMIN’ ROLE

I would have imagined that to set this up, the code should go somewhere in the ‘Migrations’ code files.  Ironically enough, this didn’t seem to work for me.  Hopefully in the future this sort of thing will go in ‘Migrations’, but at this point in time, I turned elsewhere to ‘Models/ApplicationDbContext.cs’ and ‘Startup.cs’.  When ‘Startup.cs’ is executed upon project startup, it can check for seed users/roles.  And DB accessibility is available via ‘ApplicationDbContext.cs’

As for the code that does this magic, it is as follows:

Startup.cs


...
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
        {
            loggerFactory.AddConsole(Configuration.GetSection("Logging"));
            loggerFactory.AddDebug();

            app.UseApplicationInsightsRequestTelemetry();

            if (env.IsDevelopment())
            {
                app.UseBrowserLink();
                app.UseDeveloperExceptionPage();
                app.UseDatabaseErrorPage();

                try
                {
                    using (var serviceScope = app.ApplicationServices.GetRequiredService<IServiceScopeFactory>()
                        .CreateScope())
                    {
                        serviceScope.ServiceProvider.GetService<ApplicationDbContext>()
                             .Database.Migrate();

                        var userManager = app.ApplicationServices.GetService<UserManager<ApplicationUser>>();
                        var roleManager = app.ApplicationServices.GetService<RoleManager<IdentityRole>>();

                        serviceScope.ServiceProvider.GetService<ApplicationDbContext>().EnsureSeedData(userManager, roleManager);
                    }
                }
                catch { }
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");

                // For more details on creating database during deployment see http://go.microsoft.com/fwlink/?LinkID=615859
                try
                {
                    using (var serviceScope = app.ApplicationServices.GetRequiredService<IServiceScopeFactory>()
                        .CreateScope())
                    {
                        serviceScope.ServiceProvider.GetService<ApplicationDbContext>()
                             .Database.Migrate();

                        var userManager = app.ApplicationServices.GetService<UserManager<ApplicationUser>>();
                        var roleManager = app.ApplicationServices.GetService<RoleManager<IdentityRole>>();

                        serviceScope.ServiceProvider.GetService<ApplicationDbContext>().EnsureSeedData(userManager, roleManager);
                    }
                }
                catch { }
            }
...

 

ApplicationDbContext.cs


public class ApplicationDbContext : IdentityDbContext
    {
        protected override void OnModelCreating(ModelBuilder builder)
        {
            base.OnModelCreating(builder);
            // Customize the ASP.NET Identity model and override the defaults if needed.
            // For example, you can rename the ASP.NET Identity table names and more.
            // Add your customizations after calling base.OnModelCreating(builder);

        }

        public async void EnsureSeedData(UserManager userMgr,RoleManager roleMgr)
        {
            if (!this.Users.Any(u => u.UserName == "admin@mydomain.com"))
            {
                // Add 'admin' role
                var adminRole = await roleMgr.FindByNameAsync("admin");
                if (adminRole == null)
                {
                    adminRole = new IdentityRole("admin");
                    await roleMgr.CreateAsync(adminRole);
                }

                // create admin user
                var adminUser = new ApplicationUser();
                adminUser.UserName = "admin@mydomain.com";
                adminUser.Email = "admin@mydomain.com";

                await userMgr.CreateAsync(adminUser, "MYP@55word");

                await userMgr.SetLockoutEnabledAsync(adminUser, false);
                await userMgr.AddToRoleAsync(adminUser, "admin");
            }
        }
...

NOTES

  • If you find your seed user is not being added, it could be due to your password not meeting password restriction requirements.  To check, change the line to
    var result = await userMgr.CreateAsync(adminUser, "<YOURPASSWORDHERE>");

    and view the result variable in the debugger to see what requirements you are missing

  • In Startup.cs, you need to place repeating code in both the
    if (env.IsDevelopment())

    and the else block that follows.  This is so that the ‘EnsureSeedData’ function is called regardless to whether the environment is currently in dev mode, or prod mode.

 

Hope this helps, and happy coding! 🙂