How to put checked list box in editor template

[R Brian Lindahl]

I have a column in a grid that has a checked list box in it, using the e-edit-template tag to set the checked values via a comma-separated list of names. Now I'm converting the grid to use an inline form template for editing. How do I initialize the listbox in the template script, and how do I set the checked values? I've included my existing column template below for reference purposes.

function create() {
    return "<input>";
  }
  function read(args) {
    var data = args.ejDropDownList("getSelectedValue");

    if (!data)
      return "";

    return data;
  }
  function write(args) {
    var val = ej.isNullOrUndefined(args.rowdata["Roles"]) ? "" : args.rowdata["Roles"];
    val = val.replace(/, /g, ",");
    var data = @Html.Raw(Model.Roles);
    var datas = ej.DataManager(data).executeLocal(new ej.Query().where("Roles", "equal", val));
    args.element.ejDropDownList({
      dataSource: args.column[3].dataSource,
      fields: { text: "Name", value: "Name" },
      showCheckbox: true,
      width: "100%",
      value: val
    });
  }

  function queryCellInfo(args) {
    if (args.column.field == "Roles") {
      var field = "Name", merge = false; preds = [];
      var txt = args.data.Roles.split(", ");
      var predicate = new ej.Predicate(field, "equal", txt[0]);// ej.parseInt(txt[0]));
      for (var tx = 1; tx < txt.length; tx++) {
        preds.push(new ej.Predicate(field, "equal", txt[tx]));
        merge = true;
      }
      if (merge) {
        preds.unshift(predicate);
        predicate = ej.Predicate.or(preds);
      }
      var datas = ej.DataManager(args.column.dataSource).executeLocal(new ej.Query().where(predicate));
      var str = "";
      for (var s = 0; s < datas.length; s++) {
        str = s == 0 ? str.concat(datas[s].Name) : str.concat(", " + datas[s].Name)
      }
      $(args.cell).text(str);
    }
  }

[Renjith Singh Rajendran]

Hi R Brain,

 

Thanks for contacting Syncfusion support.

 

We have analyzed your query and based on your requirement we have prepared a sample which could be downloaded from the link below,

http://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication111016992436

 

We suggest you to use the action-begin and action-complete events of Grid. In the action-complete event we have rendered the dropdown list and bound the datasource in it. In the action-begin event we have assigned the values selected from the dropdown to the corresponding column. Please refer the code example below,

 

<ej-grid id="FlatGrid" allow-paging="true" query-cell-info="onQuery" action-begin="begin" action-complete="complete">

    ...

    ...

    <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="InlineFormTemplate" inline-form-template-id="#template"></e-edit-settings>

    ...

</ej-grid>

<script id="template" type="text/template">

    <table cellspacing="10">

        <tr>

            <td>Order ID</td>

            <td>

                <input id="OrderID" name="OrderID" disabled="disabled" value="{{:OrderID}}" class="e-field e-ejinputtext" style="width:116px;height:28px" />

            </td>

            <td>Customer ID</td>

            <td>

                <input id="CustomerID" name="CustomerID" value="{{:CustomerID}}" class="e-field e-ejinputtext" style="width: 116px; height: 28px" />

            </td>

        </tr>

        <tr>

            <td>Ship City</td>

            <td>

                <input id="ShipCity" name="ShipCity" />

            </td>

        </tr>

    </table>

</script>

<script>

    var str = [];

    function begin(args)

    {

        if (args.requestType == "save")

        {

            str = $("#ShipCity").ejDropDownList("getSelectedValue")

            args.data.ShipCity = str

        }

    }

    function complete(args) {

        var items = [{

            text: "Berlin",

            value: "Berlin"

        }, {

                text: "Madrid",

            value: "Madrid"

        }, {

                text: "Cholchester",

            value: "Cholchester"

        }, {

                text: "Marseille",

            value: "Marseille"

        }, {

                text: "Tsawassen",

            value: "Tsawassen"

        }];

                 $("#ShipCity").ejDropDownList({

                     dataSource: ej.DataManager(items),

                     multiSelectMode: ej.MultiSelectMode.Delimiter,

                     showCheckbox: true

                 });

              }

</script>

 

Regards,

Renjith Singh Rajendran.