Questions on Kendo UI for jQuery Forum

1 answer

104 views

Bar charts: Issues with label if category contains ampersand (&)

Hi,

I am creating a stacked bar chart with custom labels on the category axis.

If the category includes an ampersand the position of the label will be broken because there is too much space between label and chart axis. This issue does not occur when using the default label.
Encoding the character doesn't help.

Please find a simple reproduction of the issue in my dojo below. I use the latest version of Kendo (2021.2.616)

https://dojo.telerik.com/AloGIgil

Thanks in advance for any help.

Charts

answered on 25 Aug 2021

0 answers

1.0K+ views

How to await response from upload

I have a form that accepts text inputs and a file. The kendo upload component is async so I can take advantage of the drag and drop feature. I want the user to be able to upload multiple files. When the user has finished filling out the form and selecting their files the user clicks a submit form button and the following should happen:

The files are uploaded.
The function waits for a response from the upload.
The saveURL returns a response with an internal fileID and other information.
The response is saved in a local URL.
This is then added to an object containing the rest of the form field's values and a second ajax call is made to upload the entire form's data including the fileID's to a database.

Here is a Dojo I started: https://dojo.telerik.com/@dojolee/EfiXIbeH

Dojo

Upload

asked on 25 Aug 2021

2 answers

393 views

Hide button for show list of MultiColumnCombobox

Hello

I want to hide right button of MultiColumnCombobox(Please see in attach image). It's similar to autocomplete, but uses the property of multi-column of table data.

How to do this?

Thank you

MultiColumnComboBox

updated answer on 25 Aug 2021

1 answer

1.2K+ views

Update all rows inside one column

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

259 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

807 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

501 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

227 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

536 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

294 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