Rank 1
Hi all,
I am very new to kendo UI grid and chart. We are currently using Kendo Grid and kendo chart to visualize the data in our system and are currently troubled by one scenario. I have grouped my grid with EquipmentID so every test results will be grouped according to the EquipmentID as depicted in the image below:
Now our main issue is : lets say if i remove the test results rows from "EquipmentID: 46570", the grid will automatically populate itself with the group: "40607". I understand why that happens. But the requirement is to display empty grid when the "EquipmentID: 46570" has lost all its rows. Now i tried to do it through controller in the backend but doing that resulted in every data being deleted from the grid completely and since the chart is directly related to the data in grid it is also empty. i still want the values for the other equipments but i want empty row or basically blank space for that "EquipmentID: 46570". Any help or direction towards a possible solution is appreciated. Thank you!
I am really sorry if i have not described the problem properly. Here is the code for kendo grid mvc:
@(Html.Kendo().Grid<WearMeasurementSingleResultModel>()
.ToolBar(t =>
{
t.Create();
t.Template(
@<text>
<div class="pull-left" style="
margin-left: 0.5rem;
font-size: .875rem;
font-weight: 600;
color: #fff;
padding: 0 1rem;
padding-top: 0.25rem;height:100%">
<span class="row complex-wear-grid-toolbar-pdsno" data-bind="text: Selected() == null ? '' : 'PDS No: ' + Selected().SortOrder, style: {height: ComplexType == 'Liner Type' ? '120%' : 'unset'}"></span>
@if (isScreenType)
{
<span class="row" data-bind="text: Selected() == null ? '' : 'Row/Column: ' + (Selected().RowLabel || '') + '/' + (Selected().ColumnLabel || '')"></span>
}
</div>
<div class="toolbar-filters pull-right">
@if (hasAccessToWear)
{
<button type="button" id="setTestDetails" title="@Complex.Details_NewTestResult" class="btn btn-default"><i class="fa fa-plus"></i></button>
} else
{
<button type="button" title="@Complex.Details_NewTestResult" class="btn btn-default disabled"><i class="fa fa-plus"></i></button>
}
</div>
<div class="pull-right complex-wear-toolbar">
<div class="controls resultsStyle">
@(Html.Kendo().DropDownList()
.Name("TestTypeIDFilter")
.HtmlAttributes(new { data_bind = "value: TestTypeID" })
.DataTextField("Name")
.DataValueField("Id")
.DataSource(ds => ds
.Read(read => read.Url($"/ComplexWear/_GetWearMeasurementSummaryType?areaId={AreaID}&equipmentTypeId={EquipmentTypeID ?? 0}"))
.ServerFiltering(true)
)
.Events(e =>
e.Change("PDS.ComplexWear.wearTestTypeChange")
.DataBound("PDS.ComplexWear.typeFilterDataBound")
))
</div>
</div>
</text>
);
})
.Name("WearResultsGrid")
.Columns(col =>
{
if (hasAccessToWear)
{
col.Template(c => { }).ClientTemplate("<div class='btn-group' id='editGroup'><button class='btn btn-default' title='View/Edit' onclick='PDS.WearManagement.viewTestResultDetails(this, \"#= uid #\")'><i class='fa fa-pencil'></i></button>" +
"<button class='btn btn-default dropdown-toggle' data-toggle='dropdown' onclick='PDS.Common.positionDropDown(this)'>" +
"<span class='caret'></span>" +
"</button>" +
"<ul class='dropdown-menu'>" +
"<li><a href='##' onclick='return PDS.WearManagement.deleteSimpleResultRow(this,\"#=uid#\");'><i class='fa fa-trash-o fa fa-fixed-width' style='width: 16px'></i> " + General.Delete + "</a></li>" +
"</ul>" +
"</div>").Width(55);
} else
{
col.Template(c => { }).ClientTemplate("<div class='btn-group' id='editGroup'><button class='btn btn-default disabled' title='View/Edit'><i class='fa fa-pencil'></i></button>" +
"<button class='btn btn-default dropdown-toggle disabled' data-toggle='dropdown' >" +
"<span class='caret'></span>" +
"</button>" +
"<ul class='dropdown-menu'>" +
"<li><a href='##'><i class='fa fa-trash-o fa fa-fixed-width' style='width: 16px'></i> " + General.Delete + "</a></li>" +
"</ul>" +
"</div>").Width(55);
}
col.Bound(c => c.TestDate).ClientTemplate($"#= PDS.TimeService.localiseUTCDate(TestDate) #").Width(100);
col.DecimalBound(c => c.Result, 3, 3, true).HtmlAttributes(new { data_val_thickness = true }).Width(75);
col.Bound(c => c.IsValid).ClientTemplate("<i class='fa fa-#= IsValid ? \"check\" : \"check-empty\" #'></i>").Width(50);
col.Bound(c => c.AttachmentCount).ClientTemplate("<a class='attachmentStyle' onclick='PDS.WearManagement.addAttachmentWearResultsWindow(\"#=WearMeasurementID#\")'><i class='fa fa-paperclip'></i> #=AttachmentCount#</a>").Title("Attachments").Width(55);
})
.DataSource(ds => ds.Ajax()
.ServerOperation(false)
.Batch(true)
.PageSize(20)
.Read(read => read.Action("_GetMultipleWearResults", "ComplexWearResults").Data("PDS.ComplexMapping.getSelectedEquipmentID"))
.Group(group => group.AddDescending(c => c.EquipmentID)).PageSize(100)
.Update(update => update.Action("_UpdateWearMeasurementSingleResults", "ComplexWearResults"))
.Create(update => update.Action("_UpdateWearMeasurementSingleResults", "ComplexWearResults"))
.Destroy(delete => delete.Action("_DeleteWearMeasurementSingleResults", "ComplexWearResults", new { Area = "Complex" }))
.Sort(s => s.Add(m => m.TestDate).Descending())
.Model(m => m.Id(x => x.WearMeasurementID))
.Events(ev => ev
.Sync("PDS.ComplexMapping.resultSync")
.Change("PDS.ComplexMapping.resultChange")
.RequestEnd("PDS.ComplexWear.wearGridEndRequest"))
)
.Editable(e => e.Mode(GridEditMode.PopUp).DisplayDeleteConfirmation(false))
.Pageable(p => p
.Refresh(true)
.PageSizes(false)
.Numeric(false)
.Input(false))
.Navigatable(n => n.Enabled(true))
.Events(ev => ev.DataBound("PDS.ComplexMapping.onDataBound"))
.Events(ev =>
{
ev.Change("PDS.ComplexMapping.resultChanged");
ev.DataBinding("PDS.ComplexMapping.resultDataBinding");
})
)
Update of the task:
I was able to actually achive it my comparing the equipmentId between the grid row and a function that returned the current equipmentId. so, i used some logic like this:
function getCurrentId(){
// returned selected current EquipmentID
}
if(equipmentId != return of getCurrentId())
{
collapseAllGrid(grid); // grid = "# + gridName" + data("kendoGrid");
}