In searchable textbox, value showing on UI instead of label

[Chaitanya21]

Hi admin,

I am using searchable textbox from demo example, https://paramquery.com/demos --> Editor & validation

In that i have modified books values( simple string array to Lable-Value JSON)

var books = [{
    label: 'Abc',
    value: '1'
  }, {
    label: 'Pqr',
    value: '2'
  }, {
    label: 'stv',
    value: '3'
  }];

After selecting any books from drop-down, instead of showing Label it is showing value on UI.

and get value when we make ajax to post data

Please help me!! 

https://jsfiddle.net/Dalvi1988/x796gy5h/4/

[Chaitanya21]

Hi admin,

I have employee JSON list and each employee contain branch details(2nd level hierarchy in JSON)

Code: [Select]

[{"createdBy":null,"createdDate":null,"modifiedBy":null,"modifiedDate":null,"status":true,"command":null,"loginDTO":null,"serviceStatus":null,"message":null,"employeeId":1,"firstName":"Chaitanya","middleName":null,"lastName":"Dalvi","emailId":"[email protected]","gender":"M","branchDTO":{"createdBy":null,"createdDate":null,"modifiedBy":null,"modifiedDate":null,"status":null,"command":null,"loginDTO":null,"serviceStatus":null,"message":null,"branchId":3,"branchCode":null,"branchName":"brach code 3","companyDTO":null}},
{"createdBy":null,"createdDate":null,"modifiedBy":null,"modifiedDate":null,"status":true,"command":null,"loginDTO":null,"serviceStatus":null,"message":null,"employeeId":3,"firstName":"Vinod","middleName":"P.","lastName":"Hollar","emailId":"[email protected]","gender":"M","branchDTO":{"createdBy":null,"createdDate":null,"modifiedBy":null,"modifiedDate":null,"status":null,"command":null,"loginDTO":null,"serviceStatus":null,"message":null,"branchId":3,"branchCode":null,"branchName":"brach code 3","companyDTO":null}}]
Also i have branch Name list with key value pair.

Code: [Select]

var branchList = [{ 'branch code 1':'1'},{'branch code 2':'2'},{'branch code 3':'3'}]
When grid populate i need to show branch name in branch Column in text format which i am achieving using below code:

Code: [Select]

{ title: "Branch", dataIndx: "", width: 90,
                  editor: {
                  type: 'textbox',
                  init: autoCompleteEditor
                },
                render: function (ui) {
              return ""+ui.rowData.branchDTO.branchName;
               },
               validations: [{ type: 'minLen', value: 1, msg: "Required"}]
},
But when i click on edit button, how to display corresponding branch name in searchable textbox?

Code: [Select]

var autoCompleteEditor = function (ui) {
            var $inp = ui.$cell.find("input");

            //initialize the editor
            $inp.autocomplete({
                source: branchList,
                selectItem: { on: true }, //custom option
                highlightText: { on: false }, //custom option
                minLength: 0,
                select: function(event, ui) {
event.preventDefault();
$(this).val(ui.item.label);

}
            }).focus(function () {
                //open the autocomplete upon focus               
                $(this).autocomplete("search", "");
            });
           
        }
Also when click on edit button entire row should be editable. no need to click on individual cell to make it editable.
Please Please Please help me!! 



https://jsfiddle.net/Dalvi1988/x796gy5h/

[Chaitanya21]

Hello admin,
Please reply

1. how to get hierarchical JSON object into dataindx?

2. I have JSON of Brach list

Code: [Select]

branchList = [{ label:'Mumbai',value:'1'},{ label:'Mumbai2', value:'2'},{ label:'Mumbai3', value:'3'}]Here label is branch name and value is branch id.

Code: [Select]

           { title: "Branch", dataIndx: "branchId", width: 90,
                  editor: {                   
                  type: "textbox",
                          init: autoCompleteEditor,
                          options: branchList,
                          focus: function (ui) {
                          alert("focus")
              }   

                      },
                      render: function (ui) {
                      var options = ui.column.editor.options,
              cellData = ui.cellData;
          for (var i = 0; i < options.length; i++) {
              var option = options[i];
             
              if (option.value == cellData) {
                  return option.label;
              }
          }
          }   
                  },
Here my dataIndx:branchId. values are 1 or 2 or 3
In render function I am able to display branch name of corresponding branch id.
but when i goes to edit mode I m getting branch id. Please see attached snapshot.
After selection of item it is showing branch name.

Please reply.

[paramvir]

Your jsfiddles are non - functional, unable to check them.

Is your question about how to use this format of data in autocomplete editor in pqgrid?

var books = [{
    label: 'Abc',
    value: '1'
  }, {
    label: 'Pqr',
    value: '2'
  }, {
    label: 'stv',
    value: '3'
  }];

You can use column.editor.init callback to fill label text (instead of value ) in the editor.

https://paramquery.com/api#option-column-editor

[Chaitanya21]

Hi admin,

Thanks for reply..

1. Does searchable textbox support valueIndx & labelIndx?

http://jsfiddle.net/v4zx8tjc/4/

Here i am trying searchable textbox with valueIndx & labelIndx. But list is not populating.

2. If above format not supporting, then here i have searchable textbox with label & value format.
Here i am able to show branch name with render function but when i go to edit mode then searchable textbox showing branch id.

Please check below fiddle link.

http://jsfiddle.net/v4zx8tjc/5/

3. When i access your web site from mobile and click on go to forum menu, it goes to git download link. Actually forum menu hidding behind download link.

Please solve my 1st or 2nd point. i have stuck from last 3 days. Please help.

[Chaitanya21]

Hi admin.
Please help on above issue.