[cosyxu]

Good morning,


Could I ask how to pass the json value into a grid? Please see my code,

Code: Select all

xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {

          ////  convert to json pattern//////////////////////////////
 
           myJSON = JSON.parse(xmlhttp.responseText);
                  
            	for (var i = 1; i <= Object.keys(myJSON).length; i++) {   	
			$("#grid_order").setValue(myJSON[i].price, i, 4);
			$("#grid_order").addRow();
		 }

        }
      }
    xmlhttp.open("GET", "http://localhost/search.php?a="+a, true); 
    xmlhttp.send();

I have successful get the value for myJSON, however how can I populate these values into a grid? (I am using web-entry form so the trigger before a form will not work).

And this is the code to append a new option for a dropdown, how to append a value into a textbox?
$("#form\\[grid_order\\]\\[" + i + "\\]\\[item\\]").append(new Option( myJSON.item , myJSON.item ));


Many thanks,
Yxu

[amosbatto]

Let's say that your grid with the ID "grid_order" has 3 fields with the IDs: "item", "price", "quantity" (in that order)
Then, you can use JavaScript like this:

Code: Select all

      for (var i = 1; i <= Object.keys(myJSON).length; i++) {      
         var newRow = [ 
             {"value": myJSON[i].item},
             {"value": myJSON[i].price},
             {"value": myJSON[i].quantity}
         ];
         $("#grid_order").addRow(newRow);
      }

See: http://wiki.processmaker.com/3.0/JavaSc ... rid.addRow

[amosbatto]

And this is the code to append a new option for a dropdown, how to append a value into a textbox?
$("#form\\[grid_order\\]\\[" + i + "\\]\\[item\\]").append(new Option( myJSON.item , myJSON.item ));

You should use grid.setValue() like this:

Code: Select all

//where the "item" field is the first field in each row:
$("#grid_order).setValue(myJSON[i].item, $i, 1);

[cosyxu]

Hi Amosbatto,

Thank you for your help, it shows in the grid now. However I have some item's value contains "" within a value, so it get errors, is there some way that I can fix?

For example, "item" : "Lunch Pack "Standard" - 12 min", this will get error and stop the population.

Regards,
Yxu

[cosyxu]

Hello,

Could I also ask how to search or filter a column for a grid?

[img]

Capture.PNG (11.84 KiB) Viewed 9314 times

[/img]

For example, is it possible to add a control outside the grid, if I select a category called "breakfast", the grid will be filtered and only show rows which category is "breakfast". Is it possible?

I am using web entry form, no any trigger before the form will not work.

Many thanks,
Yxy

[amosbatto]

Thank you for your help, it shows in the grid now. However I have some item's value contains "" within a value, so it get errors, is there some way that I can fix?

For example, "item" : "Lunch Pack "Standard" - 12 min", this will get error and stop the population.

You can enclose the string in single quotation marks: 'Lunch Pack "Standard" - 12 min'
or you can escape the quotation marks with a backslash: "Lunch Pack \"Standard\" - 12 min"

you can automatically escape with this code:
mystring = mystring.replace(/"/g, "\"");

[amosbatto]

Could I also ask how to search or filter a column for a grid?
For example, is it possible to add a control outside the grid, if I select a category called "breakfast", the grid will be filtered and only show rows which category is "breakfast". Is it possible?

Here is an example that you can use to filter the rows in a grid. Create a DynaForm like this one:

FilterGridForm.png (60.24 KiB) Viewed 9286 times

Where the ID of the textbox is "filterText", the ID of the grid is "clientList" and the ID of the button is "clearFilter".

Then, add the following JavaScript to the DynaForm that will filter the rows in the DynaForm when the value of the "filterText" field changes:

Code: Select all

$("#filterText").setOnchange(function(newVal, oldVal) {
  var searchFor = newVal.toLowerCase();
  var aGridVals = $("#clientList").getValue();
  var aRows = $("#clientList").find("div.pmdynaform-grid-tbody").find("div.pmdynaform-grid-row");
  
  for (var i = 0; i < aGridVals.length; i++) {
    var foundMatch = false;
    for (var ii = 0; ii < aGridVals[i].length; ii++) {
      if (aGridVals[i][ii].toLowerCase().indexOf(searchFor) != -1) {
        foundMatch = true;
        break;
      }
    }
    if (foundMatch) {
      aRows.eq(i).show();
    }
    else {
      aRows.eq(i).hide();
    }
  }
});

$("#clearFilter").click(function() {
  var aRows = $("#clientList").find("div.pmdynaform-grid-tbody").find("div.pmdynaform-grid-row");
  
  for (var i = 0; i < aRows.length; i++) {
    aRows.eq(i).show();
  }
});

When the grid is filled, like this:

UnfilteredGrid.png (47.18 KiB) Viewed 9286 times

If the user enters "product", then any row containing a field with "product" in it will be displayed. Note that the search is case insensitive.

FilteredGrid.png (34.19 KiB) Viewed 9286 times

Here is a sample DynaForm that you can import to test this code:

Filter Grid.json

(3.98 KiB) Downloaded 331 times

If you only want to search in a single field in the grid, then set the column number to search in. For example, if only searching in the "Service Needed" column, than search in the third column which is aGridVals[2] because arrays start counting from 0:

Code: Select all

$("#filterText").setOnchange(function(newVal, oldVal) {
  var searchFor = newVal.toLowerCase();
  var aGridVals = $("#clientList").getValue();
  var aRows = $("#clientList").find("div.pmdynaform-grid-tbody").find("div.pmdynaform-grid-row");
  
  for (var i = 0; i < aGridVals.length; i++) {
    if (aGridVals[i][2].toLowerCase().indexOf(searchFor) != -1) {
      aRows.eq(i).show();
    }
    else {
      aRows.eq(i).hide();
    }
});

[cosyxu]

Hi amosbatto,


Thank you for your example. I will have a try today.


Regards,
Yxu

[cosyxu]

Hi amosbatto,

It works!

Many thanks,
Yuan

[HeshanKaru1994]

I have an array like below
I want to get the keys of the array. e.g: Array One and Array Two

Array ( [Array One] => No [Array Two] => Yes)

[amosbatto]

Are you using PHP in a trigger?

You can use array_keys() to get an array of another array's keys.
See: https://www.php.net/manual/en/function.array-keys.php

$aKeys = array_keys(@=myArray);

$aKeys[0] is now "Array One" and $aKeys[1] is now "Array Two"

[HeshanKaru1994]

Array ( [0] => Array ( [0] => 2 [1] => xx ) [1] => Array ( [0] => 3 [1] => sample ) )

I have an array like this.How to display 1st element of each array in grid

eg: xx
sample

[amosbatto]

Code: Select all

Array ( 
    [0] => Array ( 
           [0] => 2 
           [1] => xx 
    ) 
    [1] => Array ( 
           [0] => 3 
           [1] => sample
    )
)

I have an array like this.How to display 1st element of each array in grid

eg: xx
sample

In a trigger before the dynaform containing the grid:

Code: Select all

@=myGrid = array();
$nRow = 1;

foreach ($aMyArray as $aRow) {
    @=myGrid[ $nRow ] = array(
         'myField1' => $aRow[0],
         'myField2' => $aRow[1]
    );
}

Where myGrid is the variable associated with the grid and the IDs of the fields in the grid are myField1 and myField2.

[HeshanKaru1994]

Thank you amos

[amosbatto]

Oops, I forgot to increment the counter. It should be:

Code: Select all

@=myGrid = array();
$nRow = 1;

foreach ($aMyArray as $aRow) {
    @=myGrid[ $nRow ] = array(
         'myField1' => $aRow[0],
         'myField2' => $aRow[1]
    );
    $nRow++;
}