Questions on Kendo UI for jQuery Forum

0 answers

228 views

Kendo UI Grid function create send Duplicate

hello

i don't know why, but my code send a duplicate request to the web API

please help me with this.

jquery code:

<body>
<div id="grid"></div>
</body>

<script>

$(document).ready(function ()
{

var dataSource = new kendo.data.DataSource(
{
autoSync: false,
transport:
{
read:
{
url: '/api/test/GetAllRecords',
dataType: "json"
},
create:
{
url: '/api/test/AddNewRecord',
dataType: "json",
method: "GET"
}
},
schema:
{
data: "results",
model: {
id: "PolicyId",
fields: {
PolicyId: { type: "number", validation: { required: true, min: 1 }},
PolicyName: { validation: { required: true } },
PolicyDeletionPeriod: { type: "number", validation: { required: true, min: 1 } }

}
}
},
pageSize: 100
});

$("#grid").kendoGrid(
{
dataSource: dataSource,
toolbar: [{ name: "create", text: "Create new row" }],
editable: "popup",
columns: [
{ field: "PolicyId", title: "PolicyId" },
{ field: "PolicyName", title: "PolicyName" },
{ field: "PolicyDeletionPeriod", title: "PolicyDeletionPeriod" }
]

});

});
</script>
</body>

blue is my request the second I don't know why happened

Grid

asked on 31 Jul 2021

1 answer

1.1K+ views

How to custom font-size, color, style of validationMessage

Hello,

Please guide me for change font-size , color or style of the invalid message (see at attahc image)

Thank you

Validation

answered on 30 Jul 2021

4 answers

204 views

How to change hover color of table in MultiColumnComboBox list

Hello Support,

I want to custom color of hover in row of list in MultiColumnComboBox. How can I do it?

Thanks.

MultiColumnComboBox

answered on 30 Jul 2021

1 answer

816 views

GRID : Group by column type object

Hi all,

We are trying grouping by column type object , for this, we use this code:

group: function(e) {
    if (e.groups.length) {
        var isNestedGrouped;
        
        e.groups.map(function(x){
            if(x.field == "type"){
                isNestedGrouped = true;
            }
        })
        
        if(isNestedGrouped){
            e.preventDefault()
            var newGroups = [];
            this.dataSource.group().forEach(function(x){
                if(x.field != "type"){
                    newGroups.push(x)
                }
            })
            newGroups.push({field:"type.name"})
            this.dataSource.group(newGroups)
        }   
    }
}

With this code, the grouping work correctly, but the text appears in header group template it's not we need.
In the grid we can see the name of field and his value, but we want see the title of the column.

How we can do it?

Thank you in advance

Grid

answered on 30 Jul 2021

1 answer

182 views

gantt - planned vs actual possible bug

Hi,

I started implementing planned vs actual feature and I have found a possible bug in the feature. It seems that delay part gets calculated in some cases and even if planned and actual start and end dates are exactly the same, delay is calculated and displayed. (1 day delay)

See the screenshot from the dojo:
Steps to reproduce:
- I used dojo out of feature demo and modified it so planned start and end are editable.
- I added new task with duration of one day. Set planned dates to match actual.
- Extended task duration by 2 days by dragging end.
- Changed planned end to match new actual

After this delay remains one day..

I can reproduce this on my local as well, where I have dates set by server.

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

Thank you and best regards,

Vedad

Gantt

answered on 30 Jul 2021

1 answer

1.1K+ views

Pre-loading grid data

I'm trying to fetch a lot of data, which is reaching 100k+ results. The main problem is that the API doesn't work with this many records at once due to simply being more data than allowed in memory by the webserver (for good reasons). What's the proper solution to continue here? I can easily page the data, but I want the filter/sorting client side over the complete result. It basically comes down to having to execute multiple requests to fetch all data and then use the grid with this data.

I noticed several issues if I use a DataSource directly, such as paging will request a new page if the page size changes for example. If I have already fetched the first 20 records, and I change the page size from 10 to 15, it will fetch the 15 records again while it already has those records. On top of that it seems that I can't exactly pre-load the data easily either without manually writing some code to call the API endpoint X times.

I'm suspecting that the solution would be to create an observable array and fill this based on a data source that I query page by page? This way I could for example load the first 100 results and then batch the rest in sets of 10k or 20k?

Are there any examples available? I'm using the jQuery variant.

Edit: I'm still in need of at least a "destroy" call for this grid, could that even work together?

Data Source

Grid

Pager

answered on 30 Jul 2021

1 answer

143 views

jquery UI grid is not working in older versions

I have jQuery and kendo versions set to 2013.3.1119. Kendo Grid shows up but sort, search, selection seems to be breaking. Unfortunately, I cannot upgrade.

there is another way to include grid is using HTML table, can I accomplish using this in older versions !

what can I do with this ?

Thanks

answered on 29 Jul 2021

10 answers

1.7K+ views

kendo incell editable grid column template issues on tab navigation

Hi,

I am using kendo v2018.1.221. I have column template in kendo incell editable grid. On keyboard navigation the template column changes and doesn't persist the template on focusing of the cell. I wanted to keep the column template as it is on navigation event. I couldn't skip the cell since i have some calculations based on the changed value.

I have created the sample in this below url,

https://dojo.telerik.com/AxUyacus

Unit Price column contains the template on load of the screen but it changes to normal input box on navigation event.

Grid

updated answer on 29 Jul 2021

1 answer

627 views

How to validate KendoTimePicker with mask but still allow no date

I have two Kendo Time Pickers on my page. Both are optional but I want to prompt the user to input the value in the format hh:mm am/pm. I want to use the KendoValidator to validate that the values are either empty or contain a valid time. Also, for the second input (end time), a valid time must exist in start time and it cannot come before the start time.

The first issue I am running into is that when using the dateInput: true option to enforce the format it is sending the string "hh:mm am/pm" to the validator as the date when the user enters nothing. Since this is not null it tries to validate it which it of course fails since "hh:mm am/pm" is not a date. This is also causing an issue with validating the required attribute on the startDate.

Another issue would be that this gets passed to the server as the invalid date string which would potentially cause issues on the back end.

Finally, when I do not enter a start date at all it should trigger the required message but it is not.

How can I solve this issue? Here is what my code looks like at the moment:

Initialize Time Pickers:

$.each($(".js-time-picker"), function (index, picker) {
    let id = $(picker).attr("id");
    timePickers[id] = $(`#${id}`).kendoTimePicker({
        dateInput: true,
        format: "h:mm tt",
        parseFormats: "HH:mm",
    }).data("kendoTimePicker");
    timePickers[id]._dateInput.setOptions({
        messages: {
            hour: "hh",
            minute: "mm",
            dayperiod: "am/pm"
        }
    });
});

Validator:

$(document).ready(function () {
    myValidator = $("#myForm").kendoValidator({
        rules: {
            timeValidation: function (input) {
                if ($(input).hasClass("js-time-picker")) {
                    var validDate = kendo.parseDate($(input).val());
                    if (!validDate) {
                        return false;
                    }
                }
                return true;
            }

        },
        messages: {
            required: "Required",
            timeValidation: "Invalid Time"
        },
        validateOnBlur: false
    }).data("kendoValidator");
});

HTML:

            <div class="form-element">
                <label id="startTimeLabel" for="startTime">Start Time</label>
                <input id="startTime" name="startTime" class="js-time-picker" required validationMessage="Invalid time entered" aria-labelledby="startTimeLabel" />
                <span class="k-invalid-msg" data-for="startTime"></span>
            </div>

            <div class="form-element">
                <label id="endTimeLabel" for="endTime">End Time</label>
                <input id="endTime" name="endTime" class="js-time-picker" validationMessage="Invalid time entered" aria-labelledby="endTimeLabel" />
                <span class="k-invalid-msg" data-for="endTime"></span>
            </div>

There is a submit button with an onClick event that calls myValidator.validate();

DateInput

DatePicker

answered on 29 Jul 2021

1 answer

181 views

Scheduler breaks - method slotByElement returns null in some cases when browser zoom is 75-80%

Hi,

We have some additional code on databound of our scheduler, but in reality we simply use slotByElement to retrieve slot and apply additional css class.

During testing, we have discovered issue - when browser is at zoom level of 75 or 80% method slotByElement returns null.. This basically breaks our code and scheduler is not rendered correctly after. (seems that slotByPosition called within slotByElement is broken)

I was able to reproduce issue on the dojo:

https://dojo.telerik.com/iSETiyAW/13

Note message This is null in kendo Console.

We have observed the same behavior in our app.

We used latest Chrome browser for testing.

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

Best regards,

Vedad

Scheduler