Hi,
I have a Grid with client detail template. The grid has only one column to display and the client detail template is given below
<script id="client-template" type="x-kendo-template">
<div onclick="OnDivClick" class="row">
<div class="col-lg-2 col-md-3 col-sm-12">
<div class="form-group">
<label>First Name</label>
<p>#: FirstName #</p>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-12">
<div class="form-group">
<label>Last Name</label>
<p>#: LastName #</p>
</div>
</div>
<div class="col-lg-1 col-md-3 col-sm-12">
<div class="form-group">
<label>Inhouse</label>
<p>#: Inhouse #</p>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-12">
<div class="form-group">
<label>Company Name</label>
<p>#: CompnayName #</p>
</div>
</div>
<div class="col-lg-1 col-md-3 col-sm-12">
<div class="form-group">
<label>SAN</label>
<p>#: StateAccountNumber #</p>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-12">
<div class="form-group">
<label>Location Number</label>
<p>#: LocationNumber #</p>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-12">
<div class="form-group">
<label>Last Activity Date</label>
<p>#: LastActivityDate #</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-12">
<div class="form-group">
<label>First Name from Payroll</label>
<p>#: ClaimentFirstName #</p>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-12">
<div class="form-group">
<label>Last Name from Payroll</label>
<p>#: ClaimentLastName #</p>
</div>
</div>
<div class="col-lg-8 col-sm-12 col-md-6">
<button class="btn btn-success col-lg-offset-11 col-md-offset-9">Select</button>
</div>
</div>
</script>
I need to select both row and client detail template of the row when we click in the client detail template area or click the button inside the client detail template.
For this I have used the onclick event of the div. But it is not working.
Also I need to get the row data when we click in the client detail template area or click the button inside the client detail template.
Can any one provide the solution for this .
Hello,
I have hierarchical data in DB implemented as closure table. Imagine hundreds of nodes with parent-child relationship. Now I would like to display data, edit nodes, create new nodes, change hierarchy with drag&drop, filter nodes (show only nodes which starts with given word).
TreeList has this CRUD operations ready for use, but I was not able to detect drag&drop event for persisting the change in DB. Yes, its possible to add the button for "save", but I would like to do the change automatically.
So I tried TreeView. TreeView with popup-menu for adding root node, child node, etc. But I have problem with "editing". When I use demo for edit node in separate form, loading child's node stops working.
So, I would like to ask for hint or complex example of CRUD operations in TreeView or maybe to say me, that TreeView is not intended for this operations :)
Thank you
I am using Kendo MVC Treeview.
How can I change font for all parents that has child nodes.
Thank You.
@
using
SGIRO2014.Models;
@model
object
<script type=
"text/javascript"
>
function ChangeDocType(e) {
$(
"#JustNum"
).prop(
"disabled"
, (
this
.value() == @((
short
)documentType.FI)));
}
</script>
@(Html.Kendo().DropDownListFor(m => m)
.HtmlAttributes(
new
{ style =
"width:100px"
})
.ValuePrimitive(
true
)
.OptionLabel(
"-please select-"
)
.BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName(
""
) +
"_Data"
])
.Events(e => e.Change(
"ChangeDocType"
))
)
@Html.Kendo().TextBoxFor(m => m).Name(
"DocNum"
).HtmlAttributes(
new
{ style =
"width:100px"
})
@Html.Kendo().TextBoxFor(m => m).Name(
"JustNum"
).HtmlAttributes(
new
{ style =
"width:40px"
, maxlength =
"2"
})
Thanks in advance
Xavier de la Rubia.
I want to create a view with a layout similar to Outlook or the Team Efficiency page of the Telerik Northwind Dashboard sample app. There will be a ListView of names on the left. When you click on a name, more information about the person will appear in a side panel to the right. So far, so good. On phones and other ​small screens, I need this ​view to function as Outlook does on those devices. Only the ListView should be visible until you click on a name, ​at which time the side panel will be displayed and the ListView will no longer be visible. That's where I need some help.
What's the best way to go about this using Telerik controls? I am using Bootstrap to control the layout, but this is a little different since it is not based just on the size of the screen.
Thanks,
Joel
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.