Dropdown list in In line editing Grid: showing pre defined set of values

[mail2harishaMember]

Hi All,

I am using a inline editing grid. It has few drop down list columns.

Example: Column Name: Nominal
Pre defined values: Actual, Optional

After getting records from server in json value pair. I am displaying all records in grid. Now when user tries to edit a record for dropdown column, it only shows list of values available in all records instead of showing all pre defined values.

Example:
Data from server:
row 1: {“id”=1, “nominal”=”Actual”}
row 2: {“id”=2, “nominal”=”Actual”}

Then when I try to edit row 2’s nominal column, it shows list of one value i.e., “Actual”.

Our business requirement is to show list of pre defined values for user to select i.e., “Actual”, “Optional”.

How to do this?

Code:

$("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                editable: true,
                theme: theme,
                selectionmode: 'singlecell',
                columns: [
                  { text: 'Id', columntype: 'textbox', datafield: 'id', width: 90 },
                  { text: 'Nominal', columntype: 'dropdownlist', datafield: 'nominal', width: 177},
                                 
                ]
            });

[Peter StoevKeymaster]

Hi mail2harisha,

To set a custom List as a data source of the DropDownList editor, you can do the following:

                  { text: 'Nominal', columntype: 'dropdownlist', datafield: 'nominal',
                      createeditor: function (row, cellvalue, editor) {
                          editor.jqxDropDownList({ source: ["Available", "Option"] });
                      }
                  },

The ‘createeditor’ callback is added in jQWidgets 2.1. If you are using a previous version of jQWidgets, you will need to upgrade to use the logic above.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[mail2harishaMember]

Thanks its working.

Please note: I have a suggestion. The Documentation regarding API is very little and and there is no working example for each method or properties. Kindly add more explanations:

Example: For jqxgrid, columns behavior, there is property called editable which says it will make a particular column either editable or non editable. As per documentation:
editable – enables or disables the cells editing

but what value I have to provide either “enable” or “disable” or “true” or ” false” is not mentioned. I had with below but eblotter_ref and status field are still editable. Kindly answer my question.

$("#jqxgrid").jqxGrid(
						{
							width : 1200,
							source : dataAdapter,
							editable : true,
							//theme: 'energyblue',
							selectionmode : 'singlecell',
							sortable : true,
							altrows : true,
							columns : [
								{ text : 'eBlotter Ref', datafield : 'eblotter_ref', width : 100, cellsrenderer : colorrenderer, editable : 'disable' },
								{ text : 'B/S/U/A', datafield : 'buy', width : 100, cellsrenderer : colorrenderer},
								{text : 'Nominal', columntype: 'dropdownlist', datafield : 'nominal',width : 100,cellsrenderer : colorrenderer,
									initeditor: function (row, cellvalue, editor) {
				                          editor.jqxDropDownList({ source: nominalDropdownListSource});
				                      }
								},
								{text : 'Status',datafield : 'status',width : 100,cellsrenderer : colorrenderer, editable : 'disable' },

[Peter StoevKeymaster]

Thanks for the feedback.

There’s a help topic about Cells Editing in our Help Documentation here: jquery-grid-cells-editing.htm and here’s what it says about disabling of editing for a column: “To disable the editing of a specific grid column, you can set the column’s editable property to false”
However, we’ll keep improving the help docs with every new version.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[mail2harishaMember]

Thanks for your quick reply.

Making column non editable is working. As you mentioned it should be false

columns : [
								{ text : 'eBlotter Ref', datafield : 'eblotter_ref', width : 100, cellsrenderer : colorrenderer, editable : false },

For the documentation part,
It would be great if the documentation is more explanatory like Java Docs.

[Author]

Posts