CartoWeb 3.5.0
Download Now!


CartoWeb
Advanced Geographical Information System for the Web

How to add dropdown selectbox in the editon attribute table

in the file dhtmlEdit.js, in the function Map.prototype.editTableAddRow, replace

var input = createInput(td,
  "edit_feature_" + aFeature.id + "[" + this.editAttributeNames[i] + "]", value, 'text')
input.onkeypress = function() {
  if (!this.changed) {
    if (aFeature.operation != 'insert')
      setFeatureOperation(aFeature, "update");
    var validate = xGetElementById('validate_all');
    validate.className = "form_button_hilight";
    if (editDisplayAction != 'folder'){
      var validate = xGetElementById('validate2');
      validate.className = "form_button_hilight";
    }
  }
  this.changed = true;
}

with

var authorisedOptionsList = new Array('option1_value', 'option2_value', 'option3_value');
var authorisedOptionsListLabel = new Array('option1_label', 'option2_label', 'option3_label');

// in case the attribute name is the one that must be a select
if (this.editAttributeNames[i] == 'the_field_name_that_must_be_a_dropdown') {
    var input = xCreateElement("select");
    input.name = "edit_feature_" + aFeature.id + "[" + this.editAttributeNames[i] + "]"

    // for each options add an option element in the select
    for (var j = 0; j < authorisedOptionsList.length; j++){
      input.options[j] = new Option(authorisedOptionsListLabel[j],authorisedOptionsList[j]);
      // if a value exist and that value equal the current option value, then set the option as selected
      if (typeof aFeature.attributes != "undefined" && aFeature.attributes[i] == authorisedOptionsList[j])
        input.options[j].selected = true;
    }
    // insert the select into the td
    xAppendChild(td, input);

    // some background properties that need to be set, in the case of select, onchange events instead of onkeypress
    input.onchange = function() {
      if (!this.changed) {
        if (aFeature.operation != 'insert')
          setFeatureOperation(aFeature, "update");
        var validate = xGetElementById('validate_all');
        validate.className = "form_button_hilight";
        if (editDisplayAction != 'folder'){
          var validate = xGetElementById('validate2');
          validate.className = "form_button_hilight";
        }
      }
    }
    this.changed = true;
}
else {
  var input = createInput(td,
    "edit_feature_" + aFeature.id + "[" + this.editAttributeNames[i] +
    "]", value, 'text');

  input.onkeypress = function() {
    if (!this.changed) {
      if (aFeature.operation != 'insert')
        setFeatureOperation(aFeature, "update");
      var validate = xGetElementById('validate_all');
      validate.className = "form_button_hilight";
      if (editDisplayAction != 'folder'){
        var validate = xGetElementById('validate2');
        validate.className = "form_button_hilight";
      }
    }
  this.changed = true;
  }
}

In case you want multiple dropdown, use a switch to set the correct arrays

var found = false;
switch (this.editAttributeNames[i]) {
  case 'attribute_to_find_1':
      var authorisedOptionsList = new Array('option1_value', 'option2_value', 'option3_value');
      var authorisedOptionsListLabel = new Array('option1_label', 'option2_label', 'option3_label');
      found = true;
  break;
  case 'attribute_to_find_2':
      var authorisedOptionsList = new Array('option1_value', 'option2_value', 'option3_value');
      var authorisedOptionsListLabel = new Array('option1_label', 'option2_label', 'option3_label');
      found = true;
  break;
}
// in case the attribute name is the one that must be a select
if (found == true) {
// same as above ...

CartoWeb Wiki: HowToAddDropdownInEditPlugin (last edited 2020-03-29 00:06:28 by IanLawrence)

© 2002-2007 CartoWeb by Camptocamp SA - Wiki powered by MoinMoin