I have an Hierarchical Grid and a problem appears when the first row is expanded before another row:
If I insert any record to any child grid, it record will be inserted for the first row's parent grid (in database too).
My Grid:
@(Html.Kendo().Grid<AvvaWebApi.Models.DataFilterViewModel>()
.Name("grid")
.Columns(columns =>
{
columns
.Bound(c => c.Alias)
.Title("Nome de identificação")
.Width(300);
columns.Bound(c => c.Zone)
.ClientTemplate("# if (typeof Zone !== 'undefined' && Zone !== null) {# #=Zone.Number# #} else {# N/A #} #")
.EditorTemplateName("Zone")
.Title("Zona de Alarme")
.Filterable(false)
.Width(130);
columns
.Bound(c => c.AlarmType)
.ClientTemplate("# if (typeof AlarmType !== 'undefined' && AlarmType !== null) {# #=AlarmType.Text# #} else {# N/A #} #")
.EditorTemplateName("AlarmType")
.Title("Tipo de Alarme")
.Filterable(false);
columns
.Bound(c => c.OutputText)
.Title("Texto de saída");
columns
.Bound(c => c.DigitalOutput).Title("Saída digital")
.EditorTemplateName("Integer")
.Width(110)
.Filterable(false);
columns
.Bound(c => c.TurnOnGiroflex)
.Title("Ligar Giroflex")
.Width(110)
.Filterable(false)
.ClientTemplate("# if(TurnOnGiroflex) { #✔# } else { #—# } #");
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
})
.ToolBar(toolbar =>
{
toolbar.Create();
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Filterable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.Id))
.Model(model => model.Field(p => p.AlarmTypeId).DefaultValue(1))
.Model(model => model.Field(p => p.ZoneId).DefaultValue(1))
.Read(read => read.Action("DataFilters_Read", "DataFiltersGrid"))
.Create(create => create.Action("DataFilters_Create", "DataFiltersGrid"))
.Update(update => update.Action("DataFilters_Update", "DataFiltersGrid"))
.Destroy(destroy => destroy.Action("DataFilters_Destroy", "DataFiltersGrid"))
)
.Events(events => events.DataBound("dataBound"))
.HtmlAttributes(new { style = "height: 533px;" })
.ClientDetailTemplateId("templateConditions"))
The template Grid:
<script id="templateConditions" type="text/kendo-tmpl">
@(Html.Kendo().Grid<AvvaWebApi.Models.ConditionViewModel>()
.Name("gridCondicoes")
.Columns(columns =>
{
columns.Bound(c => c.OrdinalPosition)
.Title("Ordem de precedência")
.EditorTemplateName("Integer")
.Width(100);
columns.Bound(c => c.LogicOperator)
.Title("Operador condicional")
.ClientTemplate("\\# if (typeof LogicOperator !== 'undefined') {\\# \\#=LogicOperator.Text\\# \\#} \\#")
.EditorTemplateName("LogicOperator")
.Width(170);
columns
.Bound(c => c.Analytic)
.Title("Onde aconteceu?")
.ClientTemplate("\\# if (typeof Analytic !== 'undefined') {\\# \\#=Analytic.Alias\\# \\#} \\#")
.EditorTemplateName("CascadedAnalytic");
columns.Bound(c => c.EventType)
.Title("O que aconteceu?")
.ClientTemplate("\\# if (typeof EventType !== 'undefined') {\\# \\#=EventType.Text\\# \\#} \\#")
.EditorTemplateName("EventType")
.Width(250);
columns.Bound(c => c.SecondsSinceLast)
.Title("Segundos depois")
.EditorTemplateName("Integer")
.Width(100);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
})
.ToolBar(toolbar =>
{
toolbar.Create();
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Sort(sort => sort.Add(x => x.OrdinalPosition).Ascending())
.Model(model => model.Id(p => p.Id))
.Model(model => model.Field(p => p.AnalyticId).DefaultValue(1))
.Model(model => model.Field(p => p.LogicOperatorId).DefaultValue(1))
.Model(model => model.Field(p => p.EventTypeId).DefaultValue(1))
.Read(read => read.Action("Conditions_Read", "ConditionsGrid", new { dataFilterId = "#=Id#" }))
.Create(create => create.Action("Conditions_Create", "ConditionsGrid").Data("onCreateCondition"))
.Update(update => update.Action("Conditions_Update", "ConditionsGrid"))
.Destroy(destroy => destroy.Action("Conditions_Destroy", "ConditionsGrid"))
).ToClientTemplate()
)
</script>
Anyone had this problem anytime?
Hi,
I need some help with the aggregate feature please. The sum aggregates are not displayed at the footer of the grid. The correct data is received however.
I Have an MVC backend and use the DatasourceRequest object, but because of the fact I am using angular, I cannot work with the MVC wrappers. Therefore I use the following JS for the grid options:
$scope.gridOptions = {
// 1. DATASOURCE
"dataSource"
: {
"type"
:
'aspnetmvc-ajax'
,
"transport"
: {
"read"
: {
"url"
: myReadUrl() },
"update"
: {
"url"
: myUpdateUrl() },
"create"
: {
"url"
: myCreateUrl() },
},
"serverPaging"
:
true
,
"pageSize"
: 20,
"serverSorting"
:
true
,
"serverFiltering"
:
true
,
"sort"
: {
"field"
:
"Datum"
,
"dir"
:
"desc"
},
"schema"
: {
model: {
"id"
:
"Id"
,
"fields"
: {
"Id"
: {
"type"
:
"number"
},
"Datum"
: {
"type"
:
"date"
, validation: { required:
true
} },
"CountOk"
: {
"type"
:
"number"
,
"validation"
: { required:
true
, min: 0 } },
},
},
"data"
:
"Data"
,
"total"
:
"Total"
,
"errors"
:
"Errors"
,
"aggregates"
:
"AggregateResults"
},
"serverAggregates"
:
true
,
"aggregate"
: [field
:
"CountOk"
, aggregate:
"sum"
},
]
},
// 2. COLUMNS
"columns"
: [
{
"title"
:
"Date"
,
"field"
:
"Datum"
,
"format"
:
"{0:d}"
,
}, {
"title"
:
"OK"
,
"field"
:
"CountOk"
,
"width"
: 100,
"format"
:
"{0:0}"
,
"aggregates"
: [
"sum"
],
}, {
"command"
: [
{
"name"
:
"edit"
,
"buttonType"
:
"ImageAndText"
},
],
}
],
// 3. GRID FEATURES
"editable"
: {
"mode"
:
"inline"
,
"create"
:
true
,
"update"
:
true
,
"destroy"
:
false
},
"toolbar"
: [
{
"name"
:
'create'
,
"buttonType"
:
"ImageAndText"
,
"text"
:
"New"
},
],
"pageable"
:
true
,
"sortable"
:
true
,
"scrollable"
:
true
,
},
};
The received data contains the values, but it seems MVC datasource added some things here:
{
"Data"
:[{
"Id"
:5,
"ItemId"
:4,
"Datum"
:
"\/Date(1447023600000)\/"
,
"CountOk"
:3}],
"Total"
:1,
"AggregateResults"
:[{
"Value"
:3,
"Member"
:
"CountOk"
,
"FormattedValue"
:3,
"ItemCount"
:0,
"Caption"
:
null
,
"FunctionName"
:
"Sum_CountOk_21409671"
,
"AggregateMethodName"
:
"Sum"
}],
"Errors"
:
null
}
Thank you so much for helping me out here!
My upload control works fine for the first file but not the second. The "Select" box still allows me to pick a second file, but no events fire. The files I'm using are very small (a few K) so the first upload is almost instant.
Here is my control:
@(Html.Kendo().Upload()
.Name("invoiceUpload")
.Multiple(true)
.ShowFileList(true)
.HtmlAttributes(new { style = "margin-bottom: 10px;" })
.Async(a => a
.Save("Invoice", "Upload", new { format = @Model.Format })
.AutoUpload(true)
)
.Events(events => events
.Success("onSuccess")
.Select("onSelect")
.Error("error_handler")
.Upload("onUpload")
)
)
The JS events are just alerts to see if anything is happening, they all fire the first time but none for for subsequent file selects.
I know I'm not giving a ton of info, hoping I'm just missing something obvious. Please let me know if you need more info. Thanks in advance to any responders.
I'm having a problem with my grid. The paging is not working when the datasource options are used.
My code is as follows:
@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(c => c.status).Title("Status")
}
)
.Pageable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(30)
.Filter(filters =>
{
filters.Add(status => status.requirementstatus).Contains("2");
}
)
)
)
If I remove dtaousrce completely all the results are returned and the grid pages perfectly. What am I doing wrong?
Hello,
I need to incorporate KnockoutJS to the project I'm creating.
I added KnockoutJS to a TextBox and it works!
Here's the code
01.
@{
02.
var xx = Html.Kendo().TextBox()
03.
.Name(
"name11"
);
04.
05.
Dictionary<
string
,
object
> attrs =
new
Dictionary<
string
,
object
>();
06.
07.
attrs.Add(
"data-bind"
,
"textInput: name"
);
08.
09.
xx.HtmlAttributes(attrs);
10.
xx.Render();
11.
}
But when I try to add KnockoutJS to a ComboBox using the same technique it doesn't work. I've tried using Knockout-Kendo v0.9.5 but it doesn't work too :(
Here's my code:
01.
@{
02.
var aa = Html.Kendo().ComboBox()
03.
.Name(
"comboBox_moneda"
)
04.
.DataValueField(
"ID"
)
05.
.DataTextField(
"Product"
)
06.
.BindTo(@Model.Products)
07.
.Filter(FilterType.StartsWith);
08.
09.
var dic =
new
Dictionary<
string
,
object
>();
10.
11.
dic.Add(
"data-binding"
,
"kendoComboBox: { value: selectedChoice }"
);
12.
13.
aa.HtmlAttributes(dic);
14.
15.
aa.Render();
16.
}
Here's my ViewModel for the two code snippets above
1.
var
viewModel = {
2.
name: ko.observable(),
3.
selectedChoice: ko.observable()
4.
};
5.
6.
ko.applyBindings(viewModel);
How can I fix this?
Thank you,
Mike.
Hello,
I’m trying to use a @helper inside a Telerik Window widget but it doesn’t work as expected. If I use the @helper then it shows the TextBox widget in the main page without opening/showing the Window widget but the labels are shown as expected however if I write the code in the @helper directly in the Window widget then it works as expected. Why this strange behavior?
Here's the code
01.
@helper MakeTextBox1(
string
name,
string
description)
02.
{
03.
<li>
04.
<label
for
=
"@name"
>@description</label>
05.
@{
06.
var x = Html.Kendo().TextBox()
07.
.Name(@name);
08.
09.
x.Render();
10.
}
11.
</li>
12.
}
13.
14.
@(Html.Kendo().Window()
15.
.Name(
"window_CreateProduct"
)
16.
.Title(
"Product"
)
17.
.Content(@<text>
18.
<div style=
"text-align: center;"
>
19.
<form id=
"form"
>
20.
<ul
class
=
"fieldlist"
>
21.
22.
// Doesn't work
23.
@MakeTextBoxNumeric1(
"amount"
,
"Amount"
)
24.
25.
// It works!
26.
<li>
27.
<label
for
=
"numeric_Price"
>Price: </label>
28.
@(Html.Kendo().NumericTextBox()
29.
.Name(
"numeric_Price"
)
30.
)
31.
</li>
32.
</ul>
33.
</form>
34.
35.
</div>
36.
</text>)
37.
.Draggable()
38.
.Visible(
false
)
39.
.Modal(
true
)
40.
.Resizable(x => x.Enabled(
false
))
41.
.Events(x => x.Open(
"onOpen_window"
))
42.
)
Can anyone help me to solve this?
Thank you.
Hi, i'm using a kendo grid for server paging, sorting and filtering and now i would like to add grouping functionality:
I use "function mode" to read data, so dataSource is configured as:
let dataSource: any = {
batch: true,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
serverGrouping: true,
page: 1,
pageSize: 20,
transport:
{
read: function (options)
{
kendo.data.transports["aspnetmvc-ajax"].fn.options.options = { prefix: '' };
let request = kendo.data.transports["aspnetmvc-ajax"].fn.options.parameterMap(options.data, "read", false);
thisObject.httpService.GetNodes(request)
.then(function (args: IHttpServiceParameters)
{
options.success(args.data);
});
}
},
schema:
{
data: function (data)
{
return data.Data;
},
total: function (data)
{
return data.Total;
},
groups: function (data)
{
return data.Data;
},
model: model
}
}
Hi Telerik,
I'm usingASP.NET MVC Grid and I want using Column Template in server side but it's not working with my code:
<
div
id
=
"clientsDb"
>
@(Html.Kendo().Grid<
vw_Products
>()
.Name("grid")
.Columns(columns =>
{
columns.Template(item => "<
img
class
=
'product-photo'
src
=
'" + ImageModel.GetThumbnail(item.Images) + "'
alt
=
'" + item.Title + "'
/></
td
>")
.Width(140).Title("Picture");
columns.Bound(c => c.Title).Title("Product Name").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
columns.Bound(c => c.Price).Title("Price").Width(300).Filterable(ftb => ftb.Cell(cell => cell.Operator("gte")));
})
.HtmlAttributes(new { style = "height: 700px;" })
.Scrollable()
.Groupable()
.Sortable()
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(pageSizes)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(30)
.Read(read => read.Action("Products_Read", "Home"))
)
)
</
div
>
I think my set up is ok but it's not working, the column Template is Empty plz help me. Thanks
columns.Template(item => "<
img
class
=
'product-photo'
src
=
'" + ImageModel.GetThumbnail(item.Images) + "'
alt
=
'" + item.Title + "'
/></
td
>")
Hi,
I'm trying to use the grid component in a huge legacy ASP.NET MVC 5 project. For some reason the Html.Kendo().Grid() helper does not serialize my grid's data if I am using it in this project, but it does serialize the data if I use it in a brandnew ASP.NET MVC project.
I used the same source code in the view for both projects:
@{
var dummy = new List<
DummyModel
>
{
new DummyModel
{
Col1 = "Foo1",
Col2 = "Bar1"
},
new DummyModel
{
Col1 = "Foo2",
Col2 = "Bar2"
}
};
}
@(Html.Kendo().Grid(dummy).Name("MyGrid")
.Columns(col =>
{
col.Bound(c => c.Col1);
col.Bound(c => c.Col2);
}))
In a brand new MVC5 project, this renders the following html / js code blocks:
<
div
class
=
"k-widget k-grid"
id
=
"MyGrid"
>
<
table
>
<
colgroup
>
<
col
/><
col
/>
</
colgroup
><
thead
class
=
"k-grid-header"
>
<
tr
>
<
th
class
=
"k-header"
data-field
=
"Col1"
data-index
=
"0"
data-title
=
"Col1"
scope
=
"col"
>
<
span
class
=
"k-link"
>Col1</
span
></
th
><
th
class
=
"k-header"
data-field
=
"Col2"
data-index
=
"1"
data-title
=
"Col2"
scope
=
"col"
>
<
span
class
=
"k-link"
>Col2</
span
></
th
>
</
tr
>
</
thead
><
tbody
>
<
tr
>
<
td
>Foo1</
td
><
td
>Bar1</
td
>
</
tr
><
tr
class
=
"k-alt"
>
<
td
>Foo2</
td
><
td
>Bar2</
td
>
</
tr
>
</
tbody
>
</
table
>
</
div
>
<
script
>
jQuery(function() {
jQuery("#MyGrid").kendoGrid({
"columns": [{ "title": "Col1", "headerAttributes": { "data-field": "Col1", "data-title": "Col1" }, "field": "Col1", "encoded": true }, { "title": "Col2", "headerAttributes": { "data-field": "Col2", "data-title": "Col2" }, "field": "Col2", "encoded": true }], "scrollable": false, "messages": { "noRecords": "No records available." }, "autoBind": false,
"dataSource": {
"type": (function() {
if (kendo.data.transports['aspnetmvc-server']) {
return 'aspnetmvc-server';
} else {
throw new Error('The kendo.aspnetmvc.min.js script is not included.');
}
})(),
"transport": { "read": { "url": "" }, "prefix": "MyGrid-" },
"serverPaging": true,
"serverSorting": true,
"serverFiltering": true,
"serverGrouping": true,
"serverAggregates": true,
"filter": [],
"schema": { "data": "Data", "total": "Total", "errors": "Errors", "model": { "fields": { "Col1": { "type": "string" }, "Col2": { "type": "string" } } } }
}
});
});
</
script
>
This works fine and the table is displayed correctly.
However, in my legacy project this renders the following html / js code blocks:
<
div
class
=
"k-widget k-grid"
id
=
"MyGrid"
>
<
table
>
<
colgroup
></
colgroup
><
thead
class
=
"k-grid-header"
></
thead
><
tbody
>
<
tr
></
tr
><
tr
class
=
"k-alt"
></
tr
>
</
tbody
>
</
table
>
</
div
>
<
script
>
jQuery(function() {
jQuery("#MyGrid").kendoGrid({
"scrollable": false, "messages": { "noRecords": "Keine Aufzeichnungen zur Verfügung." }, "autoBind": false,
"dataSource": {
"type": (function() {
if (kendo.data.transports['aspnetmvc-server']) {
return 'aspnetmvc-server';
} else {
throw new Error('The kendo.aspnetmvc.min.js script is not included.');
}
})(),
"transport": { "read": { "url": "" }, "prefix": "MyGrid-" },
"serverPaging": true,
"serverSorting": true,
"serverFiltering": true,
"serverGrouping": true,
"serverAggregates": true,
"filter": [],
"schema": { "data": "Data", "total": "Total", "errors": "Errors", "model": { "fields": { "Col1": { "type": "string" }, "Col2": { "type": "string" } } } }
}
});
});
</
script
>
The js code is identical to the brand new MVC 5 project, but the html code is missing the serialized data, which results in the table not being displayed correctly. You can easily see this by the fact that the strings "foo" or "bar" are nowhere in the source code.
I have double-checked that both projects are using the same Kendo.Mvc.dll reference, so that can't be the problem. I've also read the manual twice on how to set up Kendo UI twice and that did not help, so now I am stuck.
Thanks in advance for your help,
Adrian
Hi,
We encountered "internet explorer has stopped working" issue when adding rows to grid. The IE version is 11.
Based on our investigation, the issue seems is due to we are calling the following javascript function after we adding new row to the grid.
Could you provide some pinions on this issue or suggest how to investigate the Internet explorer stop working issue?
function
Reset(id) {
//reset inputs
var
inputs = $(
"#"
+ id +
" input"
);
for
(
var
m = 0; m < inputs.length; m++) {
if
(inputs[m].id !=
""
) {
$(
"#"
+ inputs[m].id).val(
''
);
}
}
//reset kendoNumericTextBox
var
currency = $(
"#"
+ id +
" [data-role=numerictextbox]"
);
for
(
var
m = 0; m < currency.length; m++) {
if
(currency[m].id !=
""
) {
$(
"#"
+ currency[m].id).data(
"kendoNumericTextBox"
).value(
''
);
}
}
//reset kendoDateTimePicker
var
picker = $(
"#"
+ id +
" [data-role=datetimepicker]"
);
for
(
var
m = 0; m < picker.length; m++) {
if
(picker[m].id !=
""
) {
$(
"#"
+ picker[m].id).value(
''
);
$(
"#"
+ picker[m].id).blur();
}
}
//reset kendoDropDownList
var
dropDown = $(
"#"
+ id +
" [data-role=dropdownlist]"
);
for
(
var
m = 0; m < dropDown.length; m++) {
if
(dropDown[m].id !=
""
) {
$(
"#"
+ dropDown[m].id).data(
"kendoDropDownList"
).value(
''
);
}
}
//hidden error message
var
spans = $(
"#"
+ id +
" [class='k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error']"
);
if
(spans.length > 0) {
spans.addClass(
"hidden"
);
}
}