Questions on Kendo UI for jQuery Forum

1 answer

152 views

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

187 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

114 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

873 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

688 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

181 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

476 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

311 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

245 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

166 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