Questions on Kendo UI for jQuery Forum

1 answer

109 views

Hi,

I've got an easy question, but I can't figure it out how it works.

My grid depends on another grid. If I select an item in grid A, grid B should always show page 1. Where and how can I set that page 1 is displayed? I tried it in DataBound, but it leads to a full call stack.

I would appreciate an example.

Thanks

Grid

answered on 13 Dec 2022

1 answer

212 views

Kendo grid loading too slow for a reasonable 1500 rows of data. Total size 250mb.

Hi all,
I am having some performance issue with Kendo grid when retrieving around 1500 rows of data equivalent to the size of 250mb. I was actually able to make it load faster by setting ServerOperation(true); But using this broke my import export functionality being used in the page. The reason is unknown. The only change I made was setting the serverOperation to true. Is there any way to improve performance with ServerOperation as false. Personally i think the amound of data that actually renders shouldn't hamper the performance as it is doing right now. Any help will be appriciated. Thank you!

Data Source

Grid

answered on 12 Dec 2022

1 answer

146 views

Nest Rating in Listview

Hello

I would like to use jQuery ListView to display products for an eshop solution.

Is it possible to nest a jQuery Rating Widget inside the ListView template and set the value when binding the data to the ListView?

I use ASP.Net Core with RazorPages.

Thank u for ur support!

ListView

Rating

Templates

answered on 12 Dec 2022

1 answer

174 views

kendopdfviewer rendering pixelated on some computers...

Hi - we have hundreds of thousands of users that access PDF documents using our products, which use the KendoPdfViewer for jQuery to display PDF documents in a web Application. We are receiving reports that some users are seeing pixelation, or dropped pixels, in many PDF documents. If they download the document and open it in a viewer of their choice, it is fine. Incidentally, I see the same pixelation on your demo page for KendoPdfViewer (https://demos.telerik.com/kendo-ui/pdfviewer/index). I have one machine in my possession (Windows 10) that seems to have the problem. I have tried several different browsers and the result is the same. I have a Windows 11 machine that works fine. I tried upgrading pdf.js to the latest version, and updated Kendo to 2022.3.1109 - only slight improvement. I uploaded screenshots highlighting the issue both on Telerik's page and ours.

Has anyone else encountered this? Did you find a solution?

We love Telerik but will need to find an alternative soon if we cannot resolve this problem.

Thanks!

PDFViewer

answered on 09 Dec 2022

1 answer

107 views

Gantt widget - from version R2 2022 - change event triggers on everything

Hi,

I am trying to upgrade from R3 2021 to latest version of the library.

However, I noticed that from version 2022.1.301 - whatever happens on gantt list, change event is triggered, what before wasn't case.

For example, if I select task A, and try to collapse another phase, change is triggered, selection of task A is lost.

Behavior is reproducible in the following Dojo, just change library version to any before 2022.1.301 to see old behavior and to that one or after for a new behavior.

If new behavior is not a bug, please could you advise on how to persist selection of the task on these side actions (collapse phase for example).

If you need any info, I will be happy to help.

Regards,

Vedad

Gantt

updated answer on 08 Dec 2022

4 answers

863 views

row custom background color disappears on expand/collapse of treelist

Hi,

I am using the following method to modify row background colors.

Basically I want all parents to have one color while their children to have another color.

Here's what I am doing:

However, on expanding the treelist, it goes back to the original color (i.e. alternating white and greys)..What do I need to fix (or some other way) to accomplish what I am trying?

function onDataBound(e){

console.log("data bound event called");

var rows = e.sender.tbody.children();

for (var j=0; j<rows.length;j++){

var row = $(rows[j]);

var dataItem = e.sender.dataItem(row);

var stratName = dataItem.get("strategyName");

if (stratName.indexOf("parent") != -1 ) {

row.css({"background-color": "#fda"});

}

else{

row.css({"background-color": "#ced"});

}

}// end of onDataBound

Thanks a lot,

Labhesh

TreeList

answered on 08 Dec 2022

1 answer

663 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

165 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

470 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

298 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