Questions on Kendo UI for jQuery Forum

0 answers

106 views

Telerik Function

Would like to check if the below functions are available in Telerik.

Double click on the header column or row can auto fix the column and row size.
Use arrow keys in keyboard to select formula. Currently only support using mouse to click on the formula.

3. Is there any guide/prompt on how to use formula?

4. "Financial" number format should be similar to Excel i.e. commas every 3 numbers, show bracket for negative value, right alignment
e.g. (1,800,123)

5. Is there any double underline on the cell border? Only have single underline available for now.

6. For the Splitter control, can the size of the button below be adjusted? It is too small from the screen.

Splitter

Spreadsheet

asked on 08 Sep 2022

0 answers

235 views

Diagram Refresh

I have a diagram configured that reads data from an MVC Controller. It displays and works fine. I need to do a long poll and refresh the diagram from the database. I have tried all kinds of things.

Called refresh on the diagram object, called read on the datasource.

What is the proper way to get a Diagram to read the data again and redraw itself.

Diagram

asked on 07 Sep 2022

1 answer

158 views

setOptions on numericTextBox locks spinner

When calling setOptions on the numericTextBox, the spinner locks up if there is a "factor" option set.

https://dojo.telerik.com/OYiYogis

See the above DoJo. Removing the factor seems to fix the issue, but I need the factor so that a user can type in 10 for 10% when the type is percentage but 10 for $10.00 when the type is currency.

NumericTextBox

answered on 07 Sep 2022

2 answers

530 views

[Solved] Filemanagers inbuilt search text box: How to change filtering method to "contains"?

The FileManager has a toolbar with an inbuilt search text box. How can I change the filtering method from the default (seems to be "startswith") to "contains".

Thanks for any advice!

Patrick

FileManager

Toolbar

answered on 07 Sep 2022

1 answer

215 views

Kendo Org Chart Takes Too Time To load

I Have 71 Records in the array list, When I Pass That Array To Kendo Org Chart It Takes Too Time To load

OrgChart

answered on 07 Sep 2022

1 answer

248 views

Kendo tree list - kendo switch

Good afternoon, excuse my English is bad,

I have a kendo treelist in which there is a boolean column with a kendo switch.
The problem is visual when interacting with my tree list the switch is painted several times as shown in the image:
 
this is the code i am using:

{
                    field: "IsModule", title: "@Mui.Is_Module",
                    //width: "70px",
                    editor: checkBoxEditor,
                    headerAttributes: { style: "text-align:center" },
                    attributes: { class: "text-center" },
                    template: "<input class='checkBoxEditor' #if (IsModule) { # checked='checked' # } # type='checkbox' disabled />"
                },

If anyone can give me an idea of what I'm doing wrong, I'd be very grateful.

 dataSource: dataSource,
            excelExport: exportExcel,
            columnMenu: true,
            editable: "inline",
            cancel: function (e) {
                var grid = this;
                var rowUid = e.container.data("uid");
                setTimeout(function () {
                    grid.element.find("tr[data-uid='" + rowUid + "'] .checkBoxEditor").kendoSwitch({
                        messages: {
                            checked: "@Mui.Yes",
                            unchecked: "@Mui.No"
                        }
                    });
                });
            },
            dataBound: function () {
                this.tbody.find(".checkBoxEditor").kendoSwitch({
                    messages: {
                        checked: "@Mui.Yes",
                        unchecked: "@Mui.No"
                    }
                });
            },

function checkBoxEditor(container, options) {
    $('<input type="checkbox" name="' + options.field + '"/>')
        .appendTo(container)
        .kendoSwitch({
            messages: {
                checked: "@Mui.Yes",
                unchecked: "@Mui.No"
            }
        });
}

Grid

Switch

TreeList

answered on 06 Sep 2022

0 answers

1.0K+ views

Data in kendogrid only shown after refreshing the grid manually, for some users

I have a strange problem, that only happens to some users.

The data is not shown for some users, although there is data. It's a really complexed application, so I hope I can give enough information.

function getWorkListItems() {

        setFieldValues();
        options = localStorage["grid-options" + viewStatesFilter];
        var gridSettings = {
            selectable: "multiple row",
            sortable: true,
            filterable: true,
            pageable: {
                refresh: true,
                pageSizes: [10, 20, 50, 100],
                buttonCount: 5
            },
            resizable: true,
            autoBind: !options,
            columns: [
                {
                    field: "EncryptedID",
                    hidden: true
                },
                {
                    field: "RequestHandler",
                    title: "Behandelaar",
                },
                {
                    field: "SpecialCharacteristicsIndicator",
                    title: "Bijzonder kenmerk",
                    filterable: { multi: true }
                },
                {
                    field: "CustomerRequestID",
                    title: "Aanvraag ID",
                },
                {
                    field: "ExternalID",
                    title: "SD nummer"
                },
                {
                    field: "Facility",
                    title: "Vestiging"
                },
                {
                    field: "PostalCode",
                    title: "Postcode",
                    width: '80px'
                },
                {
                    field: "BuildingNumber",
                    title: "Huisnummer",
                    width: '80px'
                },
                {
                    field: "Status",
                    title: "Status"
                },
                {
                    field: "DocumentDateTime",
                    title: "Aanvraag datum",
                    format: "{0: dd-MM-yyyy}"
                },
                {
                    field: "PlannedWeekNumber",
                    title: "Wensweek"
                },
                {
                    field: "TypeOfWork",
                    title: "Dienst"
                },
                {
                    field: "SubTypeOfWork",
                    title: "Subdienst."
                },
                {
                    field: "ConcernsMultipleAddressesIndicator",
                    title: "Meerdere adressen",
                    filterable: { multi: true }
                },
                {
                    field: "IsCombiRequestIndicator",
                    title: "Solo/Combi",
                    filterable: { multi: true }
                }
            ],
            change: function () {
                var row = this.select();
                var id = this.dataItem(row[0]).EncryptedID;
                window.location = 'Bpm/Werkvoorraad/WerkvoorraadDetails.aspx?rowtag=' + id + '&source=' + window.location;
            },
            sortable: {
                allowUnsort: false
            }
        };

        var customFields = [{
            field: "DocumentDateTime",
            filterable: {
                ui: function (element) {
                    element.kendoDatePicker({
                        format: '{0: d-M-yyyy}'
                    });
                    element.attr("readonly", true);
                },
                operators: {
                    string: {
                        eq: "Is gelijk aan",
                        gt: "Is na",
                        lt: "Is voor",
                    }
                }
            },
            format: '{0: d-M-yyyy}',
        }, {
            field: "BuildingNumber",
            sortable: {
                compare: function compare(a, b) {
                    return a.BuildingNumber - b.BuildingNumber;
                }
            }
        }];

        $.each(customFields, function (customFieldIndex, customField) {

            $.each(gridSettings.columns, function (columnIndex, column) {
                if (column.field == customField.field) {
                    if (customField.sortable) {
                        column.sortable = customField.sortable;
                    }
                    if (customField.template) {
                        column.template = customField.template;
                    }
                    if (customField.headerTemplate) {
                        column.headerTemplate = customField.headerTemplate;
                    }
                    if (customField.filterable) {
                        column.filterable = customField.filterable;
                    }
                    if (customField.filter) {
                        column.filter = customField.filter;

                    }
                    if (customField.format) {
                        column.format = customField.format;

                    }
                }
            });
        });

        searchGrid = $("#searchGrid").kendoGrid(gridSettings).data("kendoGrid");        
        searchGrid.thead.find("[data-field=IsSelected]>.k-header-column-menu").remove();
        searchGrid.thead.find("[data-field=ID]>.k-header-column-menu").remove();

        loadData();

    }

function loadData() {
        debugger;
        var url = BpmCore.GetRelativeWebUrl() + "_vti_bin/DeviationService.svc/GetGebruikersVestigingen";
        $.ajax({
            type: "POST",
            url: url,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            beforeSend: null,
            xhrFields: {
                withCredentials: true
            },
            success: function (result) {
                getGebruikersVestigingenSuccessCallback(result);

            },
            error: function (e) {
                getGebruikersVestigingenErrorCallback(e);
            }
        });


    }

function getGebruikersVestigingenSuccessCallback(result) {
        var request = {
            CustomerRequestID: $("#txtAanvraagID").val(),
            States: $("#selStates").val() == null ? states : $("#selStates").val(),
            RequestHandler: $("#txtBehandelaar").val(),
            Street: $("#txtStraat").val(),
            PostalCode: $("#txtPostcode").val(),
            BuildingNumber: $("#txtHuisnummer").val(),
            City: $("#txtPlaats").val(),
            FacilityIDs: result.data[0].Vestiging
        };

        enexis.helpers.storage.setStorage(viewStatesFilter, request, "json");

        var ds = new kendo.data.DataSource({
            transport: {
                read: function read(options) {
                    enexis.services.customerrequests.find(request, function (result) {
                        if (result.Success) {
                        } else {
                            enexis.helpers.forms.showError(result.ErrorMessages);
                        }

                        options.success(result.Items || []);
                        searchGrid.refresh();
                    }, function (result) {
                        options.error(result);
                    });
                }
            },
            schema: {
                model: {
                    fields: {
                        DocumentDateTime: {
                            type: 'date',
                            parse: function (date) {
                                return kendo.parseDate(date, "dd-MM-yyyy");
                            }
                        }
                    }
                }
            },
            pageSize: 20,
            sort: { field: "DocumentDateTime", dir: "asc" }

        });

        searchGrid.setDataSource(ds);
        searchGrid.dataSource.read();
       
        searchGrid.thead.find("[data-field=IsSelected]>.k-header-column-menu").remove();
        searchGrid.thead.find("[data-field=ID]>.k-header-column-menu").remove();
        if (options) {
            searchGrid.setOptions(JSON.parse(options));
        }
    }

At first Id didn't have the line

searchGrid.dataSource.read();

I added this, because sometimes the read function of the grid is not fired (for users who get the data this was working)

When I added that line the read function was fired and the data was collected (through the webapi). I can see that because result.Items countains the items.

I also added the line

searchGrid.refresh();

after

options.success(result.Items || []);

because It is working when I click the refresh button, but that also didn't solve my problem

But nevertheless, the data is not shown in the grid, only when I manually click the refresh button of the grid (then the read function fires again).

It is really strange why it works for some users and for other users it isn't working.

FYI this is build in a SharePoint application,

Data Source

Grid

asked on 06 Sep 2022

1 answer

151 views

Need server-side Upload script used by Spreadsheet Server Import example

Using this example: https://demos.telerik.com/kendo-ui/spreadsheet/server-side-import-export

I can't find the server-side script being run by this config: saveUrl: "/kendo-ui/spreadsheet/upload"

Where can I find this server-side script?

Spreadsheet

Upload

answered on 06 Sep 2022

1 answer

296 views

Customised label for date range picker

How do i change the default start, end labels for daterangepicker?

DateRangePicker

answered on 05 Sep 2022

1 answer

165 views

[Solved] Possible bug with column drag and drop when grid and gantt are in the same page

Hi,

I had to add the grid to part of my gantt page in the app and as soon as I added the grid, gantt drag and drop of columns started to fail.

On column drop lib fails with the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'lockable')
at init._allowDragOverContainers (kendo.all.js:311085:87)
at init._dropTargetAllowed (kendo.all.js:311085:87)
at init.drop (kendo.all.js:311085:87)
at init.trigger (kendo.all.js:311085:87)
at init._trigger (kendo.all.js:311085:87)
at init._drop (kendo.all.js:311085:87)
at kendo.all.js:311085:87
at init._withDropTarget (kendo.all.js:311085:87)
at init._end (kendo.all.js:311085:87)
at init.trigger (kendo.all.js:311085:87)

Problem is reproducible in the following Dojo

To reproduce issue, just try to change the order of the columns in the gantt widget.

Result: Widget breaks on drop and any drag or drop is not possible. Browser console shows error described above.

Expected result: Columns reordered

Tested with Chrome and Firefox.

If there is anything else I can do to help, please let me know.

Gantt

General Discussions

Grid