<div id="sorting"></div>
    <div id="grid"></div>
   
    <script type="text/javascript">
        $(document).ready(function () {
            var searchCriteria = "<%= SerializedSearchCriteria %>";

            $("#grid").kendoGrid({
                scrollable: false,
                sortable: false,
                pageable: true,
                sortable: {
                    mode: "multiple",
                    allowUnsort: true
                },
                columns: [
                            { field: "Relationship", title: "Clear", template: "# if(data.Relationship == 0) { # <img src='/images/Icons/Friend.png' alt='You are on this Brokers Cleared Carrier List' /> # } #" },
                            { field: "BondTypeID", title: "Bond" },
                            { field: "Phone", title: "Phone" },
                            { field: "Equipment", title: "TRLR" },
                            { field: "Age", title: "Age" },
                            { field: "PickUpDate", title: "PickUp" },
                            { field: "OriginCity", title: "Origin City" },
                            { field: "OriginState", title: "ST" },
                            { field: "OriginDistance", title: "DIST" },
                            { field: "DestinationCity", title: "Destination City" },
                            { field: "DestinationState", title: "ST" },
                            { field: "DestinationDistance", title: "DIST" },
                            { field: "Payment", title: "Payment" },
                            { field: "Length", title: "Length" },
                            { field: "Weight", title: "Weight" },
                            { field: "Days2Pay", title: "D2P" },
                            { field: "ExperienceFactor", title: "EXP" },
                            { field: "CompanyName", title: "Company" },
                            { field: "FuelCost", title: "Fuel" },
                            { field: "Miles", title: "ProM" },
                            { field: "AlternateMiles", title: "PCMi" },
                        ],
                rowTemplate: kendo.template($("#rowTemplate").html()),
                dataSource: {
                    schema: {
                        data: "d.LoadSearchingResults",
                        total: function (data) {
                            return 5000; //data.d.TotalResults;
                        }
                    },
                    pageSize: 20,
                    group: {
                        field: "GroupByID"
                    },
                    transport: {
                        read: {
                            url: "<%= RequestURL %>",
                            contentType: "application/json; charset=utf-8",
                            type: "POST"
                        },
                        parameterMap: function (options) {
                            var object = {};
                            object.pageIndex = options.page;
                            object.size = options.pageSize;
                            object.orderBy = options.sort;
                            return JSON.stringify({ options: object, criteria: searchCriteria });
                        }
                    },
                    //serverSorting: false,
                    serverPaging: true
                },
                change: function () {
                    var row = this.select();
                    row.addClass("Visited");
                    //alert(dataItem.DetailUrl);
                },
                dataBound: function (data) {
                    $("#grid tbody tr:odd").addClass("k-alt");

                    var descr = this.dataSource.sort() || [],
                    sorts = "";
                    $.each(descr, function () {
                        sorts += this.field + " sorted " + this.dir + "   ";
                    });
                    $("#sorting").html(sorts);

                    //                    my.contextMenu({
                    //                        trigger: '#grid tbody tr',
                    //                        leftButton: false,
                    //                        rightButton: true,
                    //                        menu: '#testMenu',
                    //                        callback: ctxCallback
                    //                    });
                }
            });
        });

            function ctxCallback(menuItem, trigger) {
                var id = $(trigger).attr("companyid");
                var menuValue = $(menuItem).attr("id");

                window.$.ajax({
                    type: "POST",
                    url: "/Services/Searching.svc/ContextMenuSave",
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    data: '{"companyId":"' + id + '","option":"' + menuValue + '"}',
                    success: function (response) {
                        switch (menuValue) {
                            case "FirstCall":
                                $("#grid tbody tr[companyid=" + id + "]").addClass("FirstCall");
                                break;
                            case "NoCall":
                                $("#grid tbody tr[companyid=" + id + "]").addClass("DontCall");
                                break;
                            case "DontShow":
                                $(trigger).hide();
                                break;
                            case "Reset":
                                $("#grid tbody tr[companyid=" + id + "]").removeClass("FirstCall");
                                $("#grid tbody tr[companyid=" + id + "]").removeClass("DontCall");
                                break;
                        }
                    }
                });
            }

            function MarkAsVisited(url, td) {
                $(td).parent('tr').addClass("Visited");
                manageVisitedCookie('Loads', $(td).parent('tr').attr("ID"));
                openRadWindow(url, 630, 700, null, 'LoadDetails' + url);
            }
        $("#menu").hide();
    </script>
            
    <script id="rowTemplate" type="text/x-kendo-tmpl">
        <tr class="# if(data.Preferred == 1) { # FirstCall # } if(data.DontCall == 1) { # DontCall # } if(data.Visited == 1) { # Visited # } #" id="${ID}" companyid="${CompanyId}">
            <td onClick="MarkAsVisited('${DetailUrl}', this)">
                # if(data.Relationship == 0) { # <img src='/images/Icons/Friend.png' alt='You are on this Brokers Cleared Carrier List' /> # } #
            </td>
            <td>
                #= BondColumn#
            </td>
            <td onClick="MarkAsVisited('${DetailUrl}', this)">
                ${ Phone }
            </td>
            <td onClick="MarkAsVisited('${DetailUrl}', this)">
                ${ Equipment }
            </td>
            <td onClick="MarkAsVisited('${DetailUrl}', this)">
                ${ Age }
            </td>
            <td onClick="MarkAsVisited('${DetailUrl}', this)">
                ${ PickUpDate }
            </td>
            <td onClick="MarkAsVisited('${DetailUrl}', this)">
                ${ OriginCity }
            </td>
            <td onClick="MarkAsVisited('${DetailUrl}', this)">
                ${ OriginState }
            </td>
            <td>
                # if(data.OriginDistance > 0) { #<a href="javascript://" onclick="openRadWindow('${OriginDistanceUrl}', '600', '500', false, 'Distance');">${ OriginDistance }</a># } else { #0#}#
            </td>
            <td onClick="MarkAsVisited('${DetailUrl}', this)">
                ${ DestinationCity }
            </td>
            <td onClick="MarkAsVisited('${DetailUrl}', this)">
                ${ DestinationState }
            </td>
            <td>
                # if(data.DestinationDistance > 0) { #<a href="javascript://" onclick="openRadWindow('${DestinationDistanceUrl}', '600', '500', false, 'Distance');">${ DestinationDistance }</a># } else { #0#}#
            </td>
            <td onClick="MarkAsVisited('${DetailUrl}', this)">
                ${ Payment }
            </td>
            <td onClick="MarkAsVisited('${DetailUrl}', this)">
                ${ Length }
            </td>
            <td onClick="MarkAsVisited('${DetailUrl}', this)">
                ${ Weight }
            </td>
            <td>
                <a href="javascript://" onclick="openRadWindow('${ Days2PayUrl }', 900, 700)">${ Days2Pay }</a>
            </td>
            <td>
                <a href="javascript://" onclick="openRadWindow('${ Days2PayUrl }', 900, 700)">${ ExperienceFactor }</a>
            </td>
            <td onClick="MarkAsVisited('${DetailUrl}', this)">
                ${ CompanyName }
            </td>
            <td>
                <div style="text-align: right">
                    <a title="${ FuelCostHover } " href="javascript://" onclick="openRadWindow('${ MilesUrl }', 900, 700)">${ FuelCost }</a>
                </div>
            </td>
            <td>
                <div style="text-align: right">
                    <a href="javascript://" onclick="openRadWindow('${ MilesUrl }', 900, 700)">${ Miles }</a>
                </div>
            </td>
            <td onClick="MarkAsVisited('${DetailUrl}', this)">
                <div style="text-align: right">
                    <a title="Practical Miles powered by PC Miler.">${ AlternateMiles }</a>
                </div>
            </td>
        </tr>
    </script>