Welcome back for another episode of Kendo UI Resources!
If you didn’t catch my first blog post on this topic, you can find it here! I would highly recommend reading this article to learn more about how The Portal Connector leverages Kendo UI, and the resources available to help you learn it. In this article, we will be looking at specific examples of how you can modify The Portal Connector using Kendo UI.
Kendo Filters
In this first code example, we will be binding to the
DataBound event of the TPC Grid (
Kendo Grid) object and applying filters when the data is first bound to the control. This code can be used to apply a filter(s) to any control with a DataSource (Grid, ListView, etc.) on the client side. Filters don’t necessarily need to be applied on the DataBound event, but this will ensure that the filters will be applied immediately when the DataSource first receives data.
$(function(){
//Returns the Kendo Grid Object
var grid = tpc.page.TpcGridModel.get_grid();
//Create Kendo Filter Objects to Add to the Grid
var filters = [
{ field: "SubjectId", operator: "equals", value: "00000000-0000-0000-0000-000000000000" },
{ field: "StateCode", operator: "equals", value: 2 },
{ field: "StatusCode", operator: "equals", value: 1 }
];
//Bind The Filters to the DataBound Event of the Grid Datasource
grid.one("dataBound", grid.dataSource.filter({logic: "and", filters: filters}));
//Refresh the Data
grid.dataSource.fetch();
});
Breaking down this code example:
1) Utilize the
TPC API to get the Kendo Grid object that powers the widget.
2) Create a
Kendo Filter object with our custom filter conditions.
3) Add the filter(s) to the Grid’s
DataSource on the first DataBound event.
4) Refresh the DataSource
Custom Form Validation
In this next code example, we will be adding custom form validation to a TPC Form using the Kendo Validator (https://docs.telerik.com/kendo-ui/api/javascript/ui/validator) object. This code can be used to apply custom client-side validation to a form when the designer properties do not provide enough flexibility for your requirements.
/* Acquire Existing Validator */
var validator = $("[data-tpc-name="+tpc.forms[0].$$name+"]").data("kendoValidator");
/* Create A Rule For decimal1 Field (Numeric Textfield) */
var decimalRule = function (input) {
if (input.is($("input[id*='decimal1']")) && $("input[id*='decimal1']").val() > 100){
return false;
}
else {
return true;
}
}
/* Create A Custom Message for decimal1 Field */
var decimalMessage = function(input) {
return "You must input a decimal that is less than or equal to 100. " + input.val() + " is greater than 100.";
};
/* Create A Rule For gendercode Field (Picklist) - Works On Optionset Value (2 = Female) */
var dropDownRule = function (input){
if (input.is($("input[id*='gendercode']")) && $("input[id*='gendercode']").val() != 2){
return false;
}
else {
return true;
}
}
/* Create A Custom Message for gendercode Field */
var dropDownMessage = "This form only accepts Females.";
/* Add new Rules and Messages to existing validator */
validator.options.rules.decimalRule = decimalRule;
validator.options.messages.decimalRule = decimalMessage;
validator.options.rules.dropDownRule = dropDownRule;
validator.options.messages.dropDownRule = dropDownMessage;
/* Update Validator Options */
validator.setOptions(validator.options);
Breaking down this code example:
1) Acquire the existing Kendo Validator of the TPC Form control.
2) Create custom rules and messages for the TPC Form field(s).
3) Add the new validation rules and messages to the Kendo Validator.
4) Call the
setOptions() function to save the changes.
TPC Grid / ListView Search Results
In this next code example, we will be examining how to execute a function that operates based on the results that are returned by a
DataBound event. This event is triggered when a control with a DataSource binds to new data, such as the initial data population or performing a search. In the following example, we will hide the TPC Knowledge Base Search container whenever there are no results are returned.
$(document).ready(function () {
/* Bind to the DataBound Event */
tpc.page.TpcKnowledgeBaseSearchModel.get_listView().bind("dataBound", function (e) {
/* No Results in DataSource - Hide Container */
if (e.items.length === 0){
$("table.tpc-kb-search-table").hide();
$("div[data-tpc-role=kb-container]").show();
}
/* Results in DataSource - Show Container */
else{
$("table.tpc-kb-search-table").show();
$("div[data-tpc-role=kb-container]").hide()
}
});
});
Breaking down this code example:
1) Bind an Anonymous Function to the ListView DataBound event.
2) Check how many items are returned in event.Items.
TPC Grid Column Settings
In this final code example, we will be changing the settings of an individual column in a TPC Grid (Kendo Grid) control. In this case, we will be disabling the ability to sort on an individual column.
/* Obtain Grid Object */
var grid = tpc.page.TpcGridModel.get_grid();
/* Obtain specific column within the grid */
var column = grid.columns.filter(function(item){ return item.field == "creditlimit"; })[0];
/* Set Sortable Setting to False */
column.sortable = false;
/* Apply Option Changes */
grid.setOptions({
columns: grid.columns
});
Breaking down this code example:
1) Retrieve the Kendo Grid object.
2) Obtain the specific column.
3) Change column sorting settings.
4) Apply options using setOptions() function.
Bonus Code: DataSource to CSV File
Holy guacamole, you must certainly be a developer if you’ve made it to this point! Due to the complexity of this next example, I will not be showing the code here in the blog post, but feel free to download the following link from our website to see how you can add a download button to a TPC Grid or TPC ListView (really anything with a DataSource) that will allow you to download the DataSource information to a CSV file. You can download this code
here.
Thank you for following along with the Kendo UI Resource – Part 2: Code Examples. Hopefully, you learned something along the way, and you can dive headfirst into customizing your own TPC Portal Widgets!