Requirement:
Dynamically change OJET table header text,It will helpful for translations and keep maintaining lables in seperate file.
Syntax for OJET Table in html:
<oj-table id='table' aria-label='Departments Table'
data='[[pagingDatasource]]'
on-oj-before-current-row='[[onSelectRow]]'
columns-default='{"sortable": "disabled"}'
columns='[{"headerText": "Department ID"},
{"headerText": "Dapartment Name"},
{"headerText": "Department Description"}]'
row-renderer='[[oj.KnockoutTemplateUtils.getRenderer("row_tmpl", true)]]'>
</oj-table>
<script type="text/html" id="row_tmpl">
<tr>
<td data-bind="text: departmentID">
</td>
<td data-bind="text: departementName">
</td>
<td data-bind="text: departmentDescription">
</td>
</tr>
</script>
In the above code, header text we are giving in static format. If you want to add in dynamically,we need to override in respective js file like below,
self.departmentId= ko.observable('Dept ID');
self.departmentName= ko.observable('Dept Name);
self.departmentDesc= ko.observable('Dept Description');
Add below code in one of OJET life cycle method.
self.handleBindingsApplied = function () {
$("#table")[0].columns = [{"headerText": self.departmentId()},
{"headerText": self.departmentName()},
{"headerText": self.departmentDesc()}
];
}
Dynamically change OJET table header text,It will helpful for translations and keep maintaining lables in seperate file.
Syntax for OJET Table in html:
<oj-table id='table' aria-label='Departments Table'
data='[[pagingDatasource]]'
on-oj-before-current-row='[[onSelectRow]]'
columns-default='{"sortable": "disabled"}'
columns='[{"headerText": "Department ID"},
{"headerText": "Dapartment Name"},
{"headerText": "Department Description"}]'
row-renderer='[[oj.KnockoutTemplateUtils.getRenderer("row_tmpl", true)]]'>
</oj-table>
<script type="text/html" id="row_tmpl">
<tr>
<td data-bind="text: departmentID">
</td>
<td data-bind="text: departementName">
</td>
<td data-bind="text: departmentDescription">
</td>
</tr>
</script>
In the above code, header text we are giving in static format. If you want to add in dynamically,we need to override in respective js file like below,
self.departmentId= ko.observable('Dept ID');
self.departmentName= ko.observable('Dept Name);
self.departmentDesc= ko.observable('Dept Description');
Add below code in one of OJET life cycle method.
self.handleBindingsApplied = function () {
$("#table")[0].columns = [{"headerText": self.departmentId()},
{"headerText": self.departmentName()},
{"headerText": self.departmentDesc()}
];
}
Such an excellent and interesting blog, do post like this more with more information, this was very useful, Thank you.
ReplyDeleteAviation Courses in Chennai
air hostess training academy in chennai
Airport Management Training in Chennai
airport ground staff training courses in chennai
medical coding classes
fashion technology courses in chennai
Interior design courses in Chennai