Search code examples
knockout.jskogrid

KoGrid custom Cell Template

I need custom KoGrid Cell Templates like this: enter image description here

for this model: 

          var model = [
    { Color: { Hex: "#5EB95E", Name: "green" }, 
    AvailablePatterns: { SelectedId:"", 
       Patterns:[{Title:"test1", Id:1},{Title:"test3", Id:2}]}},
    { Color: { Hex: "#FAA732", Name:"orange" }, 
    AvailablePatterns: { SelectedId:"", 
       Patterns:[{Title:"test2", Id:3},{Title:"test4", Id:4}]}}];

How I can use fields Color and AvailablePatterns in my cell? I try to get this fields with $parent.getProperty method, but it doesn't work for me

     columnDefs: [
             {
            field: 'Color', 
            displayName: 'Color', 
            cellTemplate: '<span class="status" data-bind="style: { backgroundColor : $parent.getProperty("Color.Hex") }"></span>' +
                '<span data-bind="text: $parent.getProperty("Color.Name")"></span>'
        },
          {
              field: 'AvailablePatterns', 
              displayName: 'Pattern', cellTemplate: "<select class=\"pattern\" \
                   data-bind=\" options: $parent.getProperty('AvailablePatterns.Patterns'), \
                   optionsValue: '$parent.getProperty('Id')', \
                   optionsText: '$parent.getProperty('Title')',\
                   value: '$parent.getProperty('AvailablePatterns.SelectedId')' \"> \
                     </select>"
          }
      ]

https://jsfiddle.net/akvm9qgy/

Solution

  • You has following errors, feel free to ask me for further explanation:

    • Cell template must to be just one html element.
    cellTemplate: '<div><div class="status" data-bind="style: { backgroundColor : $parent.entity.Color.Hex }"></div><span data-bind="text: $parent.entity.Color.Name"></span></div>'
    • For accessing properties I'm more confortable with $parent.entity instead $parent.getProperty (actually I had never seen this method before)
    • optionValue and optionText must to be plain strings for property name
    cellTemplate: '<select class=\"pattern\" \
               data-bind=" options: $parent.entity.AvailablePatterns.Patterns, \
               optionsValue: \'Id\', \
               optionsText: \'Title\',\
               value: $parent.entity.AvailablePatterns.SelectedId"> \
                     </select>'

    Please see your fiddle updated