Kendo Grid - Edit mode when templated column is clicked - kendo-ui

I am using a template for the edit popup. I am trying to force the grid to go into edit mode and show the edit template popup when a link within one of the columns is clicked.
I tried using a command but I am unable to data bind the hyperlink's text to a field declared in the model, in this case to 'CourseType'. Is data binding supported within command columns?
columns: [
{
command: [
{
id: "edit",
title: "School Item",
template: '#=CourseType#',
width: 120
}
]
}
]
If data binding is not supported within a command column, then how do I put the grid into edit mode when the templated field is clicked?
columns: [
{
field: "CourseType",
title: "School Item",
template: '#=CourseType#'
}
]

I'm not sure why do you want to define the cell as an HTML anchor but there is no problem on making it enter on popup edit mode when clicking on the anchor.
1) Add to your template a class that would allow us to find those cells. Something like:
columns: [
{
field: "CourseType",
title: "School Item",
template: '#=CourseType#'
}
]
where I have include class="ob-edit-popup" to the template.
2) add to your grid definition the option editable: "popup".
3) add the following JavaScript code after the initialization.
$(".ob-edit-popup", grid.tbody).on("click", function (e) {
var row = $(this).closest("tr");
grid.editRow(row);
})
Where grid is the result of:
var grid = $("#grid").kendoGrid({...}).data("kendoGrid");

Related

Ckeditor edit input element inline

I have an ckeditor and added an button for inserting textfields
config.toolbar = [
...
{ name: 'forms', items: [ 'TextField' ] },
...
inserting works fine, but for editing i have to doubleclick the input and change the value in the dialog
is it possible to allow to edit the content just within the textfield?

Kendo Grid: get all data from row with checked radio button

I've looked all over for help on this, which should be extremely easy, but I can't find exactly what I need. Here is my jsFiddle, which contains a super basic Kendo grid. I just want to get all data for the row that is currently selected (using a column of radio buttons) when the button is clicked.
http://jsfiddle.net/HTXua/412/
I know that when a row is selected, it is altering a property in the css class. Therefore, the row that I am trying to retrieve is going to have the property:
.detailGridRowSelector:checked
I have managed to implement the first row using checkboxes (instead of radio buttons) and count how many are checked, but I can't access the data for some reason!
var dataSource = {
data: [
{
"first": "Adam",
"last": "Paul"},
{
"first": "Shannon",
"last": "Harris"},
{
"first": "Frank",
"last": "Rolinson"},
]
};
var columns = [
{
template:'<input type="radio" class="detailGridRowSelector" title="Select Lines" name="radioLineSelector" />', width: 20
},
{
field: "first",
title: "First Name",
width: "90px"},
{
field: "last",
title: "Last Name",
width: "90px"},
];
$("#grid1").kendoGrid({
dataSource: dataSource,
columns: columns,
});
$("#getInfoButton").bind("click", function () {
var lineData ="line data would be set here";
//I know the selected row has the property: .detailGridRowSelector:checked
alert(lineData);
});
You should do:
// Get a reference to the grid
var grid = $("#grid1").data("kendoGrid");
// Get checked row by getting the input and then the row containing the input
var row = $("input:checked", grid.tbody).closest("tr");
// Get the item
var item = grid.dataItem(row);
// Format and display item
alert (JSON.stringify(item));
Your JSFiddle modified here: http://jsfiddle.net/OnaBai/HTXua/414/
SOLVED
Turns out I was making this way too hard on myself. I just learned that Kendo has a feature built in that handles this for you, so instead of using a column of radio buttons, I deleted it and implemented the
selectable: 'row'
feature. Then I just got it using
var grid = $("#grid1").data("kendoGrid");
var row = grid.select();
var data = grid.dataItem(row);
alert(data.first);

Kendo UI filter on boolean

Is it possible to have a filter menu with options such as Yes, No, Other
I have a grid with a column which could have only 3 values Yes, No or Other. The filter should show radio buttons with these values and two button Filter and Clear. Is this possible?
When I try with field type:"boolean", I get 'Yes' and 'No but how do I add the third radio button 'Other'.
Any help would be appreciated.
Thanks
Kendo has an example of how to do just that here:
http://demos.telerik.com/kendo-ui/grid/filter-menu-customization
Here is an example of how your filter will probably be set up
filterable: {
//hide second filter option
extra: false,
operators: {
string: {
eq: "Is equal to"
}
}
},
filterMenuInit: function(e) {
//when the filter menu opens find the first dropdown and hide it
//as it has the Is equal to filter in it.
e.container.find(".k-dropdown").eq(0).hide();
}
Here is JSbin that shows how to use some of these features:
http://jsbin.com/qehugexo/2/edit
Update
While I could get radio buttons to show up in the filter window, it was a headache to rig it up and very hacky with the default Kendo stuff. I would suggest using the Kendo Dropdown as show in the demo or just manipulating the filter on the Data source of the Grid itself.
It can be done with code like this:
$(".k-grid").data("kendoGrid").dataSource.filter({filters: [{field: "City", operator: "eq", value: "Boston"}], Logic: "and"})
Here is an example of how you could use it.
filterMenuInit: function(e) {
//when filter menu opens toss it cause its lame!
e.container.html("
<input name='radio' type='radio' checked='checked' value='Clear'>Clear</input>
<input name='radio' type='radio' value='London'>London</input>
<input name='radio' type='radio' value='Seattle'>Seattle</input>
");
$("input[type=radio]").click(function(){
if($(this).val() != "Clear") {
$(".k-grid").data("kendoGrid").dataSource.filter({filters: [{field: "City", operator: "eq", value: $(this).val()}], Logic: "and"})
}else {
$(".k-grid").data("kendoGrid").dataSource.filter({})
}
});
}
And an updated JSbin: http://jsbin.com/qehugexo/3/edit

Kendo Grid -- custom command doesn't fire after popup edit close

I've noticed that my custom Grid command is not working after a popup edit dialog is opened and closed (cancelled).
The command delrow is used to display a custom delete confirmation (I've simplified it in the fiddle to just use a standard JS confirmation).
I've setup a Fiddle that demonstrates the problem.
It works when the grid is initially loaded, but not after a cancelled edit. Not sure if this is a bug or something I'm doing wrong.
Any advice would be much appreciated. Thanks
Is the way you do it. You are binding the click event in the dataBound but when you cancel the edition the row is refreshed and you loose the bind.
You should define the action using click property as:
columns : [
{
command: [
{name: 'edit'},
{name:'delrow', click: delRow}],
title: ' ',
width: 100
},
{ field: "FirstName", width: 90, title: "First Name" },
...
Where delRow is the same code that you have as click event handler:
function delRow(e) {
var row = $(this).parents('tr:first');
var r=confirm("Are you sure you want to delete this row!");
if (r==true)
{
var g = grid.data('kendoGrid');
g.removeRow(row[0]);
}
}
See it in action here : http://jsfiddle.net/OnaBai/XNcmt/56/

Create a blank first column in kendo ui grid

I am new to kendo ui grid development.
I have a requirement where I want to display data in kendo ui grid.
I am able to bind the data to kendo grid using java-script.
This is how I did it.
(document.getElementById(divId)).kendoGrid({
columns: cols,
dataSource: data,
change: onChange,
selectable: "multiple",
//selectable: "multiple cell",
schema: {
model: {
id: "ID"
}
}
}).data("kendoGrid");
The data is displayed in the grid.
Now, I want to create a blank first column in the grid that will display a image. How can I do this. The grid is bound to data dynamically. I have not specified any hard coded columns. All columns are created dynamically.
Please anyone can tell me on this.
You will have to explicitly define the columns because:
You want to add a columns that is not in the model.
The content of the column is an image that is not a KendoUI basic type that can be inferred from the model definition.
Said so, you have to add a column that is something like:
var cols = [
// Your other columns
...
{
title :"Image",
template: "<img src='my_image.gif'/>"
},
// More columns
...
];
In addition you might need to use an image that is not a constant but depending on the content of a column. Then you might do:
var cols = [
// Your other columns
...
{
title: "Status",
template: "# if (status) { # <img src='ok.gif'/> # } else { # <img src='nak.gif'/> # } #"
},
{
title : "Photo",
template: "<img src='#= image #'/>"
}
// More columns
...
];
Where depending on the value of field in your model called status I display the image ok.gif or nak.gif. Or directly use the content of the field image for generating the URL to the image being displayed.
Check here for an overview on KendoUI templates.

Resources