jQWidgets Forums
jQuery UI Widgets › Forums › Grid › The drop down in grid column does not set value
Tagged: jqxDropDownList, jqxgrid, unfocus
This topic contains 1 reply, has 2 voices, and was last updated by Hristo 9 years, 8 months ago.
-
Author
-
Hi,
I have a grid with few dropdowns as columns. The drop down in grid column does not set value until i focus out of that column and move to any other column. But once i select the value from drop down it should set it, not wait for focus out.
Grid:
$("#statusTrend").jqxGrid( { width: '100%', //source: individualReleaseStatusAdapter, pageable: true, //height:'100%', autoheight: true, sortable: true, altrows: true, enabletooltips: true, selectionmode: 'checkbox', theme: 'arctic', editable: true, //showemptyrow: true, columns: [ { text: 'BU', datafield: 'BUSINESS_UNIT_ID', enablehover: true , width: 'auto', columntype: 'dropdownlist', displayField:'BUSINESS_UNIT_NAME', valueField:'BUSINESS_UNIT_ID', createeditor: function (row, cellvalue, editor) { editor.jqxDropDownList({source: buAdapter, displayMember: "BUSINESS_UNIT_NAME", valueMember: "BUSINESS_UNIT_ID"}); }}, { text: 'Status', datafield: 'STATUS_ID', width: 'auto', columntype: 'dropdownlist', displayField:'STATUS_NAME', valueField:'STATUS_ID', createeditor: function (row, cellvalue, editor) { editor.jqxDropDownList({source: statusAdapter, displayMember: "STATUS_NAME", valueMember: "STATUS_ID"}); }}, { text: 'Trend',hidden:true, datafield: 'TREND_ID', width: 'auto', columntype: 'dropdownlist', displayField:'TREND_NAME', valueField:'TREND_ID', createeditor: function (row, cellvalue, editor) { editor.jqxDropDownList({source: trendAdapter, displayMember: "TREND_NAME", valueMember: "TREND_ID"}); }}, { text: 'Display Order', datafield: 'DISPLAY_ORDER', width: 'auto', columntype: 'numberinput' }, { text: 'Exclude', twostatecheckbox: true, datafield: 'EXCLUDE', columntype: 'checkbox',width:'auto'} ], showstatusbar: true, showemptyrow: true, renderstatusbar: function (statusbar) { var me = this; var container = $("<div style='overflow: hidden; position: relative; margin: 5px; height:250px;'></div>"); var addButton = $("<div style='float: left; margin-left: 2px;'><img style='position: relative; margin-top: 2px;' src='/rtrack/resources/jqx/images/add.png'/><span style='margin-left: 2px; position: relative; top: -3px;'>Add</span></div>"); var deleteButton = $("<div id='deleteButton' style='float: left; margin-left: 2px;'><img style='position: relative; margin-top: 2px;' src='/rtrack/resources/jqx/images/close.png'/><span style='margin-left: 2px; position: relative; top: -3px;'>Delete</span></div>"); container.append(addButton); container.append(deleteButton); statusbar.append(container); addButton.jqxButton({theme: 'darkblue', width: 60, height: 20 }); deleteButton.jqxButton({theme: 'darkblue', width: 75, height: 20 }); // add new row. addButton.click(function (event) { //var selectedrowindex = $("#statusTrend").jqxGrid('getselectedrowindex'); var data = {"DISPLAY_ORDER":"","RELEASE_STATUS_REPORT_ID":"","BUSINESS_UNIT_NAME":"Select BU","BUSINESS_UNIT_ID":"","STATUS_NAME":"green","STATUS_ID":1,"EXCLUDE":false,"TREND_NAME":"","TREND_ID":""}; //$("#statusTrend").jqxGrid("addrow", selectedrowindex+1 , data, null); var commit = $("#statusTrend").jqxGrid('addrow', null, data); /*var rowscount = $("#statusTrend").jqxGrid('getdatainformation').rowscount; console.log("rowscount>>>>>"+rowscount); for(var i=0;i<rowscount;i++) { //alert("removing checks"); $('#statusTrend').jqxGrid('unselectrow', i); } $('#statusTrend').jqxGrid('refresh'); $("#statusTrend").jqxGrid({ _cachedcolumns: null }); */ }); //deleteButton.click(function (event) { /* $("#deleteButton").on('click', function (rowid,commit) { var indexes =[]; console.log(indexes); indexes = $("#statusTrend").jqxGrid("selectedrowindexes"); console.log(indexes); if (indexes.length == 1) { var commit = $("#statusTrend").jqxGrid('deleterow', indexes[0]); } else { $("#statusTrend").jqxGrid('deleterow', indexes); commit(true); deleteButton.click(function (event) { var selectedrowindex = $("#statusTrend").jqxGrid("selectedrowindexes"); var rowscount = $("#statusTrend").jqxGrid('getdatainformation').rowscount; if(selectedrowindex.length == 1){ var id = $("#statusTrend").jqxGrid('getrowid', selectedrowindex[0]); var commit = $("#statusTrend").jqxGrid('deleterow', id); } else{ var ids = []; for(var j=0;j<selectedrowindex.length;j++){ ids[j] = $("#statusTrend").jqxGrid('getrowid', selectedrowindex[j]); } var commit = $("#statusTrend").jqxGrid('deleterow', ids); } var rowscount = $("#statusTrend").jqxGrid('getdatainformation').rowscount; console.log("rowscount>>>>>"+rowscount); for(var i=0;i<rowscount;i++) { //alert("removing checks"); $('#statusTrend').jqxGrid('unselectrow', i); } $('#statusTrend').jqxGrid('refresh'); $("#statusTrend").jqxGrid({ _cachedcolumns: null }); });*/ $("#deleteButton").on('click', function () { var selectedrowindex = $("#statusTrend").jqxGrid('getselectedrowindex'); var rowscount = $("#statusTrend").jqxGrid('getdatainformation').rowscount; if (selectedrowindex >= 0 && selectedrowindex < rowscount) { var id = $("#statusTrend").jqxGrid('getrowid', selectedrowindex); var commit = $("#statusTrend").jqxGrid('deleterow', id); } }); $("#statusTrend").jqxGrid('clearselection'); Source and Adapter:
var individualReleaseStatusFields = [
{ name: ‘BUSINESS_UNIT_NAME’ },
{ name: ‘BUSINESS_UNIT_ID’ },
{ name: ‘STATUS_NAME’ },
{ name: ‘STATUS_ID’ },
{ name: ‘TREND_NAME’ },
{ name: ‘TREND_ID’ },
{ name: ‘DISPLAY_ORDER’ },
{ name: ‘EXCLUDE’}
];
var individualReleaseStatusSource = { datatype: “json” ,
datafields: individualReleaseStatusFields,localdata: releaseStatus,
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
// call commit with parameter true if the synchronization with the server is successful
//and with parameter false if the synchronization failed.
// you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
commit(true);
},
deleterow: function (rowid, commit) {
// synchronize with the server – send delete command
// call commit with parameter true if the synchronization with the server is successful
//and with parameter false if the synchronization failed.
commit(true);
}}
var individualReleaseStatusAdapter = new $.jqx.dataAdapter(
individualReleaseStatusSource,{cache:false,
loadComplete: function () {
}
});}
});Hello jqxforum1234,
This case stems from the behavior of the
jqxDropDownList
. The value is set when the cell is no longer in edit mode i.e after you click somewhere outside the edit cell or press Enter key.Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.