A grid of information supported with filter, sort, and search, built using ASP.NET, C# MVC, and Kendo UI, entities framework.
I assumed that documents have been checked by __'s software for duplication, then document and its information will be saved in the cloud database. Here, as an example, outputs of documents after processing from __'s software are saved in SQL as below:
The task is to create UI as a grid for:
- Presenting a list or grid of documents
- How a user can search/find documents
- Filter by the different duplicate types (identical, near duplicate etc...)
- High level info eg. - How many duplicates found in total and for each category
- Option to filter by 'confidence score' 0 - 1 (score .95 means we are 95% sure the files are duplicates)
Firstly, ASP.NET MVC C#, Entity Framework, JavaScript, Kendo UI, Linq, HTML are used to achieve the task above. However, this task has not been limited by ASP.NET C# MVC; it can be done by Java if required.
The input for grid is JSON type. Grid is to read or update data from actions of GetDocumentData and UpdateDocumentData.
public JsonResult GetDocumentData()
{
try
{
var documents = db.documents.Include(d => d.duplicateDetail);
var collection = documents.Select(x => new
{
idDoc = x.idDoc,
docName = x.docName,
docTypeID = x.docTypeID,
note = x.note,
confidenceScore=x.confidenceScore
}).ToList();
return Json(collection, JsonRequestBehavior.AllowGet);
}
catch (Exception e)
{
return Json(new { Success = false, Message = e.ToString() });
}
}And Update documents:
[HttpPost]
public JsonResult UpdateDocumentData(document model)
{
try
{
int Id = Convert.ToInt32(model.idDoc);
var updateData = (from f in db.documents
where Id == f.idDoc
select f).FirstOrDefault();
updateData.docName = model.docName;
updateData.docTypeID = model.docTypeID;
updateData.note = model.note;
db.SaveChanges();
}
catch (Exception e)
{
return Json(new { Success = false, Message = e.ToString() });
}
return Json(model);
}The inputs for grid contains fields of idDoc, docTypeID, note, and confidenceScore The grid view has been coded as below: @model WebApplication1.Models.document
@{
ViewBag.Title = "Document List";
}
<legend>Document List</legend>
<div id="documentGrid" style="width: 100%; font-size: 12px">
<script type="text/javascript">
var duplicateTypeList = @Html.Raw(Json.Encode(ViewBag.duplicateType)) ;
$(document).ready(function () {
var grid = $("#documentGrid").kendoGrid({
selectable: "single row",
allowCopy: true,
dataSource: new kendo.data.DataSource({
autoSync: false,
type: "json",
transport: {
read: {
url: "@Url.Action("GetDocumentData", "Home")",
dataType: "json"
},
update: {
url: "@Url.Action("UpdateDocumentData", "Home")",
dataType: "json",
type: "POST",
complete: function () {
grid.dataSource.read();
}
},
},
schema: {
errors: "errors",
model: {
id: "idDoc",
fields:
{
idDoc: { editable: false },
docName: {
style: "text-align: center",
type: "string",
validation: { required: true }
},
docTypeID: {
style: "text-align: center",
type: "number",
validation: { required: true }
},
note: {
style: "text-align: center",
type: "string",
validation: { required: true }
},
confidenceScore: {
style: "text-align: center",
type: "number",
validation: { required: true }
}
}
}
}
}),
editable: "popup",
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
reorderable: true,
groupable: true,
filterable: true,
sortable: true,
//toolbar: ["create"],
columns: [
{field: "docName", title: "Document Name", width: 50},
{field: "docTypeID", title: "Duplicate Info", values: duplicateTypeList, width: 150, attributes: { "class": "table-cell", style: "text-align: left" }
},
{ field: "confidenceScore", title:"Confidence Score", width: 50 },
{ field: "note", title: "Note", width: 80 },
{
command: [
"edit",
{
name: "Delete",
click: function (e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
window.location.href = "@Url.Action("Delete", "Home")" + "/" + dataItem.idDoc;
}
}
], title: " ", width: 60
}]
}).data("kendoGrid");
$("#documentGrid").kendoTooltip({
filter: "td:nth-child(5), td:nth-child(7)", //this filter selects the first column cells
position: "bottom",
width: 250,
showAfter: 500,
content: function (e) {
var dataItem = $("#documentGrid").data("kendoGrid").dataItem(e.target.closest("tr"));
var content = "<div style=\"text-align:left\" \"width:250\">" + dataItem.docName;
return content
}
}).data("kendoTooltip");
});
</script>Every column has fully functioned for filtering and sorting the data, then users can search any information based on its filtering option.
- Sorting by double click on every column you want to be sorted.
- Filtering by clicking "filter symbol":
Fig. 1 Grid with supported filtering and sorting.
- To search any information, you can click filtering in different column and type the value you want to find.
- Filter by the different duplicate types (identical, near duplicate etc...): you can click in the Duplicate Info, and choose the different duplicate type for filtering.
Fig. 2 Selected Option of Filtering by the different duplicate types (identical, near duplicate etc...)
- High level info, e.g. - How many duplicates found in total and for each category, is shown in the High Level of Info Tab on the website
Fig. 3 Selected High Level of Information with counting
- Option to filter by 'confidence score' 0 - 1 (score .95 means we are 95% sure the Files are duplicates): You can filter by the Confidence Score. Here, the filter is provided with different function like equal, is greater than or equal, is less than or equal, and so on.
- Demo has been captured by opening a file namely demo5.wmv.
- To run the project, please using the local database (documentDB as attached) for demo and changing connection string in the project.
- The code has been released by a first version of gridDocument-1.0.zip