My intention is to hide several columns depending on different "steps" in Kendo UIs' Grid. More specifically i want to show 2 columns hidden with {field: "id", hidden: true}, with the "beforeEdit" Event Handler.
$("#grid").kendoGrid({
save:console.log("save"),
cancel:console.log("cancel"),
beforeEdit: console.log("beforeEdit"),
(...some more code...)
dataSource: dataSource
});
According to the Kendo UI Doc(Link) these handlers should trigger on editing, saving or cancelling edits. For testing purposes i make a console.log output within these handlers. But no matter what, the handler seems to fire as soon as i open refresh the page.
I'd appreciate any kind on information why this misfeature occur.
With best regards
Marcel
Ok, my bad. It is friday... i forgot to define a function within the triggers.
save:function(){
console.log("save")
},
Problem solved!
Related
I want to change kendo ui scheduler event color based on a logic. Please find the sample implementation as below.
http://dojo.telerik.com/#lilan123/UPuDE/4
Basically What I want is when I click on create button I want to add events and every event should have a different color. i tried to create the event as below adding color option but it doesn't work in that way.
attendees: '1',
start: new Date("2015/6/8"),
end: new Date("2015/6/8"),
title: "Off Day",
isAllDay: true,
color:'#0055A7'
Thanks
Lilan
I came up with a solution and it solve my issue,
please find the sample from
http://dojo.telerik.com/#lilan123/AJuqa
Regards,
Lilan
Often I need to edit a single record in a database without the need to display the grid at all. I can hide the grid using CSS or jQuery. What I couldn't figure out is to directly go to the edit form from another webpage while hiding the grid.
I know it's kind of defeating the purpose of having a grid, but it's one of those cases where only a single record should be view and modified by the users similar to the Access single record mode. Is it even possible?
In general you can just hide so named "gbox" created over the grid and then call editGridRow method with the options which you like to have. As the result you will have the form which close to what you want. I am sure that you have to make some other small problems, but the first look can be like you want. Moreover you can scroll over the rows during editing.
The demo demonstrate what I mean. It displays the following form
The demo uses the following code
$("#list").jqGrid({
...
loadComplete: function (data) {
$(this).jqGrid("editGridRow", data.rows[0].id, {
modal: true,
overlay: 0, // create no overlay
onClose: function () {
return false; // don't allow to close the form
}
});
}
}).closest(".ui-jqgrid").hide();
This is one of the reasons I like to use my own custom edit forms, instead of the one built into jqGrid. Then you can just open it like you would from the jqGrid handler (with appropriate parameters of course), no grid required.
I am using the kendo UI Web Grid to display some data.
Since I am dealing with a lot of data I have decided to use the grid virtual scrolling feature, which works great.
Now, I need to add a non databound column that will get populated with a checkbox, so that I can check/uncheck a record in the grid for further processing.
I cam able to add the checkbox column by simply using a template :
columns: [
{
field: "",
width:'3%',
title: " ",
hidden: false,
template: "<input type=\"checkbox\" />"
},
The problem that I am running into is that when virtual scrolling is enabled, if I check one of the checkboxes, then scroll the grid, when I go back to the record that was checked, it is not checked anymore.
How can I use virtual scrolling and still keep my checkbox checked ?
Thanks
The rows are always re-created when you pass as many records as your pageSize is. However if you really bind that checkbox to the underlying model, the changes will be persisted and once you are back on the same page you will see the items as checked.
One way to make the checkboxes reflect the changes to the model is like this:
grid.tbody.on('click',':checkbox',function(e){
var row = $(this).closest('tr');
grid.dataItem(row).set('isAdmin',$(this).is(':checked'));
})
Where isAdmin is the name of the field the checkbox is bound to.
Here is live example.
I am using kendo UI tree view widget control and I am not able to use dataBound functionality.
$("#treeview").kendoTreeview({
dataSource: parent,
expanded: true,
dataBound: ondata,
dataTextField: ["Parent", "Child"]
}).data("kendoTreeView");
function ondata() {
alert("databound");
}
But the alert is not showing.
What's wrong with it? Am I missing any thing like script files or something?
I can see it is actually working here: Check the differences with your code.
Kendo treeview dataBound event only trigger if the data source is local.
May be check your datasource (binding).
Comments from telerik
"Basically current behavior is expected as currently the TreeView is
bind to the data on the server side. Please note that the DataBound
event is triggered only after binding data on the client side. "
(http://50.56.19.112/forums/databound-event-doesn't-fire#boLRI66aG2OF1P8AAFTdxQ)
Does jqgrid supports fade in,fade out, I want to make it fade in fade out when the grid display and reload, is there anyone knows how to make it?
you need to hide it's content or the whole grid?, there is no fade in/out in jqgrid but you can use jquery effect function to create this effect
you can set fadeOut in onBeforeRequest, and fadeIn in loadComplete
onBeforeRequest : function(){
// is used for the whole grid
$(this).closest('#gbox_'+this.id).fadeOut('slow');
/*--------- OR ----------*/
//will fade out only the table inside
$(this).fadeOut('slow');
},
loadComplete : function(){
$(this).closest('#gbox_'+this.id).fadeIn('slow');
/*--------- OR ----------*/
$(this).fadeIn('slow');
}
If you're going for a visual effect, Liviu's answer is a good one. If you're trying to block user interaction with the grid while it's loading data, what I like to do on my grids is use the BlockUI plugin http://jquery.malsup.com/block/#element
My pattern is to block the grid before an ajax call, and then unblock it on the ajax call's success method .
If you are wanting to inform your users that the grid is loading...(I'm completely assuming this might be at the core of what you are looking for??)...as an alternative to a fadeIn/fadeOut...
I find that the "grid loading" message is not the greatest way to inform users that the grid is loading. For example, if the grid has many rows, the message may not appear in the view area and the user may be looking at old data in the grid (while it's loading) and not realize it...especially if the server processes the ajax slow or the query is slow for whatever reason. Here's a little something I do:
Add this event to your jqgrid setup:
beforeRequest: function(){
$('#grid tr').addClass('gridLoadingClass');
$('#grid span').css('color','lightgray');
$('#grid a').css('color','lightgray');
},
And add a class like this somewhere in your CSS:
.gridLoadingClass {color:lightgray;}
Your grid's contents will now "gray out" while loading.