help with textbox editor... - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Cell, cellbeginedit, cellendedit, edit, editable, fiddle, grid, jqxgrid, row

This topic contains 4 replies, has 2 voices, and was last updated by Dimitar 9 years, 8 months ago.

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

Author

help with textbox editor… Posts

January 16, 2015 at 7:50 pm help with textbox editor… #65532

Participant

I am trying to use the value of one field in the row to determine the editability of another field in the same row. in the code below something is happening which is preventing the paramarrname field from becomming editable. I am unable to determine what.

Fiddle works in chrome and not at all in IE: http://jsfiddle.net/MysU4/162/


<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this sample is illustrated how to create custom editors for jqxGrid. The "First Name" and "Last Name" columns use the jqxInput widget as a cell editor. The "Products" column
        use a jqxDropDownList widget with enabled Checkboxes  as an editor. The "Quantity" column's editor is jqxSlider.
    </title>
    <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.edit.js"></script>  
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.columnsresize.js"></script>  
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.sort.js"></script>  
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxslider.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js"></script>
    <script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        

        // prepare the data
        var data = new Array();
        data.push({ "isnull": "false","name":"$result","paramname":"$result","paramnull":"false","paramdir":"IN","paramtype":"String","paramvalue":"","paramarrname":"","paramarrtype":"String","type":"{\"name\":\"$result\",\"type\":\"String\",\"dir\":\"IN\",\"arrayname\":\"\",\"arraytype\":\"String\"}","detail":{"paramarrname":"","paramarrtype":"Strng","paramdir":"IN","paramname":"$result","paramnull":"false","paramtype":"String","paramvalue":"","type":"{\"name\":\"$result\",\"type\":\"String\",\"dir\":\"IN\",\"arrayname\":\"\",\"arraytype\":\"String\"}"}});
        data.push({ "isnull": "false","name":"$smile","paramname":"$smile","paramnull":"false","paramdir":"IN","paramtype":"Double","paramvalue":"","paramarrname":"","paramarrtype":"String","type":"{\"name\":\"$smile\",\"type\":\"Double\",\"dir\":\"IN\",\"arrayname\":\"\",\"arraytype\":\"String\"}","detail":{"paramarrname":"","paramarrtype":"Strng","paramdir":"IN","paramname":"$smile","paramnull":"false","paramtype":"Double","paramvalue":"","type":"{\"name\":\"$smile\",\"type\":\"Double\",\"dir\":\"IN\",\"arrayname\":\"\",\"arraytype\":\"String\"}"}});
        data.push({ "isnull": "false","name":"$manythings","paramname":"$manythings","paramnull":"false","paramdir":"IN","paramtype":"Array","paramvalue":"","paramarrname":"things","paramarrtype":"String","type":"{\"name\":\"$manythings\",\"type\":\"Array\",\"dir\":\"IN\",\"arrayname\":\"things\",\"arraytype\":\"String\"}","detail":{"paramarrname":"things","paramarrtype":"Strng","paramdir":"IN","paramname":"$manythings","paramnull":"false","paramtype":"Array","paramvalue":"","type":"{\"name\":\"$manythings\",\"type\":\"Array\",\"dir\":\"IN\",\"arrayname\":\"things\",\"arraytype\":\"String\"}"}});
        var source =
        {
            datatype: 'array',
            dataFields: [
                { name: 'paramname', type: 'string' },
                { name: 'paramnull', type: 'bool' },
                { name: 'paramtype', type: 'string' },
                { name: 'paramdir', type: 'string' },
                { name: 'paramarrtype', type: 'string' },
                { name: 'paramarrname', type: 'string' },
                { name: 'type' }//,,type: 'json'
            ],
            localdata: data
        };
        
        		                      
        
		var dataAdapter = new $.jqx.dataAdapter(source);
		
        var createMyEditor = function(row, cellValue, editor, cellText, width, height)
        {
            var element = $('<div tabIndex=0 style="position: absolute; top: 50%; left: 50%; margin-top: -7px; margin-left: -10px;"></div>');
            editor.append(element);
            element.jqxCheckBox({ animationShowDelay: 0, animationHideDelay: 0, width: 16, height: 16});
        }

        var initMyEditor = function (row, cellValue, editor, cellText, width, height) {
            var checkBoxHTMLElement = editor.find('div:first');
            checkBoxHTMLElement.jqxCheckBox({ checked: cellValue.toString() == "true" });
        }

        var getMyEditorValue = function (row, cellValue, editor) {
                var checkBoxHTMLElement = editor.find('div:first');
                return checkBoxHTMLElement.val();
        }
		
		
        var createParamTypeEditor = function(row,cellValue,editor,cellText,width,height){
        	editor.jqxDropDownList({autoDropDownHeight: true,  width: width, height: height, source: ['String', 'Date', 'Double','Integer','Array']})
        };
        
        var initParamTypeEditor = function(row,cellValue,editor,cellText,width,height){
        	editor.jqxDropDownList('selectItem',cellValue);
        };
        
        var getParamTypeEditorValue = function(row,cellValue,editor,cellText,width,height){
        	return editor.val();
        };
        
        var createParamDirEditor = function(row,cellValue,editor,cellText,width,height){
        	editor.jqxDropDownList({autoDropDownHeight: true,  width: width, height: height, source: ['IN','OUT']})
        };
        
        var initParamDirEditor = function(row,cellValue,editor,cellText,width,height){
        	editor.jqxDropDownList('selectItem',cellValue);
        };
        
        var getParamDirEditorValue = function(row,cellValue,editor,cellText,width,height){
        	return editor.val();
        };
        
        var createParamArrTypeEditor = function(row,cellValue,editor,cellText,width,height){
       		editor.jqxDropDownList({autoDropDownHeight: true,  width: width, height: height, source: ['String', 'Date', 'Double','Integer','Array']})
        };
        
        var initParamArrTypeEditor = function(row,cellValue,editor,cellText,width,height){
        	editor.jqxDropDownList('selectItem',cellValue);
        };
        
        var getParamArrTypeEditorValue = function(row,cellValue,editor,cellText,width,height){
        	return editor.val();
        };
        
		var columns = [
		                { text: 'Name', datafield: 'paramname', width:'10%', editable : false },
		                { text: 'Can Be Null', datafield: 'paramnull',columntype: 'custom', width:'10%', editable : true,
		                    createeditor: createMyEditor, initeditor: initMyEditor, geteditorvalue: getMyEditorValue
		                },
		                {
		                      text: 'Type', datafield: 'paramtype', width: '10%', editable : true, columntype: 'dropdownlist', 
		                      createeditor: createParamTypeEditor, initeditor: initParamTypeEditor, geteditorvalue: getParamTypeEditorValue
		                },
		                {
		                      text: 'paramdir', datafield: 'paramdir', width: '10%', editable : true, columntype: 'dropdownlist',
		                      createeditor: createParamDirEditor, initeditor: initParamDirEditor, geteditorvalue: getParamDirEditorValue
		                },
		                {
		                      text: 'paramarrtype', datafield: 'paramarrtype', width: '10%', editable : true, columntype: 'dropdownlist', 
		                      createeditor: createParamArrTypeEditor, initeditor: initParamArrTypeEditor, geteditorvalue: getParamArrTypeEditorValue
		                },
		                {
		                      text: 'paramarrname', datafield: 'paramarrname', width: '10%', editable : true, columntype: 'textbox'//, 
		                      //createeditor: createParamArrNameEditor, initeditor: initParamArrNameEditor, geteditorvalue: getParamArrNameEditorValue
		                }
		            ];

		
		
		var gridSettings =
		{
			//editmode: 'click',
			altrows: true,
			sortable: true,
            width: '95%',
            autorowheight:true,
            autoheight: true,
            pageable: false,
            pagesize: 5,
            pagesizeoptions: ['5','10','20'],
            editable: true,
            source: dataAdapter,
            columns: columns,
            columnsresize: true,
            selectionmode: 'singlecell'
        };
		var width;
		
		$grid = $('#jqxgrid').jqxGrid(gridSettings);
		
		$('#jqxgrid').on('cellEndEdit', function (event) {
			state.currentQuery.Response.Queries.query.queryDetail.queryDetailObj.queryparamdetail[event.args.rowindex][event.args.datafield] = event.args.value;
		 });
		 $("#jqxgrid").bind('cellbeginedit', function (event) {
             var column = args.datafield;
             var row = args.rowindex;
             var value = args.value;
			 if ((column === 'paramarrtype' || column === 'paramarrname' ) && $('#jqxgrid').jqxGrid('getcellvalue',row, 'paramtype') != 'Array' ){
                  $("#jqxgrid").jqxGrid('endcelledit', row, column, true);
             }
          });

    })
</script>
</head>
<body class='default'>
<div id="jqxgrid"></div>
</body>
</html>

January 19, 2015 at 8:45 am help with textbox editor… #65580

Dimitar

Participant

Hello Bradford,

Your fiddle should work if you remove $(document).ready() (it is not necessary since the onLoad setting is chosen) and use the jQuery version 1.11.0.

As for your approach – we recommend you use the callback function cellbeginedit (demo) instead of the event of the same name. Please also note that there is no cellEndEdit event, there is cellendedit.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

January 20, 2015 at 3:29 pm help with textbox editor… #65696

Bradford

Participant

This fiddle now works: http://jsfiddle.net/MysU4/165/

Thanks for the help – still trying to make this work in a single cell in jqxGrid rather than needing two columns that usually will not have anything to display. Please see the other forum post I have open on that:
http://www.jqwidgets.com/community/topic/custom-editor-and-renderer-with-multiple-elements-wont-work/

January 20, 2015 at 4:07 pm help with textbox editor… #65698

Bradford

Participant

The demo you linked above for the callback function cellbeginedit actually demonstrates the events

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/disableeditingofrows.htm?arctic


            // events
            $("#jqxgrid").on('cellbeginedit', function (event) {
                var args = event.args;
                $("#cellbegineditevent").text("Event Type: cellbeginedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
            });

            $("#jqxgrid").on('cellendedit', function (event) {
                var args = event.args;
                $("#cellendeditevent").text("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
            });

January 21, 2015 at 6:22 am help with textbox editor… #65716

Dimitar

Participant

Hi Bradford,

This is true, but the main functionality of the demo is implemented with the cellbeginedit callback function. Please note all column definitions:

columns: [
    { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 80, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer },
    { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 80, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer },
    { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 190, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer },
    { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67, cellbeginedit: cellbeginedit},
    { text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 110, cellsalign: 'right', cellsformat: 'd', cellbeginedit: cellbeginedit, 
        validation: function (cell, value) {
            var year = value.getFullYear();
            if (year >= 2015) {
                return { result: false, message: "Ship Date should be before 1/1/2015" };
            }
            return true;
        }, cellsrenderer: cellsrenderer
    },
    { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput', 
        validation: function (cell, value) {
            if (value < 0 || value > 150) {
                return { result: false, message: "Quantity should be in the 0-150 interval" };
            }
            return true;
        },
        initeditor: function (row, cellvalue, editor) {
            editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
        }, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer
    },
    { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
        validation: function (cell, value) {
            if (value < 0 || value > 15) {
                return { result: false, message: "Price should be in the 0-15 interval" };
            }
            return true;
        },
        initeditor: function (row, cellvalue, editor) {
            editor.jqxNumberInput({ digits: 3 });
        }, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer
    }
]

and the function of the same name defined after source, which is passed to the callback:

var cellbeginedit = function (row, datafield, columntype, value) {
    if (row == 0 || row == 2 || row == 5) return false;
}

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

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

You must be logged in to reply to this topic.