I have a kendo grid with frozen column & inline editing is enabled, first column is frozen and rest all columns are editable and all have checkboxes. the issue is when I edit any row and click edit button of any other row then both rows appear editable.
I only want the current row to be editable.
Without freezing any column it works but if I used locked:true for any column it does not work.
It seems to work as expected here: http://trykendoui.telerik.com/#korchev/aSIp
This is the code I've tried:
<div id="grid" style="width: 400px"></div>
<script>
$("#grid").kendoGrid({
columns:[{
field: "foo",
locked: true,
width: 100
}, { field: "bar", width: 200 },
{ command: "edit", width: 200 }
],
dataSource: {
data: [
{ id:1, foo: "foo1", bar: "bar1" },
{ id:1, foo: "foo2", bar: "bar2" }
],
schema: { model: { id: "id" }}
},
editable: "inline"
})
</script>
Related
I'm trying to add a numeric spinner input box to a column in a Kendo UI grid.
For some reason if I 'add' a record to the dataSource and change the numeric value, then 'add' another row, the value in all the previously added rows gets set to 1?
$("#add-btn").click(function(){
$("#items-grid").data("kendoGrid").dataSource.add({NAME:"Apples",QTY:1})
})
$("#items-grid").kendoGrid({
height: 300,
columns : [
{
field : "NAME",
title : "Name"
},
{
field : "QTY",
title : "Qty",
width: 140 ,
template: "<input class='numeric' value='#: QTY #' style='width:100%'> </input>"
} ],
noRecords: true,
dataSource: [] ,
dataBound: function() {
this.tbody.find(".numeric").each(function(){
$(this).kendoNumericTextBox({decimals: 0});
});
}
});
http://jsfiddle.net/5ow4sj3b/
Please advise
The problem with my Kendo Grid was that I hadn't added a model to the schema to specify the "number" type for the QTY column.
Without this, the inline numericTextBox doesn't behave correctly
dataSource : new kendo.data.DataSource({
data: [],
schema: {
model: {
fields: {
QTY: { type: "number", validation: { required: true, min: 1} }
}
}
}
}),
I want to use 2 or more buttons in one field like Kendo Grid by using custom command in TreeList but I could not do that. Does anyone have a solution?
You just add an array of buttons to the column command property:
$("#treeList").kendoTreeList({
columns: [
{ field: "name" },
{
command: [
{
name: "Cust1",
text: "Custom1",
click: function(e) {
alert("Custom1");
}
},
{
name: "Cust2",
text: "Custom2",
click: function(e) {
alert("Custom2");
}
},
]
}
],
editable: true,
dataSource: dataSource
});
DEMO
I'm trying to write a piece of code that shows the options of a column as checkboxes for the user to filter.
But I wanna do more than that. Let's say for instance that the user checks the "USA" option in the example below, it should show as a result: "USA", "USA1" and "USA2" (a contains filter).
I've found a variety of kendo filters but none of them could be applied to the property "filterable" - "multi:true".
I've tried the code on http://jsfiddle.net/phqs/vfqs917w/ but I couldn't achieve the results I want.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [ {
field: "country",
filterable: {
multi:true,
operators: {
string: {
contains: "Contains"
}
}
}
} ],
filterable: true,
dataSource: [ { country: "BG" }, { country: "USA" },{ country: "USA1" },
{ country: "USA2" }
]
});
</script>
Can someone please help me on this?
I have a requirement in which I have to show two dropdown list in the Filterable cell of kendo grid. These two dropdown lists would filter two different columns in the kendo grid.
One thought I had is having template which would be some kendo container like some panel probably, and then add two dropdowns to that container.
Is this even possible? If yes how to achieve this?
Here is my kendo grid definition.
ctrl.mainGridOptions = {
dataSource: ctrl.gridDataSource,
columns: [
{
title: 'Col1-Col2',
field: 'Col1',
width: 200,
template: kendo.template($("#col1").html()),
filterable: { cell: { template: ctrl.coonetemplate, showOperators: false } }
},
{
field: 'Col3',
width: 150,
title: 'Col3',
template: kendo.template($("#col3").html()),
filterable: { cell: { template: ctrl.colthreeTemplate, showOperators: false } }
}
]
}
Here is a mockup of what I want to achieve.
There are a few different parts to this.
First, if you want to have multiple filter controls for different pieces of data, you should define a column for each one. Then, put a template on the first column to have it display the data for two columns. Use the attributes option to set a colspan=2. Then, use the attributes option on the second columns to set style="display:none".
The second part is getting the dropdowns. I generally prefer to use the values option to accomplish this. The code below uses this for the OrderID column. The other alternative was the approach you were on, which is to use the cell template. The code below uses this on the ShipName column.
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "string" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
},
height: 550,
filterable: {
mode: "row"
},
pageable: true,
columns: [
{
field: "OrderID",
width: 150,
attributes: {
colspan: 2
},
values: [
{text: "10248", value: "one"},
{text:"10249", value: "two"}
],
template: '#:OrderID# (#:ShipName#)',
filterable: {
cell: {
operator: "eq",
showOperators: false
}
}
},
{
attributes: {
style: "display:none"
},
field: "ShipName",
width: 200,
title: "Ship Name",
filterable: {
cell: {
template: function(args) {
args.element.kendoDropDownList({
dataSource: args.dataSource,
dataTextField: "ShipName",
dataValueField: "ShipName",
valuePrimitive: true
});
},
operator: "eq",
showOperators: false
}
}
},
{
field: "Freight",
width: 255,
filterable: false
}]
});
});
</script>
</div>
Runnable Demo
Kendo Grid filterable cell with custom options column wise and by using this solution it also overwrites general filters settings in case specific column requirement. ASP.NET MVC C#.
columns.Bound(c => c.columnName)
.Format("{0}%")
.Filterable(ftb => ftb
.Cell(cell => cell.ShowOperators(true))
.Extra(false)
.Operators(op => op
.ForNumber(fn => fn
.Clear()
.IsEqualTo(CommonResource.GridFilter_IsEqualTo)
)
)
)
.Title("Column Name");
How can I write this in javascript instead of using the MVC Wrapper?
#(Html.Kendo().Grid(Model.List)
.Name("grid")
.Columns(c => {
c.Bound(e => e.ID);
c.Bound(e => e.Nom).HeaderHtmlAttributes(new { colspan = 2 });
c.Bound(e => e.Nb).HeaderHtmlAttributes(new { style= "display:none;" });
})
)
I started with the following code to experiment, I know it is not an exact
match to the attributes mentioned above, but how can I set
HeaderHtmlAttributes and Headertemplate for columns with javascript for the Kendo grid?
$("div#kendogrid").kendoGrid({
dataSource: dataSource,
columns: [
{
field: "ID",
title: "Nr Id",
headerTemplate: "sample template text col 1",
width: 100
},
{
field: "Nom",
headerAttributes: {
"class": "myHeader",
style: "text-align: right"
},
width: 200
}
]
});
You are correct, HeaderHtmlAttributes is specified using columns.headerAttributes and the equivalent to your HeaderTemplate is columns.headerTemplate. See the links for documentation:
http://docs.kendoui.com/api/web/grid#columnsheaderattributes-object
http://docs.kendoui.com/api/web/grid#columnsheadertemplate-string
The translation of your original code would be:
$("#kendogrid").kendoGrid({
dataSource: dataSource,
columns : [
{
field: "ID"
},
{
field : "Nom",
headerAttributes: {
colspan: 2
}
},
{
field : "Nb",
headerAttributes: {
style: "display:none"
}
}
]
});