How to disable edit on jqxInput

[cpuinParticipant]

Hi,

I need to disable the edit of jqxInput.I load some data, but don’t want the data do be edited.I can’t find such a property.Any solution?

[ivailoParticipant]

Hi cpuin,

Try to use inline in the input “readonly” attribute.

<input type="text" id="input" value="Test Value" readonly/>

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[cpuinParticipant]

I have to update my HTML knowledge, but the problem is that first i need select some value from the source and after that i don’t want this value to be modify:

var url = "json_partners.php";
						                // prepare the data
						var companies =
						                {
						                    datatype: "json",
						                    datafields: [
						                    	{ name: 'ID' },
						                        { name: 'Bulstat' },
						                        { name: 'Company' }
						                    ],
						                    url: url
						                };
						var dataAdapter = new $.jqx.dataAdapter(companies);
						$("#company").jqxInput({placeHolder: "Избери партньор", displayMember: "Company", valueMember: "ID", height: 25, width: 300, minLength: 1,  source: dataAdapter});

[ivailoParticipant]

Hi cpuin,

You can add this code after the presented part of your code

$("#company").on("select",
function () {
    $("#company").prop("readonly", true);
});

After selecting, the input goes “readonly”.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[cpuinParticipant]

Dear Ivailo,

Thank you for your suggestion, but on this way if the selected value is wrong, the user can’t select other!

[ivailoParticipant]

Hi cpuin,

Right now we can offer you 2 solutions.

1. To add strict filtering of the clients option, that can be used in this input.
2. To add additional button, used if the client wants to change the value. The button will set the input’s property (“readonly”, false) untill the change of the value happens.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[cpuinParticipant]

Dear Ivailo,

I thought the same about the second solution, but it’s not a good practice.
About the fist one i can’t understand what you mean with “strict filtering”?

[ivailoParticipant]

Hi cpuin,

With “strict filtering” i want to generalize some solutions to minimizing the users change to input wrong data. That means filtering of the possible values, that can be chosen for example. The end user do not have the possibility to enter wrong/not correct information in other words.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[cpuinParticipant]

Dear Ivailo,

The selection that the user can choose from are name of companies from DB.The idea is one selected the company, that the user can’t change it’s name or if he for some reason choose wrong company to can re-select another one.I really don’t want to make additional window only for this, because the solution you give for filtering is great, but i can’t figure out how to achieve this, because don’t know in details the possibilities of your framework.

[ivailoParticipant]

Hi cpuin,

The final thing that i can suggest you is to use jqxValidator about this user input. You can set your custom rules.
Here is the API of this widget.

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxvalidator/jquery-validator-api.htm

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[cpuinParticipant]

Dear Ivailo,

I have found another solution , but i need to know how to set jqxInput’s valueMember and displayMember?
I know how to set a value, but i need to set different displayMember?

[ivailoParticipant]

Hi cpuin,

You can set the displayMember with this code $("#jqxInput").jqxInput({displayMember: 'firstName'});.
Here is an example.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[cpuinParticipant]

I initialise the code like this: $("#company").jqxInput({height: 25, width: 300, minLength: 1});

after that i want to set different value and display members like this $("#company").jqxInput({displayMember: row.Company, valueMember: row.ID});

No error, but there is nothing set!

[ivailoParticipant]

Hi cpuin,

Try to combine your initialisation in one row.
If this don’t help – send a bigger part of your code for analysing.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[cpuinParticipant]

I can’t combine them in one.
When open the page there is a #company with empty field.
Next to the filed is a button and when click on it a window opens.
There is a table with “companie” when pick one and make double click on the row the selected index must be set on the “#company”.
But, the Display name shoudl be the name of the company and the ID shpuld be the value.

Here is a part of the code:

// CHOOSE COMPANY ------------------------------------------------------------------------------------

						var url = "json_partners.php";
						                // prepare the data
						var companies =
						                {
						                    datatype: "json",
						                    datafields: [
						                    	{ name: 'ID' },
						                        { name: 'Bulstat' },
						                        { name: 'Company' }
						                    ],
						                    url: url
						                };
						var dataAdapter = new $.jqx.dataAdapter(companies);
						
						$("#company").jqxInput({height: 25, width: 300, minLength: 1});
						
						
						$("#selectCompanyBtn").jqxButton({width:80});
						
						            
						$("#selectCompanyBtn").mousedown(function () {
							$('#selectCompanyWin').jqxWindow({
							                maxHeight: 360, maxWidth: 500, minHeight: 360, minWidth: 500, height: 180, width: 270,
							                resizable: false, isModal: true, modalOpacity: 0.3
							            });
							$("#selectCompanyOKBtn").jqxButton({width:80});
							$("#selectCompanyCancelBtn").jqxButton({width:80});
							$("#selectCompanyWin").css('visibility', 'inherit');                        
					    	$("#selectCompanyWin").jqxWindow('open');
							                        
							                    }); 
						
						$("#selectCompanyCancelBtn").mousedown(function () {
						
							$("#selectCompanyWin").jqxWindow('close');
							});
						
//						$("#company").on("select",
//						function () {
//						    $("#company").prop("readonly", true);
//						});

						 $("#tableCompany").jqxDataTable(
						       {
						        source: dataAdapter,
						        pageable: true,
						        pageSize: 5,
						        pagerButtonsCount: 10,
						        altRows: true,
						        filterable: true,
						        height: 240,
						        filterMode: 'simple',
						        width: 480,
						        columns: [
						        	{ text: 'Име', dataField: 'Company', width: 240 },
						            { text: 'ЕИК', dataField: 'Bulstat', width: 240 }
						                                        
						                ]
						            });
						            
						   $("#tableCompany").on('rowDoubleClick', function (event) {
						         var args = event.args;
						         var index = args.index;
						         var row = args.row;
                                 $("#company").jqxInput({displayMember: row.Company, valueMember: row.ID});
						         
						           		   		 
						                      //$("#saleTable").jqxDataTable('updateBoundData');
						                      //HIDE COLUMN
						                      //$("#saleTable").jqxDataTable('hideColumn','IDs');
						                      $("#selectCompanyWin").jqxWindow('close');
						                      
						                      
						                 });

[Author]

Posts