Posted on

Where is the Hosts file location in Windows 8?

The Hosts files is a file that allows you to override the DNS lookups for specific domains.

Say you want to test your application that has brianseekford.com hardcoded but you actually want to run it against your local computer IP 127.0.0.1

You edit the hosts file and simply add the entry:

127.0.0.1      brianseekford.com

ALL dns lookups will now return 127.0.0.1 when looking for that domain, so your browsers etc will now all redirect. It was also the old school way to do ad blocking, put in a domain you never want to resolve. i.e. ads.joe.com

Anyway, now that you know what it does, this is where to find it:

C:\Windows\System32\drivers\etc

Remember, open notepad as Administrator FIRST, otherwise you wont be able to save.

 

Posted on

How to scroll a container or element into view using jQuery javascript in your html.

I had a simple need. This functionality expands on the way I was bringing a Kendo Grid detail template into view on selection. I wanted a better look feel so I dug a little deeper.

I adapted this function to work on any container or element. I am using this in a custom table that when click make another row visible. I wanted the whole row to be displayed if possible, but only scroll if I needed to. This code will scroll only if needed, load the container to appear at least at the bottom and if the container is too large, drags it to the top.

Super easy to use and great look and feel.

     function scrollContainerIntoViewIfNeeded(container) {

                var docViewTop = $(window).scrollTop();
                var docViewBottom = docViewTop + $(window).height();

                var elemTop = $(container).offset().top;
                var elemBottom = elemTop + $(container).height();

                var isScrolled = ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));

                if (!isScrolled) {
                    if ($(container).height() > $(window).height()) { //then just bring to top of the container
                        $(window).scrollTop(elemTop)
                    } else { //try and and bring bottom of container to bottom of screen
                        $(window).scrollTop(elemTop -  ($(window).height() - $(container).height()));
                    }

                }
        }

 

usage.

scrollContainerIntoViewIfNeeded($("#myContainer"));

Happy coding.

Posted on

How to scroll the detail row of a Kendo Grid into view on select

I decided I liked the idea of only having one detail pane at a time in my web grid. It gets too cluttered having a number of them open. I got feedback from my users that when selecting a row towards the end of the screen, they had to then scroll to see all the details.

I did a simply time cost analysis and instead of changing the UI to show the data in a popup, it was faster and cheaper just to scroll down the page. Simple, eh.

Here is the script to do a scroll when a row is selected in the Kendo Grid to ensure the detail pane is visible.

  function engagementRowSelected(e) {

            var eventTarget = (event.target) ? $(event.target) : $(event.srcElement);

            var grid = $("#engagementsContainer").data("kendoGrid");
            var gridSource = grid.dataSource;
            var selectedRow = this.select()[0];

            var position = $(selectedRow).position();
            $(window).scrollTop(position.top);

        }

I left out all the code that does the selection, and forcing to display only one row at a time. If that is something people want to see or use, I can post that as a simple demo later.

Happy coding!

Posted on

Kendo UI Chart Legend Overlaps with the Plot area and the pie numbers

I kept running into an issue where the chart kept drawing over itself. Basically, the chart would draw the lines and numbers that extend from the pie area and overlap the legend at the bottom. It did it when I had it on the right as well. This is stupid, and stupid I had to use a workaround, but here is the workaround.

My style. Edit as you need for yours.

        .chart-wrapper, .chart-wrapper .k-chart
        {
            height: 300px;
            width: 325px;
            margin-bottom: 20px;
        }

The code I had to add to my chart create:

 $(phaseContainerId).kendoChart({
                title: {
                    position: "bottom",
                    visible: false

                },
                legend: {
                    visible: true,
                    offsetX: -0,
                    offsetY: 20,
                    position: 'bottom'
                }
                ,........

I also added the following to avoid clipping, which can happen.

 chartArea: {
                    background: "",
                    margin: { top: 30, left: 5, right: 5, bottom: 15 }, padding: { top: 10, left: 10, right: 10, bottom: 10 }
                },

Notice the offset. That moves the legend around. You may need to play with the numbers depending on your font and other design choices.

Happy coding!

Posted on

How to escape the hash(#) sign in a Kendo Grid column template?

If you are writing a Kendo Grid Column template and you run into the malformed template issue when trying to add a hyperlink that executes a javascript function (i.e. <a href=’#’ onclick=’function(me)’> blah </a> ), then here is the easy fix.

As with all the Telerik lack of documentation, or ease of finding, this one isn’t obvious but is easy. Just add to backslashes \#.

This

<a href=’#’ onclick=’function(me)’> blah </a>

becomes this

<a href=’\#’ onclick=’function(me)’> blah </a>

Example template of mine:

   <script type="text/x-kendo-tmpl" id="myPortfolio_PlanningTemplate">
      <a class='noStyleActionLink' href='\#' onclick='showPlanning("#: Id #")'> <div> 
        # var imgurl='redLight.png',statusText='Unknown - ERROR' #
        # if(PlanningStatus==PlanningStatusEnum.Not_Started){ imgurl='greyLight.png';statusText='Not Started' }  #
        # if(PlanningStatus==PlanningStatusEnum.On_Track){ imgurl='greenLight.png';statusText='On Track' }  #
        # if(PlanningStatus==PlanningStatusEnum.Deadline_Approaching){ imgurl='yellowLight.png';statusText='Deadline Approaching' }  #
        # if(PlanningStatus==PlanningStatusEnum.Overdue){ imgurl='redLight.png';statusText='Overdue' }  #
        # if(PlanningStatus==PlanningStatusEnum.Complete){ imgurl='greenLight.png';statusText='Complete' }  #            
         <img src='@Url.Content("~/Content/Images/lights/")#: imgurl #'/>  #: statusText # 
        </div>          
        </a>
    </script>

Happy coding!

Posted on

Fix: Kendo Grid Template gives error “Unable to get value of the property ‘replace’: object is null or undefined”

I got the lovely unhelpful error “Unable to get value of the property ‘replace’: object is null or undefined” from the Kendo Grid when I added a template to a column. This was a completely useless error that led me to staring at the javascript stack and walking through the minified code. Which, by the way, is very painful to look through obfuscated minified code.

After entirely too long analyzing the code, I finally figured out the root cause. I had an ever so small typo in my template retrieval declaration and it was returning back a null template. Why on earth didn’t the Telerik guys NULL check this and fire a friendly error? All of two lines of code would have saved me some trouble.

See, javascript is entirely too friendly to typing mistakes.

Here is the errant code:

    {
                             title: "Planning", width: "100px",                                       
                             template: kendo.template($("myPortfolio_PlanningTemplate").html())
                         },

Here is the fixed code.

    {
                             title: "Planning", width: "100px",                                       
                             template: kendo.template($("#myPortfolio_PlanningTemplate").html())
                         },

Painful lesson in remember to put in the hashtag for ID lookups. Easy to forget when in a hurry.

Happy Coding!

Posted on

How to animate a slide from the right with the Jquery show command

I didn’t see this in the documentation, but I’m sure its there somewhere. Here is an easy way to slide in a container/div/etc from the right.

$("#myActionsAuditUnitContainer").show({ effect: "slide",direction:"right", duration: 900 });

Use the direction option. Nice and easy.

Happy Coding!

Posted on

How to add complex headers to a Kendo grid using simple jQuery javascript

I was trolling through the horrible documentation provided by Telerik for the kendo grid. I needed to create a complex header. Basically, a two row header so that I could group columns in a visually meaningful way.

simple example:

I spent far too much time reading how it couldn’t be done. A light bulb finally hit me, this is html. Yeah, flexibility abounds if you can be clever. I simply opened up the old browser developer tool and looked at the generated html for the grid.I then realized, this is a simple table, why not just inject another table row.

So, here is the easy way to add another row to your kendo grid and make a nice complex header. You can use this technique to go to town on adding additional features to your grid as well.

//create grid.

function BuildMyActionsList(tasks) {
            var list = $("#tasksContainer");
            list.empty();

            list.kendoGrid(
                {
                    dataSource: {
                        data: tasks,
                        schema: {
                            model: {
                                id: "Id",
                                fields: {
                                    Name: { type: "string" },                                    
                                    LessThanEGAs: { type: "number" },
                                    GreaterThanEGAs: { type: "number" },
                                    LessThanRisks: { type: "number" },
                                    GreaterThanRisks: { type: "number" },
                                    LessThanCNs: { type: "number" },
                                    GreaterThanCNs: { type: "number" },                                    
                                    ReportSignDate: { type: "date" }
                                }
                            }
                        },
                        //     pageSize: 20
                    },
                    dataBound: addExtraStylingToTasksGrid,
                    filterable: true,
                    scrollable: true,
                    sortable: true,
                    columns: [
                        {
                            field: "Name", title: "Engagement", width: "175px",
                            filterable: {
                                extra: false,
                                operators: {
                                    strings: {
                                        startswith: "Starts with",
                                        eq: "Is equal to",
                                        neq: "Is not equal to"
                                    }
                                }
                            }
                        },                        
                        {
                            field: "LessThanEGAs", title: "EGA's", width: "80px"
                        },
                        {
                            field: "GreaterThanEGAs", title: "CN's", width: "80px"
                        },
                        {
                            field: "LessThanRisks", title: "Risk's", width: "80px"
                        },
                        {
                            field: "GreaterThanRisks", title: "EGA's", width: "80px"
                        },
                        {
                            field: "LessThanCNs", title: "CN's", width: "80px"
                        },
                        {
                            field: "GreaterThanCNs", title: "Risk's", width: "80px"
                        },
                        {
                            field: "ReportSignDate", title: "Report Signing", width: "125px", filterable: false                            
                        }
                    ]
                });

            list.find("thead").first().prepend("<tr><th></th><th class='lessThanDaysGrouping' colspan='3'>&lt;= 2 Days</th><th  class='greaterThanDaysGrouping' colspan='3'>&gt; 7 Days</th><th></th></tr>");

        }

Notice , the line at the end. This is where we search the table for the header and then prepend the row. Just make sure your new row definition aligns with the same column structure as your table. If you need help with this, search on html tables on google.

Line of code that does the magic:

  list.find("thead").first().prepend("<tr><th></th><th class='lessThanDaysGrouping' colspan='3'>&lt;= 2 Days</th><th  class='greaterThanDaysGrouping' colspan='3'>&gt; 7 Days</th><th></th></tr>");

 

Happy Coding!