Telerik Forums
Kendo UI for jQuery Forum
5 answers
220 views

Hello,

I'm totally newbie in TypeScript and in KendoUI :) So I do not know how to explode my problem in the best way. There may be a better approach.

Here, I have a grid with several columns, including two "Result" and "ResultReason" that I would like to make dependent. That is, when a value is selected in the first, the second is automatically (if possible) filtered. My two grids are in two different GridColumn objects.

The ideal would be to filter the columns automatically (cascadeFrom), but is this possible?

If not, how do I read the selected value in the first column, in the second class? Should I call a function on the hand?

-----------Parent grid column-----------------------

export const ResultColumn: kendo.ui.GridColumn = {
    field: "ResultId",
    title: "Result",
    width: 120,
 
    editor: (container, options) => {
        debugger;
        $("<input id=\"ResultColumn\" data-text-field=\"ResultName\" data-value-field=\"ResultName\" data-value-field=\"ResultId\" data-bind=\"value:" + options.field + "\"/>")
            .appendTo(container).kendoComboBox({
                dataSource: new kendo.data.DataSource({
                    serverPaging: false,
                    transport: {
                        read: {
                            url: `${WCFBaseUrl}CustomActivities/ResultsList`,
                            dataType: "jsonp",
                            type: "webapi"
                        }
                    },
                    schema: {
                        data: "Data",
                        total: "Total",
                        errors: "Errors",
                    }
                }),
                dataValueField: "ResultId",
                dataTextField: "ResultName",
                valuePrimitive: true
            }).data("kendoComboBox");
    },
 
};

 

-----------------Child grid column----------------------

import { ResultColumn } from "./result-column";
 
export const ResultReasonColumn: kendo.ui.GridColumn = {
    field: "ResultReasonId",
    title: "Result Reason",
    width: 120,
    editor: (container, options) => {
        debugger;
        $("<input id=\"ResultReasonColumn\" data-text-field=\"ResultReasonName\" data-value-field=\"ResultReasonName\" data-value-field=\"ResultReasonId\" data-bind=\"value:" + options.field + "\"/>")
            .appendTo(container).kendoComboBox({
                cascadeFrom: "ResultColumn", //doesn't work
                dataSource: new kendo.data.DataSource({
                    serverFiltering: true, //doesn't work
                    serverPaging: false,
                    transport: {
                        read: {
                            url: `${WCFBaseUrl}CustomActivities/ResultReasonsList`,
                            dataType: "jsonp",
                            type: "webapi"
                        }
                    },
                    schema: {
                        data: "Data",
                        total: "Total",
                        errors: "Errors",
                    }
                }),
                dataValueField: "ResultReasonId",
                dataTextField: "ResultReasonName",
                valuePrimitive: true
            }).data("kendoComboBox");
    }
}

 

Thank you

Veselin Tsvetanov
Telerik team
 answered on 28 Aug 2017
7 answers
778 views
With Kendo UI and the upload control, can one have the app allow the user to take a picture from their phone's camera and upload it?

Thanks
Keith
Top achievements
Rank 2
Iron
Veteran
 answered on 25 Aug 2017
1 answer
756 views

I have a single page with a tabstrip. The second tab has dual list boxes. 

In the sample dojo example, what additional css or javascript (for resize events) can be added to ensure the height of the list boxes fill the height of the tab strip content space below H2 ?

I've tried some things like height:100% is css but that did not affect the listbox.

The height being rendered appears to be 200px coming from kendo.common.min.css

Thanks,

Richard

 

 

Neli
Telerik team
 answered on 25 Aug 2017
3 answers
1.7K+ views
I am presenting the user with a text box in which they can enter a search term. When the search term changes I call the following script.
function fillGrid() {
    var grid = $("#Grid").data("kendoGrid");
    $("#ActionError").html("");
    grid.dataSource.page(1);
    grid.dataSource.read();
}
Let's say the original search term causes 10 pages to be displayed and that we are viewing page 10. So we are viewing, 190 of 200. And let's say the new search term only produces 100 items, what happens is that the grid is empty and the bottom line indicates we are viewing 190 of 100. Refreshing the grid corrects the problem, but I added the line "grid.dataSource.page(1);" above to do this automatically. But I have observed that this has the side effect of calling the Controller twice. Generally, I used grid.dataSource.read() to refresh the grid. So I am wondering what is the correct way to perform this operation so that I don't make two calls to the database. I guess that every time the grid is changed it updates. Is there a way to turn updating off, make changes to the grid, and then refresh it. 
Preslav
Telerik team
 answered on 25 Aug 2017
1 answer
184 views

Hello,

I have a problem, when using floating point number as smallStep property i get uncorrect values and eventually the button of the slider stops working (does not want to increment or decrement after number)

Here is an example of the problem: Plnkr

Thank  you!

Daniel
Telerik team
 answered on 25 Aug 2017
3 answers
501 views
I need to know a way to find out the selected view in the  and grab that into a javascript object.
Nencho
Telerik team
 answered on 25 Aug 2017
4 answers
769 views

Hello Forum,

  I have a problem with kendo windows in ie 11 if the (in)compatibility mode is enabled.

If the user has enabled this annoying mode (default is on for all intranet pages :(, who has decided this crap?) I show the a dialog with a link to a page, how to deactivate this, because the complete webside is not working correct in this mode.

This worked without problems until I upgraded to Kendo for MVC 2017 R2 SP1.

If I try to create a kendo window in javascript with this code:

var kendoWindow = $("<div />").kendoWindow(
{
    title: headline,
    resizable: false,
    modal: true,
    width: "500px"
});

I get a Javascript exception:

Unhandled exception at line 46, column 7165 in http://localhost:3364/Scripts/kendo/2017.2.621/kendo.all.min.js
0x800a01b6 - Runtimeerror in JavaScript: The Object has no Property or Method "indexOf".

I tried different Demo code from the telerik demo page (also as MVC directive) but got always the same error.

Has anyone else seen this behaviour and found a solution for this? For now I have to switch to a simple javascript alert.

Greetings

  Thomas

Nencho
Telerik team
 answered on 25 Aug 2017
1 answer
93 views

Hi everyone

I am new in Kendo UI, so I have been following the these tutorials on the website of telerik to set up a basic grid.
http://www.telerik.com/kendo-angular-ui/components/grid/
http://www.telerik.com/kendo-angular-ui/components/grid/data-binding/

So the first thing I do clearly is install the nugets of this repositories:

npm install --save @progress/kendo-angular-grid @progress/kendo-angular-dropdowns @progress/kendo-angular-inputs @progress/kendo-angular-dateinputs @progress/kendo-data-query @progress/kendo-angular-intl @progress/kendo-angular-l10n @progress/kendo-drawing @progress/kendo-angular-excel-export @angular/animations

Once I got installed this, my project start to get errors, but anyway I keep adding the imports to the project and the rest of things indicated  in the tutorial, without a good result at the end when I run my project.
Can someone help me to get started? I would appreciate any help and thanks in advance.

The telerik code is in the next routes:

SolucionCore2\Core2.WebApi\ClientApp\app\app.module.shared.ts
SolucionCore2\Core2.WebApi\ClientApp\app\main.ts
SolucionCore2\Core2.WebApi\ClientApp\app\components\fetchdata

You can download the project in this link: Download project

Kind Regards

Dimiter Topalov
Telerik team
 answered on 25 Aug 2017
3 answers
3.3K+ views
Team,

I have a data source with firstname and lastname fields.
But I want my grid to show only fullname (firstname+lastname)

Regards
Prasanna
Stefan
Telerik team
 answered on 25 Aug 2017
4 answers
497 views

I'm using Kendo 2015.1.429 with asp.net mvc, bootstrap.

In the cshtml file: @Html.EditorFor(model => model.shipmentDate)

It shows blank(see attached) value in Chrome v56 and up, this is working fine in IE10, 11.

Here's the ViewModel:
[Display(Name = "Shipment Date")]
[Required(ErrorMessage = "Please select a shipment date")]
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public DateTime shipmentDate { get; set; }

Also, I inspect this element with Chrome's Developer tool and I have this:

<input data-val="true" data-val-date="The field Date must be a date." data-val-required="Please select a date" id="date" name="date" type="date" value="07/13/17" />
<script>
jQuery(function(){jQuery("#date").kendoDatePicker({"format":"MM/dd/yy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});
</script>

The value is passed from the Controller as you can see, but date does not display. Is this a known issue?

How do I fix this annoying issue?

Daniel
Top achievements
Rank 1
 answered on 24 Aug 2017
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?