System.InvalidOperationException with RadRichTextbox from Telerik in WPF

If you have an HTML document that you import into the RadRichTextbox that has images and you are hosting WPF within MFC (c++), then you are probably running into this issue. Right along with all the people who have a steering wheel on the right side of the car driving around in the States. Yeah, all 1 of us.

Anyway, it’s an issue for us but here is the work around since Telerik will probably be slow to fix it, if they do. Quick backstory, they  load the images using WebClient instead of loading from disk. Better yet, they use the async methods on the webclient with a callback. We all know how much WPF loves stuff from other threads.

Here is the fix.

Snippet

  {//.........some function some where in time.
  var formatter = new HtmlFormatProvider();//The thing you use to load your html
    formatter.ImportSettings.LoadImageFromUrl += ImportSettings_LoadImageFromUrl;
    var doc = formatter.Import(html);//html is your variable with your html....from whereever
    boxxy.Document = doc;//boxxy is my richtextbox instance
}
 //the meat and potato's 
void ImportSettings_LoadImageFromUrl(object sender, LoadImageEventArgs e)
{           
    using (var file = new FileStream(e.Url, FileMode.Open))
    {
        e.ImageElement.UriSource = null;//prevent them from trying to load in background
        e.ImageElement.Init(file, Path.GetExtension(e.Url));//load from our stream
        e.ImageElement.ImageSource.Freeze();//prevent cross thread issue by freezing it.
    }
    e.Handled = true;
}

 

Happy Coding!

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.

Click event bug with the iPad when using jQuery

I am writing a web application that uses a kendo grid with a detail pane. I hooked up a click event on a table in the detail pane to navigate to another page. It worked beautifully on the desktop. I tested on the iPad, and when you clicked a row, it would immediately fire off the click event and navigate away. WTF.

This drove me nuts. I found a person that also had a click issue posting about their oddity. Slightly different for them, but the fix is the one and the same.

It turns out that on the iPad, you can bind to the touchevent event instead of the click event and the problem goes away. It also takes out the 300ms delay some complain about.

Implementation is rather easy. Instead of using .click(function….) use bind.

Put this at the top of your script section.

  var ua = navigator.userAgent,
            clickEventBindingName = (ua.match(/iPad/i)) ? "touchstart" : "click";//stupid ipad workaround

Now, in your code, you simply using this to capture the events.

  $("#YOURELEMENT").bind(clickEventBindingName,
                function () {
                    doStuff();
                }
                );

Problem solved.

 

Happy Coding.

 

How to set specific filter options with the Kendo UI Grid in Javascript!

I spent about an hour trying to decipher the cryptic documentation that Telerik provides. It’s really difficult to use, especially with hundreds of method on one page and not even organized. Clicking each property should give access to its member properties and be navigable heirarchicaly. Well, its not.

Anyway, rant over. I was trying to limit the options for a filter on one of my columns. Seems easy enough, right? Well, I kept pasting the stupid example code in and nothing happened.

It turns out, that you can indeed set column specific filter options. Which made me happy, but you need to configure the filter options based on the data type of the column. Yeah, stupid to me. If I am including the names, which are generic across most of the types, this should have been easier.

Take note of the member property you set. See, one instance is called strings. One is called number. I love the inconsistency with the pluralization too, so fun.

So, here is an example of a string column.

 {
                            field: "EngagementName", title: "Engagement", width: "175px",
                            filterable: {
                                        extra: false,
                                        operators: {
                                            strings: {
                                                    startswith: "Starts with",
                                                    eq: "Is equal to",
                                                    neq: "Is not equal to"
                                            }
                                        }
                                    }
                        },

Here is an example of a number(int) column.

{
                            field: "SystemType", title: "Type", width: "80px",
                            template: function(dataItem) {
                                return systemTypeToString(dataItem.SystemType);
                            },
                            filterable:
                                {
                                    ui: systemTypeFilter,
                                    operators: {
                                        number: {
                                            eq: "Is equal to",
                                            neq: "Is not equal to"
                                        }
                                    }
                                }
                        },

Look through the docs and you will see there is a date, enums, etc. Just make sure to match that property name to the type of the column.

In case that confused you, here is a full column definition with filters.

 
  columns: [
                        {
                            field: "EngagementName", title: "Engagement", width: "175px",
                            filterable: {
                                        extra: false,
                                        operators: {
                                            strings: {
                                                    startswith: "Starts with",
                                                    eq: "Is equal to",
                                                    neq: "Is not equal to"
                                            }
                                        }
                                    }
                        },
                        { field: "EntityName", title: "Entity",  filterable: false},
                        {
                            field: "SystemType", title: "Type", width: "80px",
                            template: function(dataItem) {
                                return systemTypeToString(dataItem.SystemType);
                            },
                            filterable:
                                {
                                    ui: systemTypeFilter,
                                    operators: {
                                        number: {
                                            eq: "Is equal to",
                                            neq: "Is not equal to"
                                        }
                                    }
                                }
                        },
                        {
                            field: "DateAssigned", title: "Assigned", width: "125px", filterable: false,
                            template: function(dataItem) {
                                //var taskDate = new Date(dataItem.DateAssigned.match(/d+/)[0] * 1);
                                var taskDate = new Date(dataItem.DateAssigned);
                                var offset = new Date().getTimezoneOffset();
                                    taskDate.setMinutes(taskDate.getMinutes() - offset);
                                      return  humaneDate(taskDate);
                                }
                        }
                    ]

Happy coding!

What is the difference between # and . in CSS?

I kept seeing style generators format some css tags with a #(pound) sign and the css style have a .(period) in front of the declaration. This got me to thinking, wtf is the difference? I was never a big CSS stylesheet guy. I know my way around it, but generally used style builder tools to save me the headache of all the little tag nuances. I also have been hand coding HTML for well over a decade. So, when I saw a # sign, it threw me off.

I am sure it has been around a lot longer than I give it credit, but I figured I would research what its use is for. Of course, the answer is amazingly simple.

# is for ID referencing and . is for class declaration.

/*  normal class declaration. What I am used to */

.MyClass
{
    width: 100%;
}

 

/* fancy ID referencing */

#Sidebar
{
   width:100px;
}

 

If you don’t know the difference between a class and an ID, you probably don’t program javascript or forms often. Simply put, the class is a reusable style that can be applied to a number of elements. The ID is the unique identifier for a specific element. Only one element on a page will have that ID. N elements on the page can use the same class.

<a id=lnkHomePage href=’Home’>Go Home</a>

Above, lnkHomePage is the ID. To reference in CSS:

#lnkHomePage{
font-weight: bold;
}

This will style only that one tag. You know how to use classes, so I won’t bore you with that.

Well, short example.

<a id=lnkHomePage class=MyClass href=’Home’>Go Home</a>

Above uses the MyClass class declaration, shown up above.

Hope this helps clarify this simply concept. At least now you will know why the tags appear the way they do. Personally, I don’t see a lot of utility for the ID CSS reference unless you really like all your styles in one place and don’t like inline styling.

Happy coding!