Questions on Kendo UI for jQuery Forum

0 answers

493 views

How to display empty grid when every row related to a grouping row is removed?

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");
}

Hopefully this helps someone down the line.

Grid

updated question on 07 Dec 2022

1 answer

336 views

make kendo popup window to be maximized in chrome/android

Hi,

I am trying to open a maximize grid/edit popup in chrome in an android phone, and if the status bar is visible, and the user opens the popup, the popup maximizes OK, but if the user scrolls down, the status bar disappears, and now we open the popup, the popup.maximize does not cover all the available area.

edit: (e) => {

                    //edit window
                    this.myEditPopupWindow = e.container.data("kendoWindow");
                    if (this.myEditPopupWindow) {
			this.myEditPopupWindow.maximize();
		    }
}

I have tried setting the height/size of the popup manually to different settings , but the popup still does not fit the the available space

   edit: (e) => {

                    //edit window
                    this.myEditPopupWindow = e.container.data("kendoWindow");

                    //var h= $(document).height();
                    //var w = $(document).width();

                    //var w = window.innerWidth;
                    //var h = window.innerHeight;

                    var h = window.screen.height;
                    var w = window.screen.width;

                    if (this.myEditPopupWindow) {
                            this.myEditPopupWindow.setOptions({ width: w, height: h });
                            this.myEditPopupWindow.center();
		    }
}

Any idea how can this be achieved?

Thanks

Window

answered on 06 Dec 2022

1 answer

262 views

Is there a web implementation for the Expression Editor component?

I need something like this, but for web:

https://docs.telerik.com/devtools/winforms/controls/gridview/expression-editor/expression-editor

If not, are there plans to add it?

Thanks.

General Discussions

answered on 06 Dec 2022

1 answer

187 views

KendoDropdownlist is auto clearing the value in filter(serchbox)

Dear team,

I am facing an issue realted to kendo dropdwonlist filter ,we are getting this issue after upgrading to kendo version v2022.2.510 . The issue is after entring the value in serchbox(filter) it is clearing the value automatically by this the calling to the filtering is happening twice to server side. how to prevent this auto clearing please suggest the way.

Thank you for your support,

Regards,

Sai

DropDownList

Filter

answered on 02 Dec 2022

2 answers

628 views

Line Chart with different colors in single line.

Is there any way to draw a line chart with different colors in a single series.

from point to point change the colors based on conditions

I need line chart as like below attached image.

Charts

answered on 01 Dec 2022

2 answers

116 views

Is there a way to have a million interval on chart?

I have a base unit of "Minute" with the interval of 1Million Minutes on x-axis of the chart. Data from 2000 to 2022.

var steps = TotalMinutes * .10; //[11,000,000] * .10 = 1,100,000 minutes

opt..categoryAxis.baseUnit = "minute"

opt..categoryAxis.majorGridLines.step = steps;

opt.categoryAxis.labels.step = steps;

When I try to load it on the chart the browser crashes.

Is it possible for the chart to handle this type of inputs?

Charts

answered on 01 Dec 2022

1 answer

313 views

Grid select first element of page or the new added element

Hi,

how can I achieve that when I go through my grid (paging is active), that always the first entry of the respective page is selected, but if a new element is added to the grid, this should be selected? I would be very grateful for an example.

I know how to select the first item of each page (did at in dataBound), but as soon as I add a new item to the grid I don't know how to turn off this default behavior to select the new item.

Thanks in advance

Grid

answered on 01 Dec 2022

1 answer

129 views

Scrollview Remote Datasource Paging of 1 issue

So I am trying to create a Scrollview from a remote datasource and put the images into a template. I only want 1 image per "page". The code from the following screenshots come from this dojo.

This is the template with the issue.

If you have the pageSize set to 2 or more each page shows the template as designed.

If I change that to a pageSize of 1 the template is blank. How do I get the template to display 1 product per page?

ScrollView

answered on 30 Nov 2022

0 answers

126 views

Kendo MVC calendar

I want to use the Calendar component in MVC but I want to set the events and show the calendars based on the week number not on the day of the week or weekly view
so as example September would be 4 weeks and you can select a week for this event not a day

Calendar

asked on 30 Nov 2022

1 answer

125 views

Force KendoDateTimePicker to accept any date and time we select irrespective of time zone

Iam using the KendoDateTimePicker for MVC.

Currently am in GMT+0200 (Israel Standard Time) and i want to select a particular time in in KendoDateTimePicker. For e.g., say the time is 25-Mar-2022 02:00. when i select the time part as 02:00, the time part automatically skips and formats to 03:00, which i know for that datetime +1 hour daylight saving is applicable.

Although i reside in this time zone but the data i want to manage is of different countries which has the daylight saving is not applicable.

Can i somehow manage the kendoDateTimePicker date and time without affecting this daylight saving.

Which means the picker should accept all dates and times irrespective of any time zone.

Thanks.

DatePicker

answered on 30 Nov 2022