Kendo Gantt change column values

318 Views Asked by At

I use Kendo UI for jQuery - Gantt widget. The data model contains two fields (Value1 and Value2). How can I use a radio-button to switch the display of a value in a column from Value1 to Value2 and backwards (without resending requests to the server)? And how to first initialize columns depending on the parameter (what value to display in the column)?

public MyData {
  Id: number;
  PeriodStart: date;
  PeriodEnd: date;
  Value1: string;
  Value2: string;
}

$("#myGantt").kendoGantt({
  toolbar: [
    { template: kendo.template($("#MyTemplate").html()) }
  ],
  columns: [
    { field: "Id", title: "Id" },
    { field: "start", title: "Date begin" },
    { field: "end", title: "Date end" },
    { field: "TODO", title: "Value1 or Value2", width: 100 }
  ],
  ...
});

<script id="MyTemplate" type="text/x-kendo-template">
  <div>
    <div id="ganttRadioGroup">
      <label><input type="radio" name="nameGantt" id="name1" value="1" checked>Value 1</label>
      <label><input type="radio" name="nameGantt" id="name2" value="2">Value 2</label>
    </div>    
  </div>
</script>
<div id="myGantt"></div>

How to switch value?

$("#ganttRadioGroup input").on("change", function () {
  let selectedRadioValue = $("input[name=nameGantt]:checked", "#ganttRadioGroup").val();
  // TODO
}
0

There are 0 best solutions below