jQWidgets Forums

jQuery UI Widgets Forums Grid The drop down in grid column does not set value

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 9 years, 8 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • jqxforum1234
    Participant

    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 () {
    }
    });

    }
    });


    Hristo
    Participant

    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 Hristov

    jQWidgets team
    http://www.jqwidgets.com

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.