I have a requirement to group a grid by default on a particular column and to not allow the user to remove the grouping on that column. Is this possible?
You can set an initial grouping when you create the grid. You can keep the users from being able to remove or change the grouping by setting the groupable property to false or simply not including it in the configuration.
Both of the examples below group the grid based on FirstName.
Razor HTML Example:
#(Html.Kendo().Grid(Model.Person)
.Name("grid")
.Columns(columns =>
{
columns.Bound(model => model.FirstName);
columns.Bound(item => item.LastName);
})
.Groupable(g => g.Enabled(false))
.DataSource(dataSource => dataSource
.Server()
.Group(groups => groups.Add(p => p.FirstName))
)
JavaScript Example:
$("#grid").kendoGrid({
dataSource: {
data: [{FirstName: "FirstName1", LastName: "LastName1"},
{FirstName: "FirstName1", LastName: "LastName2"},
{FirstName: "FirstName3", LastName: "LastName3"},
{FirstName: "FirstName1", LastName: "LastName4"}],
group: { field: "FirstName" } // set grouping for the dataSource
},
groupable: false, // this will remove the group bar
sortable: true,
columns: ["FirstName","LastName"]
});
Link to a fiddle for the JavaScript example.
Source of the JavaScript example
Related
I just want a custom text on the kendo dropdown list. But i have searched on internet and didn't get any solution. So, please any body help me here.
Here is my code:
$("#dropdownlist").kendoDropDownList({
//headerTemplate: 'Filter by Name',
dataSource: {
data: [
'Filter by Name',
'Abcd',
'Xyz',
'Pqrs',
'Mno'
]
}
});
I believe you are looking for 'optionLabel' which shows text for the default empty item. For example:
$("#dropdownlist").kendoDropDownList({
//headerTemplate: 'Filter by Name',
dataSource: {
data: [
'Filter by Name',
'Abcd',
'Xyz',
'Pqrs',
'Mno'
]
},
optionLabel: "Select an item..."
});
More details here: http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#configuration-optionLabel
What is the correct way to bind custom buttons (class glyphicons) to Kendo columns / toolbars?
.ToolBar(tb =>
{
tb.Template("<button type=button id=gridTrainerAdd><span class='glyphicon glyphicon-plus-sign'></span></button>");
})
works but icon looks quite differen than expected (probalby nested css problem).
How do I use buttons in columns? During researches I only found quite different solutions for client side grids...
What would this (compare columns button "View details") be in server side (fluent) notation?:
$(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
pageSize: 20,
data: createRandomData(50)
},
sortable: true,
columnMenu: true,
pageable: true,
height: 430,
columns: [
{ field: "FirstName", title: "First Name", width: "140px" },
{ field: "LastName", title: "Last Name", width: "140px" },
{ field: "Title" },
{ command: {
text: " View Details",
click: showDetails,
className: "fa fa-map-marker"
},
title: " ",
width: "140px"
}],
dataBound: function (e) {
e.sender.tbody.find(".k-button.fa").each(function(idx, element){
$(element).removeClass("fa fa-map-marker").find("span").addClass("fa fa-map-marker");
});
}
}).data("kendoGrid");
I'd expect somthing like:
columns.Command(com => com.Custom());
Try adding k-button and k-button-icontext classes to your button. It will give the button the kendo theme styling.
tb.Template("<div class='toolbar'><a class='k-button k-button-icontext k-grid-add' href=''><span class='glyphicon glyphicon-plus-sign'></span>add</a></div>");
Update:
You can add custom css to the button in MVC with the HtmlAttributes method.
columns.Command(command =>
{
command.Edit();
command.Destroy();
command.Custom("Copy").Click("CopyPOLine").HtmlAttributes(new { #class = "k-copy-icon"});
}).Width(175);
Update2:
Also you should check out the custom command demo on the kendo ui website. Here is part of the example copied below.
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
.Name("Grid")
.Columns(columns => {
columns.Bound(e => e.FirstName).Width(140);
columns.Bound(e => e.LastName).Width(140);
columns.Bound(e => e.Title);
columns.Command(command => command.Custom("ViewDetails").Click("showDetails")).Width(180);
})
.HtmlAttributes(new { style = "height: 400px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("CustomCommand_Read", "Grid"))
)
)
<script type="text/javascript">
var detailsTemplate = kendo.template($("#template").html());
function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var wnd = $("#Details").data("kendoWindow");
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
}
</script>
I try to create dropdown into kendo grid edit popup tempate.but i unable to get value of dropdown into popup tempate.how to get it using kendo grid popup?
kendo field detail is describe below
{ field: "PaymentMode", title: "Payment Mode", width: 150, editor: paymentModeDropDownEditor, template: "#:AvailablePaymentMode#", hidden: true },
At Edit Event code is written below
edit: function (e) {
var formTypeData = new kendo.data.DataSource({
data: [
{ Text: "Cheque", Value: "0" },
{ Text: "Cash", Value: "1" },
]
});
function paymentModeDropDownEditor(container, options) {
$('<input required data-text-field="Text" id="paymentMode" data-value-field="Value" data-bind="value:PaymentMode"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: true,
dataSource: formTypeData,
change: onChange,
});
}
function onChange(e) {
var dataItem = this.dataItem(e.item);
if (dataItem.Text == "Cash") {
$("input[name='ChequeReferenceNo']").hide();
$("label[for='ChequeReferenceNo']").hide();
$("input[name='BankName']").hide();
$("label[for='BankName']").hide();
}
else {
$("input[name='ChequeReferenceNo']").show();
$("label[for='ChequeReferenceNo']").show();
$("input[name='BankName']").show();
$("label[for='BankName']").show();
}
};
Kendo grid popup template script is written below
<script id="InvoiceUpdatePopup_editor" type="text/x-kendo-template">
<input name="paymentMode" data-bind="value:AvailablePaymentMode" data-value-field="value" data-text-field="text" data-role="dropdownlist" />
<script>
I know its not as per your query but have implemented using editable template as below:
Grid --
Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("PopupEditView"))
Grid Model :-
.Model(model =>
{
model.Id(p => p.ID);
model.Field(p => p.Role).DefaultValue(ViewData["defaultCategory"] as UserRole);
}
PopupEditView-
#(Html.Kendo().DropDownListFor(model => model.Role)
.DataValueField("Id")
.DataTextField("RoleName")
.SelectedIndex(Model.Role.Id)
//.Value(Model.Role.RoleName)
//.Events(e => e.("onDataBound"))
.BindTo(ViewData["Category"] as IEnumerable<UserRole>)
.HtmlAttributes(new { style = "width: 280px;" })
)
Controller--
ViewData["Category"] = list;
ViewData["defaultCategory"] = list.FirstOrDefault();
let me know how it worked for you.
I am working on HTML5 and javascript.
Is it possible to add data and button in the same column in kendo grid.
Need help.
Also in view page, you can use ClientTemplate to achieve this:
#(Html.Kendo().Grid<ViewModel>().Name("grid")
.DataSource(src => src.Ajax().PageSize(10).Read(read => read.Action("Action", "Controller"))
.Columns(col =>
{
col.Bound(e => e.Name).ClientTemplate("<input type='button' value='CLICK' onclick='XYZ();'><label>#= (Name== null) ? ' ' : Name #</label>");
})
.Selectable()
.Scrollable()
)
Yes, it is! Simply use a template for it. Example:
Define the following template:
<script id="template" type="kendoui/template">
<button class="ob-click-me k-button">Click me</button>
<span>#= LastName #</span>
</script>
and the grid as:
var grid = $("#grid").kendoGrid({
dataSource: ds,
...
columns :
[
{ field: "FirstName", width: 90, title: "First Name" },
{
field: "LastName",
width: 200,
title: "Last Name",
template: $("#template").html()
}
]
}).data("kendoGrid");
You can see a running example even defining a handler for the button here: http://jsfiddle.net/OnaBai/qe3tf4tx/
I am working with the Kendo UI Grid. This is my code:
<body>
<div id="myGrid"></div>
<script type="text/javascript">
$(function(){
var rows = [
{name: "name001", id: "001", group: "G1"},
{name: "name002", id: "002", group: "G1"},
{name: "name003", id: "003", group: "G2"},
{name: "name004", id: "004", group: "G2"},
];
var myDataSource =
new kendo.data.DataSource({
data: rows,
pageSize: 3,
});
myDataSource.read();
$("#myGrid").kendoGrid({
dataSource: myDataSource,
columns: [
{field:"name", title:"The Name"},
{field:"id", title:"The Id"},
{field:"group"},
{command:["edit", "destroy"]}
],
scrollable: false,
pageable: true,
sortable: true,
groupable: true,
filterable: true,
editable: "inline"
});
});
</Script>
</body>
But the edit is not working. Opening this grid in a browser gives me a grid that looks as expected with an Edit and a Delete button. I can delete rows with the Delete button. But clicking Edit changes the row into edit mode (with input fields in cells) but changing a value and pressing the Update button does nothing. The row remains in edit mode and the Update button doesn't switch back to "Edit" as it's supposed to.
Can you tell me what's missing? Do I have to configure my datasource somehow?
Yes you missed to configure your Grid's dataSource to know how to update the records. I assume that you want to edit the records only locally (on the client) - without sending them to the server. To actually close the Grid and apply the changes you can use the save event of the Grid and the refresh method.
Here is a jsbin with your case.
If you want to save these changes to the server I suggest you to start with the demos.