I am using kendo grid and its build-in functionality for creating and updating items.
I'm looking for a way to change Editor labels (title and buttons Update/Cancel).
I found an answer here (Change Button text in Kendo Ui Grid Popup Window) where OnaBei explains how to change title.
However, I still cannot figure out the way to change button names based on whether item is being added or being edited. The same with title, is it a way to change it based on "create"/"update" state?
I assume that it can be done with javascript, but it will probably be a hack and dirty solution.
This can be done in the edit event of the grid. The model event argument has a isNew method which will return true in "create" state. Here is some sample code:
edit: function(e) {
var title = "Edit mode";
if (e.model.isNew()) {
title = "Insert mode";
}
var wnd = e.container.data("kendoWindow");
wnd.title(title);
}
And a live demo: http://jsbin.com/USUpAZUT/1/edit
Related
Does anyone know how to change text of custom button in Kendo UI, when it is defined like:
c.Command(command =>
{command.Custom("custom").Click("Action").Text("Text");
})
in order to after click on that button, the text could change.
thanks in advance for answers.
Using your sample code,
The "custom" parameter is useless/ignored by the parser (leaving nothing means "custom")
the Click("") parameter is the name of a Javascript function that will be executed upon a click
The Text("") parameter is the default text (when Razor is executed/page loads)
c.Command(command =>{command.Custom("custom").Click("Action").Text("Text");})
you'd need a function like:
function Action(e) {
e.target[0].innerText = "Some new text for the button"
}
So I have a grid and the columns have the good ol' column menu on them with the filtering/sorting/excluding of columns and it all works fine.
The fly in the ointment is that I would like to allow the user to rename a column heading and the obvious place in the UI to allow this is in said column menu.
Something like this:
(where the red bit is just another option that I click on and popup a little window to let me type in a new heading)
Is this possible and how would I do it?
I see that menus can be customized and the grid demo shows how to adjust the stuff in the filter popup but I am not sure how I would add this item (I can see how I would programmatically do the rename but just this getting an option onto the menu has me stumped).
You can use the columnMenuInit event. Two possibilities:
$("#grid").kendoGrid({
dataSource: dataSource,
columnMenu: true,
columnMenuInit: function (e) {
var menu = e.container.find(".k-menu").data("kendoMenu");
var field = e.field;
// Option 1: use the kendoMenu API ...
menu.append({
text: "Rename"
});
// Option 2: or create custom html and append manually ..
var itemHtml = '<li id="my-id" class="k-item k-state-default" role="menuitem">' +
'<span class="k-link"><b>Manual entry</b></span></li>';
$(e.container).find("ul").append(itemHtml);
// add an event handler
menu.bind("select", function (e) {
var menuText = $(e.item).text();
if (menuText == "Rename") {
console.log("Rename for", field);
} else if (menuText === "Manual entry") {
console.log("Manual entry for", field);
}
});
}
})
See fiddle with two alternatives:
http://jsfiddle.net/lhoeppner/jJnQF/
I guess that the point of a filter is to filter, not to make changes on the grid.
But anyways i found this Kendo Post that may help you to achieve what you need.
You can also take a look a this one too.
I am using kendo ui grid to display data. I want to set title for the grid.Is there any way to set it.
Also I want to set some additional/custom property for grid which will help to identify the grid uniquely. Any custom property I can set to grid so I can get its value when required.
So in case if there are more instances on grid this will help.
Please suggest on this.
Iterating through all your tables can be done using:
$.each($(".k-grid"), function (idx, grid) {
// Do whatever you want to do with "grid"
...
});
If you want to add a title, might be something like:
$.each($(".k-grid"), function (idx, grid) {
$(grid).data("kendoGrid").wrapper.prepend('<div class="k-grid-header"><table><thead><tr><th class="k-header">Title</th></tr></thead></table></div>');
});
For setting a click event to the HTML img elements, you can do:
$("tr", ".k-grid").on("click", "img:first", function () {
// Here "this" is the "img" on which you clicked, finding the grid is:
var grid = $(this).closest(".k-grid").data("kendoGrid");
console.log("grid", grid);
// If you want to access the "id"
console.log("id", grid.element.attr("id"));
});
Once you click on the first image of each row what I do in the event handler is finding the closest HTML element with k-grid class (the grid): this is the HTML containing the grid.
If you want to get Kendo UI grid element the you need to use data("kendoGrid").
Simple and elegant.
In this JSFiddle: http://jsfiddle.net/OnaBai/2qpT3/2/, if you click on "Add Titles" button you add a title to each table and if you click on "Add Handlers" and then in an image, you will get an alert with the id of the table that the image belongs to.
EDIT: If you want to iterate on every image that is in the first column, of every KendoUI grid on your document, you should do:
$.each($("td:first > img", ".k-grid table tbody > tr"), function (idx, elem) {
// "elem" is the image
console.log(idx, elem);
// associate event
$(elem).on("click", fnHandler);
});
I prefer to change the title like this:
$("#grid th[data-field=Field]").html("Title");
I use jqgrid.I want use label in navgrid and dynamic change label text.
I can add button by navButtonAdd.
how to add label in navgrid?
Use the caption property of jqGrid navGrid. As given in the Wiki you can see that for existing navGrid buttons you can use the property addCaption/editCaption in case of Edit and caption in case of others to set the label.
As
caption: "Delete",
Since this is a string value you can directly assign a variable dynamically to set the label
If you really need to modify the text of the buttons added by inlineNav or navGrid you have to do this manually because jqGrid has no simplified function for this.
First of all you can use Developer Tools of Internet Explorer (press F12 to start), Firebug or other tools to examine the navigator buttons. You will see something like
The id of every button are constructed from the id of the grid and some button specific suffix. For example the "Edit" button added by inlineNav is "list_iledit" where "list" is the id of the grid and the suffix "_iledit"has the Edit button. To change the texts later you can use the code like
var $div = $("#" + grid[0].id + "_iledit>.ui-pg-div");
var $icon = $div.find(">span.ui-icon");
$div.text("edit"); // new text of the button
$div.append($icon);
$div.parent().attr("title", "my custom edit tooltip"); // new tooltip
You can use something like this:
.navGrid('#pager_list_1', {
//other codes
}).navButtonAdd('#yourpagerId', {
caption: "Del",
url: delUrl,
buttonicon: "ui-icon-trash",
onClickButton: function (response) {}
}
In order to add items to a kendo menu dynamically, here in the forums, the kendo team suggested to use the append method as described in this example to append submenus.
I've done this, now I have the problem of arrows not rendering for nodes. The issue can be seen in this example: http://jsfiddle.net/MMRCf/16/ if you hover on "Item 1" then click on "Sub Item 2", "Sub Item 2" will be populated with a submenu. This submenu lacks arrows for expanding nodes.
Perhaps this is a bug that needs reporting but I cannot post on Kendo menu forum.
Does anyone know how I could get arrow icons to render?
I think the append method is where a fix could be applied:
append: function (item, referenceItem) {
referenceItem = this.element.find(referenceItem);
var inserted = this._insert(item, referenceItem, referenceItem.length ? referenceItem.find("> .k-group, .k-animation-container > .k-group") : null);
each(inserted.items, function (idx) {
inserted.group.append(this);
var contents = inserted.contents[idx];
if (contents) {
$(this).append(contents);
}
updateArrow(this);
});
updateArrow(referenceItem);
updateFirstLast(inserted.group.find(".k-first, .k-last").add(inserted.items));
return this;
},
Actually seems the updateArrow function is broken. I've updated it for the next release, meanwhile you can also update it to get it working, from this:
item.find(".k-icon").remove();
to this:
item.find("> .k-link > .k-icon").remove();