Questions on Kendo UI for jQuery Forum

1 answer

715 views

kendo scheduler : TypeError: Cannot read properties of null (reading 'getTimezoneOffset')

Hi,

What I am trying to achieve:

Have a local array of my objects to be displayed by the scheduler, then I would need to remove some of them, and at the same time insert new ones

When the page first loads, it works ok, as soon as I try to update the underline data source I get the error:

TypeError: Cannot read properties of null (reading 'getTimezoneOffset')

To reproduce, please press the "Update" button. (I have attached a sample) PS: Please note that I am currently using: kendo.2022.1.412 ( I forgot to update the sample, but it throws the same error)

And one more question, for the scheduler then to reflect the changes , do I need to call the scheduler.view? or will it be ok to just trigger the scheduler.dataSource.read()?

	  //update scheduler
          var scheduler = $("#scheduler").data("kendoScheduler");
          scheduler.dataSource.read();
          //scheduler.view(scheduler.view().name)  ----> do we really need this?

Thanks,

Data Source

Scheduler

answered on 08 Dec 2022

1 answer

194 views

Kendo ThemeBuilder styles not applying to simple chart.

I used the themebuilder to create a jqeury ui theme based off the default theme. I set default data viz colors and exported the theme. However, my simple sample bar chart still shows the default colors. Not sure what the problem is... Any thoughts?

Here you can see the colors just fine (themebuilder):

Here's how the chart looks when I use the theme (I'm just using kendo demo code):

Code:

$("#chart").kendoChart({
                title: {
                    text: "Site Visitors Stats"
                },
                subtitle: {
                    text: "/thousands/"
                },
                theme: 'default',
                legend: {
                    visible: false
                },
                seriesDefaults: {
                    type: "bar"
                },
                series: [{
                    name: "Total Visits",
                    data: [56000, 63000, 74000, 91000, 117000, 138000]
                }, {
                    name: "Unique visitors",
                    data: [52000, 34000, 23000, 48000, 67000, 83000]
                }],
                valueAxis: {
                    max: 140000,
                    line: {
                        visible: false
                    },
                    minorGridLines: {
                        visible: true
                    },
                    labels: {
                        rotation: "auto"
                    }
                },
                categoryAxis: {
                    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
                    majorGridLines: {
                        visible: false
                    }
                },
                tooltip: {
                    visible: true,
                    template: "#= series.name #: #= value #"
                }
            });

Charts

Styling

answered on 07 Dec 2022

0 answers

485 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

326 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

251 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

176 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

611 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

103 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

296 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

118 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.