Questions on Kendo UI for jQuery Forum

1 answer

946 views

I have a series of Kendo UI Jquery DropDownLists. When one is selected, the change event fires and makes an ajax call to get the next list's options. This works fine when a user manually selects one and then the next, however I have a button that will auto populate all lists with selected options via the .value(123) and .trigger("change") calls. Unfortunately, the trigger event doesn't wait for the change to finish before calling the next set of .value(234) and .trigger("change") events. How can I fix this?

Here is an example DoJo. In it, note that if you click "Choose Florida" when "south" is not already selected you get nothing. Also note that the console is logging "Looing for Florida" before it logs "Now I have the states".

https://dojo.telerik.com/@dojolee/AleWuvAP

DropDownList

answered on 01 Mar 2023

0 answers

192 views

grid release custom row css class when click cancel (inline row edit)

to set the class

var hasInvalid = false;
                        // iterate the data items and apply row styles where necessary
                        var dataItems = e.sender.dataSource.view();
                        for (var j = 0; j < dataItems.length; j++) {
                            // Get the value of the discontinued cell from the current dataItem.
                            var isNotValid = dataItems[j].get("isNotValid");

                            // Find the table row that corresponds to the dataItem by using the uid property.
                            var row = e.sender.tbody.find("[data-uid='" + dataItems[j].uid + "']");
                            // Add the class if the row is discontinued.
                            if (isNotValid) {
                                row.addClass("warning");
                                hasInvalid = true;
                            } else {
                                row.removeClass("warning");
                            }
                        }

the workaround, but could be done the better way?

cancel: function (e) {
                        e.model.isNotValid = (e.model.ardentAgency.id === null
                            || !e.model.employeeFound 
                            || ((e.model.disposition === "" || e.model.disposition === null) && e.model.ardentDisposition.code === null)
                            || ((e.model.status === "" || e.model.status === null) && e.model.ardentStatus.code === null)
                            || ((e.model.businessState !== "" && e.model.businessState !== null) && e.model.ardentBusinessState.code === null)
                            || ((e.model.licenseType === "" || e.model.licenseType === null) && e.model.ardentLicenseType.code === null));                       
                        

                        if (e.model.isNotValid) {
                            var rowModel = e.sender.dataSource.get(e.model.recordId);
                            var modelUID = rowModel.get("uid");
                            var rowselector = "tr[data-uid='" + modelUID + "']";
                            setTimeout(function(){
                                console.log(rowselector);
                                $(rowselector).addClass("warning");
                            }, 500);                            
                        }
                    },

Grid

asked on 01 Mar 2023

1 answer

340 views

How can I keep the previous formatting in the use of the insertHtml function?

Hallo,
i added a custom tool in the editor and am using it to add horizontal tab.
I'm using inserthtml for this, but after adding the tab span, the previous format isn't retained.

How can I add the span for tab inside the previous format span? Or in other words, how can I continue the previous format?

any ideas?

You can test it like this:
1- press the custom tab tool button to activate the tab key
2- enter a text and make font size eg. 16px
3- then press tab key on keyboard
4- then enter a new text again

formatting is lost

Example:
Tab on/off | Kendo UI Dojo (telerik.com)

function onTabKeyClicked(e){
    if (isTabOn){ 
        e.preventDefault();
              
        editor.exec("inserthtml", { value: '<span style="white-space:pre;tab-size:0.25in;">&#9;</span>' });
    }
}

thank you in advance

Editor

updated answer on 01 Mar 2023

0 answers

139 views

Displaying remote integer data

Hello,

I ran into an relatively simple issue and I just can not find out how to do it.
I have a Donut Chart which I want to fill with remote data.

function createCharts() {
                var showLabels = $(document).width() > 677;

                $("#overview-chart").kendoChart({
                    theme: "sass",
                    dataSource: {
                        data: [
                            { value: countOrderFinished, type: "New Orders" },
                            { value: 30, type: "Orders in Process" },
                            { value: 180, type: "Finished Orders" },
                        ]
                    },
                    series: [{
                        type: "donut",
                        field: "value",
                        categoryField: "type",
                        startAngle: 70,
                        holeSize: 55
                    }],
                    legend: {
                        position: "bottom"
                    }
                });

                kendo.resize($(".k-grid"));
            }

            $(document).ready(createCharts);
            $(document).bind("kendo:skinChange", createCharts);

            $(window).on("resize", function () {
                kendo.resize($(".k-chart"));
            });

How would I manage to fill my Variable countOrderFinished with remote data? I tried this way, but it did not work:

var countOrderFinished = new kendo.data.DataSource({
                type: "json",
                read: {
                    url: "Services/OrderServices.asmx/GetCountOrderFinished",
                    contentType: 'application/json; charset=utf-8',
                    type: "POST"
                },
            });

I think it is a simple solution but I just cant get it.

Thank you for your Help!

Data Source

asked on 01 Mar 2023

1 answer

183 views

[Solved] Editor table inner border resize event

When a table is resized in the editor using the inner borders, how can I get the event to determine this has happened? I can see that the select event is fired, but I don't know how to determine it was from a resize of the inner borders of a table. I have tried this code:

      select: (e) => {
        if ((e.sender?.columnResizing?._resizable !== null) || (e.sender?.rowResizing?._resizable !== null))
          this.handleEditorTableResizeValueChanged(e.sender.body?.innerHTML);
      }

However, this code does not seem reliable. Sometimes it works and _resizeable is not null, but other times it is null until the next select event as if there is a delay. Can you please provide insight to a reliable way to get this resize event?

Thanks,

Bob

Editor

answered on 01 Mar 2023

0 answers

208 views

Kendo Scheduler - Inconsistent date in navigate event handler

Hi, perhaps this is intended functionality for reasons I'm not understanding, but when navigating within a Kendo Scheduler that has certain view types set (particularly, "week" for my purpose), the date that's received in the "navigate" event handler is inconsistent depending on which direction navigation is performed.

When navigating forward, the e.date value is that of the first day of the currently displayed week, as I would expect. However, when navigating backward, the e.date value is the last day of the displayed week. Is there a reason that the day of week for the event date is not the same regardless of which direction navigation is performed?

The console output of this Dojo exhibits the date discrepancy: https://dojo.telerik.com/eMEtuhAQ/2

Thanks!

Scheduler

asked on 28 Feb 2023

1 answer

160 views

Imported Excel file and Locked Cells

Are locked cells in a imported excel file supported? They don't appear to be.

Also are hidden sheets able to be supported as well?

Spreadsheet

answered on 28 Feb 2023

1 answer

194 views

Access specific detail grid to update model attributes

The following code works when I have one detail grid expanded. If I have multiple grids expanded, it only executes against the first detail grid. I am having trouble figuring out how to determine which grid is selected and execute the below code against that particular detail grid:

if (count === 0) {
	_.each($('.tst-k-grid').data("kendoGrid")._data, function (e) {
		if (e.Status !== 'E') {
			e.Status = 'W';
		}
	});
} else if (count > 1) {
	_.each($('.tst-k-grid').data("kendoGrid")._data, function (e) {
		if (e.Status !== 'E') {
			e.Status = 'X';
		}
	});
}

Grid

answered on 27 Feb 2023

1 answer

154 views

Kendo Report - Rich Text Format

Dear Kendo team,

I'm having an issue with Rich Text Format, I have a blank page at the beginning and end of the report,
also, the grid of content is not showing in a proper way,

I have tried almost everything in report style but came up with no result, any idea of what can cause this and how I can solve it?

PDFViewer

Styling

answered on 27 Feb 2023

10 answers

2.1K+ views

Moving the Category Axis to bottom when negative values are present (MVC)

In the screenshot you'll see that the Category Axis is at the 0 line and the columns go above and below it. How do I put the Category Azix at the bottom of the chart always?

Html.Kendo().Chart<AccountPerformance>(Model.Results)

.Name("chartPCT")

.Title("% Return")

.Legend(legend => legend.Visible(false))

.Series(series =>

series.Column(model => model.Metrics.Return)

.Name(Model.ColumnTitle)

.Labels(false)

)

.ValueAxis(axis => axis.Numeric()

.Labels(labels => labels.Format("{0}%")))

.CategoryAxis(axis => axis