Jsgrid: Select Box within JSGrid does not show value until clicked

[brianDHall]

We are having a display issue. The value of the SELECT control within the Grid is not displaying until the row is clicked.
MVC application:
public class ReimbursementMethodViewModel
{
public decimal TRAVEL_REIMBURSEMENT_METH_SEQ { get; set; }
public string DESCRIPTION { get; set; }
}

VIEW:
@model IList

var methods = @Html.Raw(Json.Encode(@Model));

var db = { loadData: function (filter) { var d = $.Deferred();
$.ajax({
url: '@ViewBag.API_URL' + "TRAVEL_REIMBURSEMENT_TYPES",
type: "GET",
data : filter,
dataType: "json"
}).done(function (response) {d.resolve(response.value);
});
return d.promise();

    }

};
$(function (refreshgrid) {
$("#jsGrid").jsGrid({
inserting: true,
editing: true,
sorting: false,
paging: true,
autoload: true,
width: "115%",
height: "auto",
controller: db,
fields: [
{ name: "TRAVEL_REIMBURSEMENT_TYPE_SEQ", title: "", type: "number", width: 30, editing: false, inserting: false },
{ name: "DESCRIPTION", title: "Description", type: "text", width: 125, editing: true, inserting: true },
{ name: "TRAVEL_REIMBURSEMENT_CODE", title: "ADP Code", type: "text", width: 30, editing: true, inserting: true },
{ name: "methods", title: "Pay Method"
, type: "select"
, items: methods
, valueField: "TRAVEL_REIMBURSEMENT_METH_SEQ"
, textField: "DESCRIPTION"
, filterValue: function() { return this.items[this.filterControl.val()][this.textField];}
},
{ type: "control", deleteButton: true, editButton: true, insertButton: true, editButtonTooltip: "Edit Amount" },
{
itemTemplate: function (value,item) {
var $result = jsGrid.fields.control.prototype.itemTemplate.apply(this, arguments);
var $EditButton = $("")
.text("Edit More")
.click(function(e){
location.href = '@Url.Action("Details", "ReimbursementType")' + '?' + "ptypeseq=" + item.TRAVEL_REIMBURSEMENT_TYPE_SEQ;
});
return $result.add($EditButton);
}
}
]
});
});

[tabalinas]

Could you provide the resulting html with js rendered on the client?

[tabalinas]

Could you provide a demo (or a jsfiddle) showing the issue? Or at least a screenshot of how it looks.

[Adondriel]

Also, please format the code with markup, so that it is easier to read.

[tabalinas]

Close due to inactivity.

[Adondriel]

@brianDHall I actually just had this issue. 1. Make sure your columns "name" attrib is the same as the "valueField" attrib. 2. Done

[cahpalencia]

I have this Issue too, could you help us, I think the problem is when the items Id have no the same name as the field.
here is the result html: //jsfiddle.net/ncyoowf2

[tabalinas]

@cahpalencia, I'm sure I understand your fiddle, could you provide better example demonstrating the issue?

[cahpalencia]

Thank for your answer here's an example: http://dbprojectdesa.cloudapp.net/internal/Example/jsGrid

[tabalinas]

@cahpalencia, so the reason is that value field has string type, but in the data you have numeric values in Country field. Both should have the same data type.

BTW: nice UI, really like it J

[cahpalencia]

Thanks a lot!! it worked!

btw: really nice grid

[tabalinas]

You are welcome!
Thank you for the feedback J

[PlatoArestolus]

thanks, guys