Problem showing a slider in EasyUI Datagrid Colum

[spider58]

I'm trying to add a slider into EasyUI datagrid colum. My column define codes below

Code:

          {
        field: 'a',
        title: 'Şeffaflık',
        width: 120,
        align: 'center',
        formatter: function(value, row, index) {
          if (row.editing) {} else {


            var slider = $('<div style="width:100%;"></div>').slider({
              width: 100,
              mode: "h",
              showTip: true,
              value: 1,
              min: 0,
              max: 1,
              step: 0.1,
            });
            return slider;
          }
        }

But unfortunately i can't see any slider. I can see a [object object] string instead of a slider

Please check below image. What i'm doing wrong.





Thanks

[jarry]

Please refer to the code below:

Code:

$('#dg').datagrid({
  columns: [[
    {
      field: 'a',
      title: 'Şeffaflık',
      width: 120,
      align: 'center',
      formatter: function(value, row, index) {
        if (row.editing) {} else {
          return '<div class="row-slider"></div>'
        }
      }
    }
  ]],
  data:data,
  onLoadSuccess: function(){
    $(this).datagrid('getPanel').find('.row-slider').slider({
      width: 100,
      mode: "h",
      showTip: true,
      value: 1,
      min: 0,
      max: 1,
      step: 0.1
    })
  }
})

[spider58]

Perfect Thank you.

Please refer to the code below:

Code:

$('#dg').datagrid({
  columns: [[
    {
      field: 'a',
      title: 'Şeffaflık',
      width: 120,
      align: 'center',
      formatter: function(value, row, index) {
        if (row.editing) {} else {
          return '<div class="row-slider"></div>'
        }
      }
    }
  ]],
  data:data,
  onLoadSuccess: function(){
    $(this).datagrid('getPanel').find('.row-slider').slider({
      width: 100,
      mode: "h",
      showTip: true,
      value: 1,
      min: 0,
      max: 1,
      step: 0.1
    })
  }
})