We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
KanbanFeatures.cshtml
@(Html.EJ().Kanban("Kanban")
…………………..
.AllowFiltering(true) // Enabled filtering
.CustomToolbarItems(tool =>
{
tool.Template("#DynamicFilter").Add(); // template to render custom toolbar items
})
.ClientSideEvents(eve => eve.ActionComplete("complete")) // Action Complete event
)
|
|
KanbanFeatures.cshtml
<script>
var ddlData = ["equal", "notequal"];
function complete(args) {
$('#operator').ejDropDownList({// Created dropdown list for operator
dataSource: ddlData,
width: "150px",
watermarkText: "Operators",
fields: { text: "text", value: "text" }
});
$('#fieldName').ejMaskEdit({ inputMode: ej.InputMode.Text, watermarkText: "Field Name"}); // Created input text box
$('#value').ejMaskEdit({ inputMode: ej.InputMode.Text, watermarkText: "Value"});// Created input text box
$('#button').ejButton({ click: onClick, width: "100px" });// Created button
$('#clear').ejButton({ click: clear, width: "100px"});
}
function onClick(args) { // This event triggered when filter button click
var kanbanObj = $("#Kanban").data("ejKanban"), kbnQuery = ej.Query();
var queryField = $("#fieldName").val(), queryOperator = $("#operator").val(), queryValue = $("#value").val();// Get input values
if (kbnQuery.queries.length > 0 && !ej.isNullOrUndefined(kbnQuery.queries[0].e.predicates))
kbnQuery.queries[0].e.predicates.push(new ej.Predicate(queryField, queryOperator, queryValue, true));
else {
var predicates = [];
predicates.push(new ej.Predicate(queryField, queryOperator, queryValue, true)); // Created ej.Predicate
kbnQuery.where(ej.Predicate["and"](predicates)) // Add where query
}
kanbanObj.KanbanFilter.filterCards(kbnQuery) // Passed query into filterCards public method
}
function clear() { // This event triggered when clear button click
var kanbanObj = $("#Kanban").data("ejKanban");
$("#fieldName").val("");
$("#value").val("");
$("#operator").ejDropDownList({text: ""});
kanbanObj.KanbanFilter.clearFilter();// Clear filter
}
</script>
<script id="DynamicFilter" type="text/x-jsrender"> // Custom tool bar template
<table>
<td><label class="custom">Custom Filter:</label></td>
<td><input type="text" id="fieldName" /></td>
<td><input type="text" id="operator" /></td>
<td><input type="text" id="value" /></td><td> </td>
<td><button type="button" id="button">Filter</button></td>
<td><button type="button" id="clear">Clear</button></td>
</table>
</script> |
