Question

I am working a on slickgrid where one cell needs to show a dropdown (selectlist) with values coming from a restful service. These values are different for each row.

I should be able to select one value from this list (dropdown) and it should persist the value in the cell.

I would be glad if someone could help with this problem.

this.productColumns = [
            {
                id: 'statusid',
                name: 'Status',
                field: 'statusid',
                width: 65,
                sortable: true
            },
            {
                id: 'grade',
                name: 'Grade',
                field: 'grade',
                width: 80,
                sortable: true
            },
            {
                id: 'position',
                name: 'Position',
                field: 'originalPosition',
                width: 80,
                sortable: true
            },
            {
                id: 'tyresize',
                name: 'Tyre Size',
                field: 'tyreSize',
                editable: true,
                width: 140,
                sortable: true
            },
            {
                id: 'tyredetail',
                name: 'Tyre Detail',
                field: 'tyredetail',
                editable: true,
                width: 125,
                editor: this.selectRangeEditor

            }
   ]

      selectRangeEditor: function (args) {

        var $select = $("");
        var defaultValue = "";
        var scope = this;
        this.init = function () {
            var tyreOptionsList = new TyreOptionsModel(args.item.id);
            tyreOptionsList.deferred.done(function () {
                var opt_values = tyreOptionsList.toJSON();
                var count = 0;
                for (var cnt in opt_values) {
                    if (opt_values.hasOwnProperty(cnt)) {
                        count++;
                    }
                }
                option_str = ""
                var i ;
                for (i = 0; i < count-1; i++) {
                    val = opt_values[i].tyreOptionId;
                    txt = opt_values[i].tyreDetail;
                    option_str += "<OPTION value='" + val + "'>" + txt + "</OPTION>";
                }
                $select = $("<SELECT tabIndex='0' class='editor-select'>" + option_str + "</SELECT>");
                $select.appendTo(args.container);
                $select.focus();
            });
        };

       this.destroy = function () {
          $(args.container).empty();
        };

        this.focus = function () {
          $select.focus();
        };

        this.serializeValue = function () {
          return $select.val();
        };

        this.applyValue = function (item, state) {
          item.attributes[args.column.field] = state;
        };

        this.loadValue = function (item) {
          defaultValue = item.attributes[args.column.field];
            $select.val(defaultValue);
        };

        this.isValueChanged = function () {
           return ($select.val() != defaultValue);
       };

       this.validate = function () {
           return {
               valid: true,
               msg: null
           };
       };

        this.init();
        return $select.val();
      }

Answer 1

Did you see my answer to this question ?

If you are able to get the options from the rest service for each row while generating the page, you can just use my solution at the client side …

As I understand from you comment, the problem is how to postback the changes made in the grid after the user changed some fields …

I solved this by adding the following piece of code, notice the JS code for the form submit, handle this incoming data at the server side, to save it using the RESTfull service.

<div id="myGrid" style="width:90%;height:250px;"></div>
<form action="" method="POST">
  <input id="save_grid_changes" disabled="disabled" type="submit" value="Save changes to {{obj_type}}(s)">
  <input type="hidden" name="obj_type" value="{{obj_type}}">
  <input type="hidden" name="data" value="">

</form>

<script>
$(document).ready(function() {

    grid = new Slick.Grid($("#myGrid"), griddata, columns, options);

    $("form").submit(
      function() {
        // commit the last edit ...
        grid.getEditController().commitCurrentEdit(); 
        grid.resetCurrentCell();
        $("input[name='data']").val( $.toJSON(griddata) );
        // ("input[name='data']").val($.param(data));
    });
  });  
</script>