i want to integrate KENDOUI toolbar toolbar with basic CRUD toolbar operation of KENDOUI grid grid.
I want to have button 'create' in my basic toolbar (first link) that adds new line in my grid(second link).
I don't think you can combine the Kendo ToolBar widget with the built-in grid toolbar but you can completely define the grid's toolbar using a template which can be a Kendo ToolBar that you have complete control over.
http://dojo.telerik.com/#Stephen/OJAbI
In this example I have taken the 2 demos you linked to and added the ToolBar from the ToolBar demo and added it as the toolbar for the Grid using the toolbar.template configuration:
toolbar: [
{
template: '<div id="toolbar"></div>'
}],
Then, the "toolbar" element gets converted to a full ToolBar with
$("#toolbar").kendoToolBar({...});
in which I have added a "Add new record" button and the click handler of the ToolBar is
click: function(e) {
$("#grid").getKendoGrid().addRow();
}
Related
We are using pop up editor in the Kendo Grid control to edit the record.
My kendo grid has the below extra Controls as below.
Kendo dropdownlist
Div control
Add button
Remove button
A dropdown which has list of values that user will select and press the ADD button which is next to it.
then those values will be added to div control dynamically at runtime.
click on update in the editor, My controller updation action is getting fired.
Now i want to remove the items from the div tag using the Remove button. this time my controller update method is not firing.
I suspect that the changes in div is not firing the change event as the div control items dynamically added and removed.
How can i trigger the change event in the Remove button click function in jquery once i removed the div elements.
Please help me on this, trying this since 2 weaks.
I'm using jqGrid jqGrid 4.14.2-pre
How to hide or show buttons depending on the condition
Not using css
loadComplete:function(data)
{
if(data.records > 100)
{
$('#grid').jqGrid('navGrid','#pager');
// hide $('#grid').jqGrid('inlineNav','#pager'); ?
}
else
{
$('#grid').jqGrid('inlineNav','#pager');
// hide $('#grid').jqGrid('navGrid','#pager'); ?
}
}
I'd recommend you to call both navGrid and inlineNav, but to hide unneeded buttons identifying there by id. You should just know simple rule how the ids will be build. jqGrid uses prefix build on the navigator button ("add_", "edit_", "refresh_", ...) and the grid id ("grid" in your case). See the old answer for more details. The method inlineNav do the same, but the ids of buttons will be build base on another rule: the grid id and the suffix "_iladd" (for Add button), "_iledit" (for Edit button), "_ilsave" (for Save button) and "_ilcancel" (for Cancel button).
Let us you have grid with id="grid". To hide Add button added by navGrid you can use $("#add_grid").hide();. To hide inlineNav Add button you can use $("#grid_iladd").hide();.
I have a Kendo Editor, defined as below:
#(Html.Kendo().Editor()
.Name("RestrictionsEditor")
.Tag("div")
.Tools(tools => tools
.Clear()
.Bold().Italic().Underline().Strikethrough()
.JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
.CreateLink().Unlink()
.InsertImage()
.TableEditing()
.FontColor().BackColor()
)
.Value(#<text> This is the Kendo Editor and it has
some anchor tags pointing to external webistes.</text>)
When I click inside the editor, The top toolbar for font formatting is not showing. I want to show the top toolbar when user clicks inside the editor and then hide the toolbar when user clicks outside the editor. Please help!
Thanks!
To show hide the toolbar you first need to set the toolbar to hidden by default, then implement the select and blur events to show and hide the toolbar.
Here is a fiddle that implements this in JavaScript.
For your MVC implementation you will need to add script tags to you page and attached the events after the editor is initialized.
Something like this.
<script>
$(document).ready(function () {
//hide toolbar by default
$("#RestrictionsEditor").closest(".k-editor").find(".k-editor-toolbar").hide();
//bind the select event
$("#RestrictionsEditor").data("kendoEditor").bind("select", function(e){
//show toolbar on selection
$("#RestrictionsEditor").closest(".k-editor").find(".k-editor-toolbar").show();
});
//bind the blur event
$("#RestrictionsEditor").on("blur", function(e){
//hide toolbar
$("#RestrictionsEditor").closest(".k-editor").find(".k-editor-toolbar").hide();
});
});
</script>
Hide and show Add and Cancel button programmatically in JQGrid
You can make Add and Cancel button hidden of visible in the same way like any other elements on the HTML page. You can use jQuery.show, jQuery.hide or jQuery.css with "display", "none" or "display", "" parameters. Thus the only thing which you need is to get DOM elements which represent the buttons. You can get the elements by id for example.
jqGrid assigns ids to all standard buttons. The ids of buttons added by inlineNav will be build from grid id as prefix and strings "_iladd" (for Add button), "_iledit" (for Edit button), "_ilsave" (for Save button) and "_ilcancel" (for Cancel button). So if you have the grid with id="mygrid" then $("#mygrid_iladd").hide() can be used to hide the Add button and $("#mygrid_ilcancel").hide() to hide the Cancel button. To hide both buttons you can use $("#mygrid_iladd,#mygrid_ilcancel").hide().
I have a kendo grid and kendo treeview; the kendo grid data is bound to a database and the treeview is currently empty. How can I drag a single column single value from the grid to treeview? Could someone provide some suggestions or examples on how can I do this?
You can use kendo draggable, here is the overview :
LINK
To summary them up
make your grid as kendo draggable,
make your treeview droppable target,
on the drop function of the droppable target, do the logic to remove item from grid, then add it to treeview
HERE some raw example
kendo dojo (grid to treeview)
kendo dojo (listview to treeview)