Kendo Grid with Alerts

Uses the Kendo Grid to showcase bug in Firefox with alerts.

by Tevyn

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<div id="ResponseArea" style="display:none;"></div>
<br />
<div id="grid"></div>
<br />Enter A in the first row (with no comment) to see red modified tags and Note error. Then enter D KeyCode in next row to produce bug (you'll get two popups). Click OK to the first and OK to the second.  You'll see the validation of both rows disappear (behind scenes it is throwing d.editable == null error).
<p><b>Log:</b>&nbsp;
    <input type="button" id="ClearLog" value="Clear Log" style="float:right"/></p>
<div id="log"></div>

<!--
Entering:
A -- will show the discription and produce an icon in the Note field if the value is empty, mouse over icon tells you what to do.
    -- entering a note will clear the error icon.
    -- removing a note from A will show the error icon.
B -- will get popup saying the code cannot be used, adding the icon to the field to indicate error. It also places keycode B description into the Key description field.
C -- will produce a popup confirmation. Click Ok/Yes puts the description in the key description field. Yes/Ok does not require a note or produce the icon.  If click No/Cancel you will get the error icon in the KeyCode field
D -- will produce the C rule above and if Ok was clicked produces a second popup.
E -- will load description and show as modified only.
? -- produce an error icon in the KeyCode field, mouse over indicates why.

-->

CSS

.k-grid .field-validation-error
{
    background: no-repeat 2px 50% url(http://jsfiddle.net/favicon.ico);
    padding-left: 20px;
    display: table-cell !important; /* leaving common.css display:block causes issues with borders and padding. */
}

#ResponseArea
{
    background: no-repeat 2px 50% url(http://jsfiddle.net/favicon.ico);
    padding-left:22px;
    color: red;
    font-weight: bold;
}

JavaScript

// JavaScript
var data = [
    {
        ProductID: 1,
        ProductName: "Product Name 1",
        KeyCode: null,
        KeyDescription: null,
        CommentNote: null
    },
    {
        ProductID: 2,
        ProductName: "Product Name 2",
        KeyCode: null,
        KeyDescription: null,
        CommentNote: null
    },
    {
        ProductID: 3,
        ProductName: "Product Name 3",
        KeyCode: null,
        KeyDescription: null,
        CommentNote: null
    },
    {
        ProductID: 4,
        ProductName: "Product Name 4",
        KeyCode: null,
        KeyDescription: null,
        CommentNote: null
    }
];

var codes = {  
    ValidCodes: {  
        A : "This is code A",
        B : "This is code B",
        C : "This is code C",
        D : "This is code D",
        E : "A normal E code"
    },
    GetDescription: function (code)
        {
            if(!this.Contains(code)){
                return "";
            }
            return this.ValidCodes[code];
        },
    Contains: function (keyCode)
    {
        for( key in this.ValidCodes ) {
            if (key == keyCode)
            {
                return true;
            }
        }
        return false;
    }
};

$("#grid").kendoGrid({
    dataSource: {
        data: data,
        schema: {
            model: {
                id: "ProductID",
                fields: {
                    ProductName: {
                        type: "string",
                        editable: false
                    },
                    KeyCode: {
                        type: "string",
                        editable: true
                    },
                    KeyDescription: {
                        type: "string",
                        editable: false
                    },
                    CommentNote: {
                        type: "string",
                        editable: true
                    }
                } 
            } 
        }
    },
    scrollable:...