Questions on Kendo UI for jQuery Forum

1 answer

1.2K+ views

Hi, I would like to update all rows inside one column. Each column would have its own input which will update the rest of the rows. Currently I have an existing edit batch table. I was wondeing if it was possible to:

1. select a column (maybe with checkbox)

2. Row 1 is empty, however will trigger a function

3. This function takes the input value (which the user will type) of row 1 cell and populate this value for every row inside the that column.

COL 1 || COL 2

---------------

row 1 || row 1

---------------

row Z || row Z

After this the user should still be able to activate the cancel button and the original data appears back in the table. The table data should not be saved unless the saved button is pressed.

I've tried a fucntion using a button where we would execute row.set(column, value), however this would refresh the grid table and the original data would reappear.

Grid

answered on 25 Aug 2021

1 answer

279 views

Grid paging with custom api

Hello,
I need to use a prebuild api for load paged data on telerik grid.

For do that in the DataSource.Transport.Ready(options) function I need to retrieve the PageNumber and PageSize value but the options.data.pageSize and options.data.page result undefined

Also when I receive the response I need to set the new loaded page information (loaded page number) to the grid.

The code below works (retrieve and display data) but in the request url the page paramenter are undefined. In the botton page bar restult "NaN - NaN di 47 elementi"

Where I found the structure of the options parameter of the read function ? Also where I found the object expected by the option.success function?

gridSource = new kendo.data.DataSource({
                transport: {
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,
                    pageSize: 50,
                    read: function (options) {
                        console.log(JSON.stringify(options)) // show {"data":{}}
                        let u = "<My URL>?search=" + encodeURIComponent(<SearchValue>) + "&pnum=" + encodeURIComponent(options.data.page) + "&psize=" + encodeURIComponent(options.data.pageSize);
                        const instance = axios.create({
                            baseURL: 'my url',
                            timeout: 1000,
                            headers: { 'Authorization': 'Bearer  Token' }
                        });
                        instance.get(u)
                            .then((response) => {
                                let res = response.Data
                                // res is
                               // {"PageNumber":1,"PageSize":50,"HaveOtherPage":false,"TotalRecord":47,"Data":[...]}

                              // options.success(res)  run the catch function and return an error who is empty
                              
                               options.success(res.Data);
                            })
                            .catch((error) => {
                                alert("ERRORE");
                                options.error(error)
                            })

                    },
                    schema: {
                        data: function (response) {
                            return response.Data; 
                        },
                        total: function (response) {
                            return response.TotalRecord; 
                        }
                    }
                }
            });
            $('#grid').kendoGrid({
                dataSource: gridSource,
                scrollable: true,
                filterable: true,
                pageable: true,
                columns: [....]
            });

Data Source

Grid

answered on 25 Aug 2021

1 answer

874 views

Wizard navigation and validation

Hello!

Kendo Wizard always validates the step forms when navigating between them, even if you press "Previous".

This can be seen in the official sample here:

https://demos.telerik.com/kendo-ui/wizard/index

If you are on Step 2 and press "Previous", you are required to input all data before going back to Step 1.

How can I change this? I want to validate the current step form content only if you press "Next", and allow the user to go back without inserting data if he presses "Previous".

Thanks!

Form

Validation

Wizard

answered on 24 Aug 2021

1 answer

527 views

Chart in HTML (k-options, k-rebind, ...)

Hello,

I found this tutorial how to create chart in HTML with jQuery. In our old system we use HTML notation for chart definition like this:

<div id="chart" kendo-chart="chart" k-options="model.chartOptions" k-rebind="model.chartOptions.series" k-on-series-click="events.click(kendoEvent)" ng-mouseleave="events.hover({})"></div>

In controller (we use AngularJS) the $scope.model variable is set like this:

angular.merge($scope.model, {
    chartInfo: {},
    chartOptions: {
        seriesDefaults: {
            ...
        },
        legend: {
            position: "bottom"
        },
        valueAxis: {
            visible: true,
            labels: {
                template: "#= kendo.toString(value, 'n') #"
            },
            min: null
        },
        chartArea: {
            height: 625
        },
        categoryAxis:{},
        transitions: false,
        series: {
            data: []
        },
    }
});

Series property is filled from HTTP request result:

$scope.model.chartOptions.series = $scope.model.values;

The problem is that this way of filling series and watching them via k-rebind results in enormous delay (about 30 seconds), because we are loading cca 10 000 items into the chart. For some reason when the $apply and $digest functions are run because the series property has changed, there are two copyings of whole data (including the 10-thousand-item array) processed.

I think I cannot do anything about the middle part (chart rendering), but suppose I can get rid of the two copy parts (before and after rendering) which are probably caused by the 'watcher' - k-rebind. I couldn't check this information because I haven't found any documentation about this, all tutorials are for jQuery $('#chart')....

So can I do anything about it? I tried also filling series in jQuery style and refreshing chart after loading data from BE, but without success...

Thanks for any help.

UPDATE

So, I switched to 'really jQuery' way and my testing code now looks like this:

<div id="chart2"></div>

$("#chart2").kendoChart({
        title: { text: "Some title" },
        seriesDefaults: {
            categoryField: "endTimestamp",
            field: "value",
            type: "line"
        },
        valueAxis: {
            visible: true
        },
        categoryAxis: {
            type: "date",
            baseUnit: "minutes",
            baseUnitStep: 15,
        },
        series: [{
            name: "First serie",
            data: [
                {
                    value: 150,
                    startTimestamp: new Date(2021, 8, 1, 0, 0, 0),
                    endTimestamp: new Date(2021, 8, 1, 0, 15, 0)
                },
                {
                    value: 162,
                    startTimestamp: new Date(2021, 8, 1, 0, 15, 0),
                    endTimestamp: new Date(2021, 8, 1, 0, 30, 0)
                }
            ]
        }],
    });

Everything shows fine. But when I try to add another serie into chart

        chart2.options.series.push({
            name: "Second serie",
            data: [
            {
                value: 110,
                startTimestamp: newDate(2021, 8, 1, 0, 0, 0),
                endTimestamp: newDate(2021, 8, 1, 0, 15, 0)
            },
            {
                value: 90,
                startTimestamp: newDate(2021, 8, 1, 0, 15, 0),
                endTimestamp: newDate(2021, 8, 1, 0, 30, 0)
            },
            {
                value: 100,
                startTimestamp: newDate(2021, 8, 1, 0, 30, 0),
                endTimestamp: newDate(2021, 8, 1, 0, 45, 0)
            }]
        });

and refresh the chart (the 'series' array contains two items, as it should)

chart2.refresh();

the 'data' property in both series is suddenly empty and so nothing is shown.

I tried also chart2.redraw(), but this one is useless as it does not show the third value in "Second serie", it shows just 110 and 90. And I really need to add data to series and to show all of them.

I'm now looking at 'dataSource' property of kendo chart, but haven't found any way how to assign multiple series into it (it's not in the tutorial).

Thanks for help!

Charts

updated question on 24 Aug 2021

1 answer

243 views

AutoComplete search method not working

I am using the AutoComplete widget with a minLength of 4. However, if the user clicks a "GO" button I want to force the search to execute before the minLength is reached. The line where search is called executes without errors while debugging but does nothing. I am using remote data with server filtering. It works perfectly once the min length is reached. Here is my code:

<div id="ddPatientSearch" class="dropdown-menu dropdown-menu-left border-dark" aria-labelledby="btnOpenSearch">
    <div class="demo-section k-content" style="width:400px">
        <div class="container-fluid">
            <div class="row">
                <div class="col-10 pl-1 pr-0 text-right">
                    <input id="txtPatientSearch" class="form-control form-control-sm" placeholder="Search patients" />
                </div>
                <div class="col-2 pl-1 pr-0">
                    <button id="btnSearchPatients" type="button">GO</button>
                </div>
            </div>
        </div>
        <div class="demo-hint pl-2 text-dark" style="font-size:12px">Hint: Search by name, subscriber, or MRN</div>
    </div>
</div>

$(function() {
    $("#txtPatientSearch").kendoAutoComplete({
        dataTextField: 'PatName',
        filter: 'contains',
        minLength: 4,
        clearButton: false,
        template: '#= data.PatName # ( #= data.CurrentAge # #= data.Gender # ) <br> Sub. ID: #= data.SubscriberID # <br> MRN: #= data.MRN #',          
        dataSource: {
            serverFiltering: true,
            transport: {
                read: {
                    url: searchUrl,
                    data: function () {
                        return {
                            searchTerm: $('#txtPatientSearch').val(),
                            patientListId: Filters.getSelectedPatientList().value
                        }
                    }
                    
                }
            },
            group: { field: "ResCategory" }
            
        }
    });

    $('#btnSearchPatients').on('click', function () {
        var searchTerm = $('#txtPatientSearch').val();
        $('#txtPatientSearch').data('kendoAutoComplete').search(searchTerm);
    });

    //Keeps the dropdown from closing when the "GO" button is clicked
    $('#ddPatientSearch').click(function (e) {
        e.stopPropagation();
    });
});

AutoComplete

answered on 23 Aug 2021

1 answer

562 views

Kendo Grid Group Header Template Breaks During Layout Editing

This was my original reference for aligning the aggregates in their respective columns in the groupHeaderTemplate.

https://docs.telerik.com/kendo-ui/knowledge-base/grid-align-group-header-with-cells

A requirement is to have the grid have an editable layout, i.e., hide/show columns, be grouped differently, rearrange columns, etc.

By default, the grid is working properly, following the reference above.

But once you do edit the layout (e.g., hiding the tasksCompleted column) of the grid, the groupHeaderTemplate no longer works properly. As is expected because the column or table td's are defined and fixed.

Any ideas on how to properly set up the groupHeaderTemplate is much appreciated.

Here is the updated Kendo UI Dojo link as reference of the issue: https://dojo.telerik.com/IYuGOraj/2

General Discussions

Grid

Templates

answered on 23 Aug 2021

0 answers

317 views

Wrong validation message shown for Combobox when using kendoValidator

I'm trying to get the validation working on my form with kendovalidator

I'm using Telerik ver : 2019.2.619

    $.validator.setDefaults({
        ignore: ""
    });
    $(function () {
        $("#form1").kendoValidator();
    });

this shows validation messages correctly if values are empty eg:

issue is when an incorrect value is entered the message shows:

    <div class="form-group row">
        @Html.LabelFor(model => model.CountryCodeId, htmlAttributes: new { @class = "control-label col-md-2 required" })
        <div class="col-md-10">
            @(Html.Kendo().ComboBoxFor(m => m.CountryCodeId)
                                         .Name("CountryCodeId")
                                        .Placeholder(@Resources.Resources.CountryPlaceholder)
                                        .DataTextField("Description")
                                        .DataValueField("Id")
                                        .Filter("contains")
                                        .Suggest(true)
                                        .DataSource(s => s.Read(r => r.Action("GetCountries", "Customer")).ServerFiltering(false))
                                        .HtmlAttributes(new {  style = "width:300px" })
            )
            @Html.ValidationMessageFor(model => model.CountryCodeId, "", new { @class = "text-danger" })
        </div>
    </div>

        [Required(ErrorMessageResourceType = typeof(Resources.Resources), ErrorMessageResourceName = "CountryValidation")]
        [Display(ResourceType = typeof(Resources.Resources), Name = "Country")]
        public int? CountryCodeId { get; set; }

and if I enter a number the validation seems to pass, which it shouldn't

Validation should pass only if a country is selected from the combobox, entrering a numeric value or any other text which is not on the list should fail validation

How do I get default dataanotation message if an invalid entry is made?

Thanks

ComboBox

Validation

updated question on 23 Aug 2021

1 answer

598 views

kendo template changing html entities when 'render as html' is used

The kendo template function injects the literal " value into the DOM instead of " when the html encoding template format is used. For example:

var template = kendo.template("<div id='box'>#= firstName #</div>");
var data = { firstName: "<b>Todd'\" & " " " </b>" };

results in the following value being inserted into the DOM:

Why are the 3 html entity representations of double quotes translated back to the double quote literal? Is there a way to avoid this? If not, what other html entities behave this way?

http://jsfiddle.net/6fcz2e9j/1/

Templates

answered on 23 Aug 2021

3 answers

4.2K+ views

How to remove "Clear" button

A recent change - probably from here - https://github.com/telerik/kendo-ui-core/issues/1650

Means that all our input boxes now come with what is, for us, an ugly and inappropriate clear button.

Seems especially odd to make it appear on a DropDownList - since all our values are readonly.

Can you advise the best way to remove this feature?

Project wide would be nice.

DropDownList

answered on 23 Aug 2021

2 answers

128 views

Web page load slowly if use many Multicolumn combobox!

Hello

I have some page with a Kendo Ui for JQuery Multicolumnbobox.
At on one page there are around 20 MilticolumnComboboxes and only one large data (around 10000 rows) others have around 5-200 rows ( load data via .json array files)
It takes very long time(maybe 7-15 sec) for the page to load already.

If I off all the Multicolumncomboboxes the page renders fast.

Are there ways to increase the performance with the Jquery Ui MulticolumnComboBoxes?

Thank you

MultiColumnComboBox

updated answer on 21 Aug 2021