Binding a select in a client template

(c) Bertrand Le Roy 2008 I recently got a question on one of my client template posts asking me how to bind a select tag’s value to data in client templates. I was surprised not to find anything on the web addressing the problem, so I thought I’d write a short post about it.

It really is very simple once you know where to look. You just need to bind the value property of the select tag, like this:

<select sys:value="{binding color}">

If you do it from markup like here, you just need to use the sys: prefix. It just works.

Here’s the full source code for my sample page:

<!DOCTYPE html>
<html>
<head>
  <title>Binding a select tag</title>
  <script
    src=http://ajax.microsoft.com/ajax/beta/0911/Start.js
    type="text/javascript"></script>
  <script type="text/javascript">
    Sys.require(Sys.scripts.Templates, function() {
      var colors = [
        "red", "green", "blue",
        "cyan", "purple", "yellow"
      ];
      var things = [
        { what: "object", color: "blue" },
        { what: "entity", color: "purple" },
        { what: "thing", color: "green" }
      ];
      Sys.create.dataView("#thingList", {
        data: things,
        itemRendered: function(view, ctx) {
          Sys.create.dataView(
            Sys.get("#colorSelect", ctx),
            { data: colors });
        }
      });
    });
  </script>
  <style type="text/css">
    .sys-template {display: none;}
  </style>
</head>
<body xmlns:sys="javascript:Sys">
  <div>
    <ul id="thingList" class="sys-template">
      <li>
        <span
          sys:id="thingName"
          sys:style-color="{binding color}"
          >{{what}}</span>
        <select
          sys:id="colorSelect"
          sys:value="{binding color}"
          class="sys-template">
          <option
            sys:value="{{$dataItem}}"
            sys:style-background-color="{{$dataItem}}"
            >{{$dataItem}}</option>
        </select>
      </li>
    </ul>
  </div>
</body>
</html>

This produces the following page:Binding Select

Each of the items sees its color change as you select a different color in the drop-down.

Other details worth noting in this page are the use of the script loader to get the framework from the CDN, and the sys:style-background-color syntax to bind the background color style property from markup.

Of course, I’ve used a fair amount of custom ASP.NET Ajax markup in here, but everything could be done imperatively and with completely clean markup from the itemRendered event using Sys.bind.

8 Comments

  • I just love this new ASP.NET AJAX functionality.

  • @Peter: couldn't find it. Hence the post.

  • Thanks...really helpful post!

    I haven't needed to use a multiple select element (aka listbox), but how would this work for that? I tried binding sys:value on the select element to an array of values but nothing was selected on render.

  • @Steve: I think in this case you'd need to do it the hard way. Bind the sys:selected property of the options instead. To read selected items, scan the options collection and add to an array as you find selected options.

  • I have some problem with DataView.
    Sys.setCommand in beta version was a function used to eg. attach "select" command of DataView to some input in imperative way.

    Now (in release version of asp.net ajax) function setCommand seems to be undefined in Sys namespace.

    Maybe some of you know what happend with it?

    Problably it was move to other namaspace or repalce by somethink else, but i need more precisely information.

    Some advice?

  • @jahu: I think you do Sys.query(selector).setCommand instead.

  • Thanks a lot!
    Could you give me a link to web side documentation or tutorials, because i couldn't find it at all.

  • I want to have template binding of drop down list with a string array.
    I tried the sample but got the error "Object doesn't this support this property or method". Not sure but it seems the it's unable to recognize the itemRendered event. Any thoughts?

Comments have been disabled for this content.