First value in Select List for filter not selected by defailt

[Eagle_f90]

I am using a select list in my header filter but after filling the data when the page is loaded the select list is blank by default. If I click on the list I see all the values. How can I have the first value show in the dropdown when the page is load? (Note: ChangeTypes is a JS array filled earlier in the code)

Code: [Select]

var ChangeTypes = [],
                Priorities = [],
                ImpactTypes = [],
                Users = [];

            @foreach (var Type in Model.ChangeTypes)
            {
                @:ChangeTypes.push("@Type");
            }

            @foreach (var Type in Model.ImpactTypes)
            {
                @:ImpactTypes.push("@Type");
            }

            @foreach (var Priority in Model.Priorities)
            {
                @:Priorities.push("@Priority");
            }

            @foreach (var User in Model.Users)
            {
                @:Users.push("@User");
            }

            var colModel = [
                        { title: "Project ID", dataType: "integer", dataIndx: "ID", hidden: true },
                        { title: "Project Name", dataType: "string", dataIndx: "Name", resizable: true, width: 250, halign: "center", filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }},
                        { title: "Notes", dataType: "string", resizable: false, width: 75, halign: "center" },
                        { title: "Change Type", dataType: "string", dataIndx: "Type", resizable: true, width: 169, halign: "center", filter: { type: 'select', options: [ChangeTypes], condition: 'equal', value: 'IN', prepend: { '': '--Select Type--' }, listeners: ['change']}},
                        { title: "Priority", dataType: "string", dataIndx: "Priority", resizable: true, width: 55, halign: "center" },
                        { title: "Impact", dataType: "string", dataIndx: "Impact", resizable: true, width: 55, halign: "center" },
                        { title: "Assigned To", dataType: "string", dataIndx: "AssignedTo", resizable: true, width: 150, halign: "center" },
                        { title: "Estimated Start Date", dataType: "date", dataIndx: "EstimatedStartDate", resizable: true, width: 145, halign: "center" },
                        { title: "Estimated Completion Date", dataType: "date", dataIndx: "EstimatedEndDate", resizable: true, width: 165, halign: "center" },
                        { title: "Date Actually Started", dateType: "date", dataIndx: "DateStarted", resizable: true, width: 145, halign: "center" },
                        { title: "Date Actually Compleated", dataType: "date", dataIndx: "DateCompleated", resizable: true, width: 165, halign: "center" },
                        { title: "Reason For Change", dataType: "string", dataIndx: "Reason", resizable: true, halign: "center", width: 283, filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }},
                        { title: "Approval Status", dataType: "string", dataIndx: "ApprovalStatus", resizable: true, width: 105, halign: "center" },
                        { title: "Approved By", dataType: "string", dataIndx: "ApprovedBy", resizable: true, width: 135, halign: "center" }
            ];


[Goodgulf]

I am doing it like this.  Once you set the value, you need to trigger the change event for the filter.  There may be a cleaner way to do it though.

Code: [Select]

function fncPopulateGrid(oData){
// Load the data into the grid.
$oGrid.pqGrid("option", "dataModel.data", oData);

// Set up the recordsets for our three selection box filters.
var oColumnModel = $oGrid.pqGrid("option", "colModel");
oColumnModel[2].filter = { type: "select", condition: "equal", prepend: {'': ""}, valueIndx: "PaymentPeriod", labelIndx: "PaymentPeriod",
listeners: ['change'], options: $oGrid.pqGrid("getData", { dataIndx: ["PaymentPeriod"]})};
oColumnModel[3].filter = { type: "select", condition: "equal", prepend: {'': ""}, valueIndx: "AgencyName", labelIndx: "AgencyName",
listeners: ['change'], options: $oGrid.pqGrid("getData", { dataIndx: ["AgencyName"]})};
oColumnModel[4].filter = { type: "select", condition: "equal", prepend: {'': ""}, valueIndx: "PayStatus", labelIndx: "PayStatus",
listeners: ['change'], options: $oGrid.pqGrid("getData", { dataIndx: ["PayStatus"]})};
$oGrid.pqGrid("option", "colModel", oColumnModel);

// Let's set the default value fo "Pay Status" to "Released" if appropriate.
if($.inArray('Released', oColumnModel[4].filter.options !== -1)){
oColumnModel[4].filter.value = 'Released';
}

// Now that the grid is loaded with data and the filters are set up, let's update the client's view.
$oGrid.pqGrid("refreshDataAndView");

// Trigger the filter event for the "PayStatus" column since we are re-selecting a value.
$("select[name='PayStatus']" ).change();
}