Telerik Forums
Kendo UI for Angular Forum
6 answers
2.8K+ views

I am using a kendo grid for user input and for each parameter I have a max and min value. I managed to implement a validation so that the user cannot input a value outside the limits and if a value outside the range is entered there is a text shown “Value must be between <max> and <min>”. This was done via a validation function.

Now to be more flexible with number of decimals, I added a number editor to the input column. After this it is still not possible for the user to enter a value outside the range, which is good, but the text is not showing. Why is this and what can I do to get this text back although I am using a number editor?

 

    this.myDataSource = new kendo.data.DataSource({
        autoSync: true,
        data: [
            { label: "Parameter1",  ref: 89.82, min: 60,    max: 100,   isInput: true },
            { label: "Parameter2",  ref: 9.18,  min: 8,     max: 20,    isInput: false }
        ],
        schema: {
            model: {
                fields: {
                    label: { type: "string", editable: false },
                    ref: {
                        validation: {
                            required: true,
 
                            validateFunction: function (isInput) {
                                return OfflinePredictionController.validateInput("#myGrid", isInput);
                            }
                        }
                    },
                    min: { type: "number", editable: false },
                    max: { type: "number", editable: false },
                    isInput: { type: "boolean", editable: false }
                }
            }
        },
    });
     
 
    $("#myGrid").kendoGrid({
        dataSource: this.myDataSource,
        scrollable: false,
        editable: true,
        columns: [
            {
                field: "label",
                title: "Parameter",
            },
            {
                field: "ref",
                title: "Reference",
                editor: numberEditor,
                width: "140px",
            },
            {
                hidden: true,
                field: "min",
                width: "30px"
            },
            {
                hidden: true,
                field: "max",
                width: "30px"
            },
            {
                hidden: true,
                field: "isInput",
                width: "40px"
            }
        ]
    });
 
 
static validateInput(gridName: string, input: any) {
 
    var minIndex = 0;
    var maxIndex = 0;
    var grid = $(gridName).data("kendoGrid");
 
    for (var columnIndex = 0; columnIndex < grid.columns.length; columnIndex++) {
        if (grid.columns[columnIndex].field == "min") {
            minIndex = columnIndex;
        }
        else if (grid.columns[columnIndex].field == "max") {
            maxIndex = columnIndex;
        }
    }
 
    var reference = $(input).val();
    var min = parseFloat($(input).closest("tr").find("td:eq(" + minIndex + ")").text());
    var max = parseFloat($(input).closest("tr").find("td:eq(" + maxIndex + ")").text());
 
    if ((reference < min) || (reference > max)) {
        input.attr("data-validateFunction-msg", "Value must be between " + min + " and " + max);
        return false;
    }
    return true;         
}

 

function numberEditor(container, options) {
    $('<input name="' + options.field + '"/>').appendTo(container).kendoNumericTextBox({
            format: "{0:n4}",
            decimals: 4,
            step: 0.1,
    });
}

 

 

 

 

 

 

Jim
Top achievements
Rank 1
 answered on 08 Jun 2018
5 answers
1.6K+ views

Hi Team,

I am using Kendo Angular Grid. I have two columns and if I have 20 chars [without space in the text] in the column value, it is not wrapping or showing any tooltip, instead of  three dots are showing {ex: "110..."  }

Refer the screen shot as well. How to resolve this issue?

Note :I dont want to increase the size of the column

 

 

Thanks,

Sankar

Svet
Telerik team
 answered on 08 Jun 2018
3 answers
461 views

Is it possible to conditionally use the default template within a DropDownList while sometimes using a custom template?

I have use-case where for all but one of the items, I want the default template, and then for a single item (with a known value) I want to use a custom template.

Brian Vallelunga
Top achievements
Rank 1
 answered on 06 Jun 2018
3 answers
111 views

Hello, I am having a difficult time adjusting the master-detail grid properties to always show on the page.

I am using a splitter orientation=horizontal (with left and right splitter panes). Within the right splitter pane, I have a master-detail grid which has 22 columns to show.  I ran into a problem where the grid disappeared if the column count was 22 and resolution was set to 100%.  When I started to reduce the resolution to 75%, then the grid was showing OK.

Could you confirm if this is a known issue, so I cant have a master-detail grid with more than 17 columns and a certain resolution set? 

I am not sure if the width size of left splitter pane may cause the issue too? I noticed if I expanded the split bar further to the right, up to a certain point, the master-detail grid would also disappear even with the reduced total column count of 17.

Would you have some guidance of the rules to set width size for splitter panes (left and right) and width size of master-detail grid?

Attached are screenshots of my page.

Thank you for your help.

 

Svet
Telerik team
 answered on 06 Jun 2018
5 answers
374 views

Hi,
I'm trying to create a custom editor template for the scheduler using angularjs. But I'm facing some issues while using ng-model  inside the script tag for editor.

I also tried implement a custom editor using a custom directive in Angularjs but on doing so I was able to get the data first time on the editor and when closing the editor and clicking another event for editing I get the same error and even the editor won't display. Can you guys identify what is causing this error ?

Error I'm getting while using ng-model inside script tag for custom editor
 How can I overcome this?

Dimitar
Telerik team
 answered on 06 Jun 2018
3 answers
1.3K+ views

Hi,

Is it possible to append the Request Header for the OPTIONS Request Method that happens during the Upload Sequence?

I have done the following, however, it does not affect the OPTIONS request.

1.uploadEventHandler(e: UploadEvent) {   
2.    e.headers.set('Access-Control-Request-Headers', 'authorization');
3.    e.headers.append('Authorization', 'Bearer ' + abp.auth.getToken());
4.  }

 

Basically, on the initial request for OPTIONS, I need to append "Access-Control-Request-Headers: authorization"

Thanks!

Background: I'm using another file control currently that is working well, however I am transitioning everything over to Kendo. When I try to replace the control with the Kendo Upload, I get the following. Tech is Angular, ASP.NET CORE (ABP actually)

Failed to load http://localhost:22742/File/UploadFiles: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:4200' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

 

Duncan
Top achievements
Rank 1
 answered on 06 Jun 2018
1 answer
2.1K+ views

I was investigating the Keno-menu to replace some bootstrap menus in my Angular 6 application.  I went through all the demos but did not see that it supports any sort of click event binding.  Do I need to embed an anchor or button in a  ng-template to do this?

Unless I was missing something it seems like a pretty basic thing for a menu item to support.  I would prefer a declarative method in the Html but if there is some sort of menu event handler that I could add to the component backing the menu that would work

example of what I would have expected :

<kendo-menu>

    <kendo-menu-item text="Sign Out" (click)="signOutUser()"></kendo-menu-item>

</kendo-menu>

 

Daniel
Telerik team
 answered on 06 Jun 2018
3 answers
604 views

I have a form where i implemented kendo-dropdownlist with filterable property. sometime popup filter option list remains open in chrome and firefox. And in IE11, it did not open on click.

 

Svet
Telerik team
 answered on 05 Jun 2018
3 answers
245 views

Hello,

            I have angular 5 application with kendo UI 2018.1.117 used in it. I also want to use Jquery UI library in the same application. I realized that Kendo UI  ships the JQuery library with it and can be accessed in angular code as kendo.jQuery variable. But my jQuery UI library is not able to use this jQuery instance. If I add Jquery explicitly using as described here https://medium.com/@swarnakishore/how-to-include-and-use-jquery-in-angular-cli-project-592e0fe63176 then Jquery UI component works fine. But then I can see that there are two Jquery libraries in my application which breaks the rich text editor feature of kendo UI. Can someone help me how I can I make jQuery UI make use of kendo.jQuery object ? 

vinayak
Top achievements
Rank 1
 answered on 04 Jun 2018
1 answer
583 views

Hi Team,

I am using Kendo Angular Gird. I have requirement to display the years in one column. I have as filter option with numeric. 

But this numeric option does not have "Contains" as filter option.

Example : 18 given no results, if I give exact match [2018] returns results.

Is it possible to add contains option here on numeric columns?

 

Thanks,

Sankar

 

 

 

Dimiter Topalov
Telerik team
 answered on 04 Jun 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?