Hello,
On my grid's toolbar I have a drop-down list box. Within my grid I have a template column that displays the aggregate of three other columns. When the user selects a value from the drop-down list box I want to filter the grid based on the value that's in the template column. How do I achieve this?
@(Html.Kendo().Grid<Models.GridData>()
.Name(
"Grid"
)
.Columns(columns =>
{
columns.Bound(c => c.ColumnA).Width(110).HeaderHtmlAttributes(
new
{ style =
"text-align: center;"
}).Filterable(
false
);
columns.Bound(c => c.ColumnB).Width(110).HeaderHtmlAttributes(
new
{ style =
"text-align: center;"
}).Filterable(
false
);
columns.Bound(c => c.ColumnC).Width(110).HeaderHtmlAttributes(
new
{ style =
"text-align: center;"
}).Filterable(
false
);
columns.Bound(
""
).ClientTemplate(
"#=calculateField(data)#"
).Title(
"Total"
).HeaderHtmlAttributes(
new
{ style =
"text-align: center;"
}).Width(110).Filterable(
false
);
})
.ToolBar(toolbar =>
{
toolbar.ClientTemplateId(
"GridToolbarTemplate"
);
})
...
Here's the code for "GridToolbarTemplate"
<script id=
"GridToolbarTemplate"
type=
"text/x-kendo-template"
>
<div style=
"float:left;"
>
<button
class
=
"k-button k-grid-add"
>New Item</button>
</div>
<div style=
"float:right;"
>
<label
class
=
"category-label"
for
=
"category"
>Threshold:</label>
@(Html.Kendo().DropDownList()
.Name(
"thresholds"
)
.OptionLabel(
"All"
)
.DataTextField(
"Text"
)
.DataValueField(
"Value"
)
.Events(e => e.Change(
"thresholdChange"
))
.BindTo(
new
List<SelectListItem>()
{
new
SelectListItem() {
Text =
"3"
, Value =
"3"
},
new
SelectListItem() {
Text =
"4"
, Value =
"4"
},
new
SelectListItem() {
Text =
"5"
, Value =
"5"
}
})
.ToClientTemplate()
)
</div>
</script>
The following is my JavaScript for the toolbar and the template column:
function
calculateField(data) {
var
result = data.ColumnA + data.ColumnB + data.ColumnC;
return
result;
}
$(
function
() {
var
grid = $(
"#Grid"
);
grid.find(
".k-grid-toolbar"
).on(
"click"
,
".k-grid-add-row"
,
function
(e) {
e.preventDefault();
grid.data(
"kendoGrid"
).dataSource.read();
});
});
function
thresholdChange() {
var
value =
this
.value(),
grid = $(
"#Grid"
).data(
"kendoGrid"
);
if
(value) {
grid.dataSource.filter({ field:
"Total"
, operator:
"gte"
, value: parseInt(value) });
}
else
{
grid.dataSource.filter({});
}
}
Your help is appreciated. Thanks.
Shawn A.
Can you help me understand this #: EmployeeId # syntax? It seems that is a dynamic value fed in using binding in the TreeList. But, it doesn't seem to work for me:
Your example from demos:
<
script
id
=
"photo-template"
type
=
"text/x-kendo-template"
>
<
div
class
=
'employee-photo'
style
=
'background-image: url(@Url.Content("~/shared/web/treelist/people/#: EmployeeId #.jpg"));'
></
div
>
<
div
class
=
'employee-name'
>#: FirstName #</
div
>
</
script
>
My instance that doesn't work:
<
script
id
=
"icon-template"
type
=
"text/x-kendo-template"
>
<
div
class
=
'group-icon'
style
=
'background-image: url(@Url.Content("~/images/32/#: CurrentType.Name #.png"));'
></
div
>
<
div
class
=
'group-name'
>#: Name #</
div
>
</
script
>
My treelist is bound to a list of Groups. On my Group object I have an Object named CurrentType that has a property on it called Name. I want to base the Icon on the Group.CurrentType.Name. So, for each group type I have a different Icon.
Thanks, Joel
Explain to me how I can work with the Selectable option. I have 2 controls on a page. On the left, I have a TreeList and on the right I have a Grid. The TreeList contains a hierarchical list of groups for which the user is authorized. I'm going to use this group selection to "filter" the data that will be displayed in the Grid control. So, I need the selection of a group in the TreeList to prompt the refresh of the Grid which then must use the groupId of the selected TreeList's node.
An example would be appreciated. Thanks for your help,
Joel
Hello,
I am trying implement controls combo between TreeView and ListBox.
The available actions are Add - from TreeView to ListBox and Remove - only remove from the ListBox.
I am using simple buttons from both actions.
The problems after call ListBox.remove(..) are two:
1) the collection listBox.dataItems() remains the same - i.e. the item is deleted only from UI
2) the underlying select HTML controls remains the same - i.e. the MVC/Kenod validators validates the page even the ListBox seems empty
Here is my remove button handler:
function
removeFromListBox() {
var
listBox = $(
"#myListBox"
).data(
"kendoListBox"
);
var
selected = listBox.select();
// this is an array
listBox.remove(listBox.select());
// Does not deletes the actual data item
console.log(listBox.dataItems());
// listBox.dataItems() is not reduced
}
I've recently started working on a new ASP.NET Core project and one element I've been working on is using a Kendo UI grid with a custom button with a text of "Approve". I'm using the Kendo Bootstrap-v4 style but this seems to be causing issues with the button icons. In my grids the standard edit and delete buttons show with the correct icons but if I set my "Approve" button to have a .IconClass("k-i-check") I actually get the download icon. If I choose the "k-i-edit" .IconClass instead then i seem to get k-i-check. If I choose "k-i-checkmark-outline" I seem to get "k-i-email". Is this something I'm missing or an issue with the latest version of the files I have in place? I'm using "Kendo UI v2019.1.220". This is only on my development machine currently.
Css reference as below:
<
link
rel
=
"stylesheet"
href
=
"~/lib/kendo-ui/styles/kendo.bootstrap-v4.min.css"
/>
Grid column
columns.Command(command => { command.Edit(); command.Custom("Approve").Click("approveUser").IconClass("k-i-checkmark-outline"); }).Width(120);
Thanks in advance for any advice.
Hello,
I have a requirement where the user needs to be given the ability to enter custom text inside a ComboBox if the value is not already there. The ComboBox is bound to a model. I'm not sure what is the best way to accomplish this. Currently, in my controller I check to see if the Id of the entered text is equal to 0, and then I update the model data. I am able to add the new value to the database, afterwards however, I don't know how to refresh/rebind the combobox to show the newly entered data.
Here's my Html-Helper code for the ComboBox:
@(Html.Kendo().ComboBox()
.Name(
"SystemType"
)
.AutoBind(
true
)
.BindTo((System.Collections.IEnumerable)ViewData[
"SystemTypes"
])
.DataTextField(
"SystemTypeName"
)
.DataValueField(
"SystemTypeId"
)
.Filter(FilterType.Contains)
.HtmlAttributes(
new
{ style =
"width: 350px; background-color: white;"
})
.Placeholder(
"..."
)
.ClearButton(
false
))
Here's the code in my Controller to add a new value:
if
(asset.SystemTypeId == 1 || asset.SystemTypeId == 0)
{
string
SystemTypeName = Request.Form[
"SystemType"
];
if
(asset.SystemTypeId == 0 && !
string
.IsNullOrEmpty(SystemTypeName))
{
SystemType systemType =
new
SystemType()
{
ProjectId = Id,
SystemTypeName = SystemTypeName
};
_repository.AddSystemType(systemType);
}
else
{
ModelState.AddModelError(
"SystemTypeId"
,
"System Type is Required"
);
}
}
Any help is greatly appreciated. Thanks.
Shawn A.
For some reason the grid column headers have started to size larger than the default. I just commented out any styles for the grids in this application that I declared overriding the default and the issue remains.
I can use this style to change the background color but the height has no effect :
.k-grid-header .k-header
{
background-color: red;
height:20px;
}
Please see attached.
the telerik asp.net mvc grid has the @item to access the bound item inside a .Template . There seems to be no documentation on what the replacement is for asp.net core grids . How do we accomplish this? Can you give an example of a .Template that uses a value from the data
I've got a grid with InCell editing and I have only the Add and Save buttons in the header. The grid is in an iframe. The trouble I am having is when I click the batch save button the controller action in the Datasource is not getting called.
<
div
>
@(Html.Kendo().Window()
.Name("timecard")
.Modal(true)
.Actions(actions => actions.Close())
.Draggable(false)
.LoadContentFrom("Timecard")
.Events(events => events
.Close("timecard_OnClose")
.Refresh("timecard_OnIframeLoaded")
)
.Iframe(true)
.Width(1700)
.Height(800)
.Visible(false)
.Deferred(true)
)
</
div
>
function timecard_OnIframeLoaded(e)
{
$.ajax({
url: '@Url.Action("Timecard_Load", "Timecard")',
type: "POST",
datatype: "json",
data: { id: employee_key, weekEnding: week_ending},
success: timecard_LoadTimecardSuccess
});
}
<
div
id
=
"employeeTimecard"
>
@(Html.Kendo().Grid<
Timecard.Models.TimecardViewModel
>()
.Name("timecard")
.ToolBar(toolbar =>
{
toolbar.Create().Text("ADD").HtmlAttributes(new { title = "Add employee" });
toolbar.Save().Text("SAVE");
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Columns(columns =>
{
columns.Bound(p => p.Job).Filterable(false).Sortable(false).Width(115).EditorTemplateName("_InCellAutoCompleteEditor").Title("Job");
columns.Bound(p => p.Task).Filterable(false).Sortable(false).Width(50);
columns.Bound(p => p.TaskName).Filterable(false).Sortable(false).Width(150);
columns.Bound(p => p.SubTask).Filterable(false).Sortable(false).Width(75);
columns.Bound(p => p.SubTaskCompDate).Filterable(false).Sortable(false).Width(75);
columns.Bound(p => p.TravelPay).Filterable(false).Sortable(false).Width(75).Title("Travel Pay (Total)");
columns.Bound(p => p.SpecialPayRate).Filterable(false).Sortable(false).Width(75);
columns.Bound(p => p.Comment).Filterable(false).Sortable(false).Width(150);
columns.Bound(p => p.MonST).Filterable(false).Sortable(false).Format("{0:n1}").Title("Mon ST").Width(40);
columns.Bound(p => p.MonOT).Filterable(false).Sortable(false).Width(40);
columns.Bound(p => p.MonDT).Filterable(false).Sortable(false).Width(40);
columns.Bound(p => p.TueST).Filterable(false).Sortable(false).Width(40);
columns.Bound(p => p.TueOT).Filterable(false).Sortable(false).Width(40);
columns.Bound(p => p.TueDT).Filterable(false).Sortable(false).Width(40);
columns.Bound(p => p.WedST).Filterable(false).Sortable(false).Width(40);
columns.Bound(p => p.WedOT).Filterable(false).Sortable(false).Width(40);
columns.Bound(p => p.WedDT).Filterable(false).Sortable(false).Width(40);
columns.Bound(p => p.ThuST).Filterable(false).Sortable(false).Width(40);
columns.Bound(p => p.ThuOT).Filterable(false).Sortable(false).Width(40);
columns.Bound(p => p.ThuDT).Filterable(false).Sortable(false).Width(40);
columns.Bound(p => p.FriST).Filterable(false).Sortable(false).Width(40);
columns.Bound(p => p.FriOT).Filterable(false).Sortable(false).Width(40);
columns.Bound(p => p.FriDT).Filterable(false).Sortable(false).Width(40);
columns.Bound(p => p.SatST).Filterable(false).Sortable(false).Hidden(true).Width(40);
columns.Bound(p => p.SatOT).Filterable(false).Sortable(false).Width(40);
columns.Bound(p => p.SatDT).Filterable(false).Sortable(false).Width(40);
columns.Bound(p => p.SunST).Filterable(false).Sortable(false).Hidden(true).Width(40);
columns.Bound(p => p.SunOT).Filterable(false).Sortable(false).Hidden(true).Width(40);
columns.Bound(p => p.SunDT).Filterable(false).Sortable(false).Width(40);
columns.Command(command =>
{
command.Destroy().HtmlAttributes(new { title = "Delete highlighted employee"});
}).Title("Options").Width(100);
})
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:650px;width:1615px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(100)
.Model(model => model.Id(p => p.EmployeeCode))
.Update(update => update.Action("Timecard_Update", "Timecard"))
)
)
</
div
>