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
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
function
fillGrid() {
var
grid = $(
"#Grid"
).data(
"kendoGrid"
);
$(
"#ActionError"
).html(
""
);
grid.dataSource.page(1);
grid.dataSource.read();
}
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!
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
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
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?