If the value binded to a kendo dropdownlist is empty(Count =0) OptionalLabel specified is not displayed instead a blank dropdownlist is displayed
#(Html.Kendo().DropDownList()
.Name("TransactionTypeId")
.BindTo((IEnumerable<KPMG.LER.ViewModel
.General.NameIdPair>)ViewData["TransactionTypes"])
.DataTextField("Name")
.DataValueField("Id")
.OptionLabel("--Select--")
Is there a way to display Optional Label always
You can use javascript control function which is fired with databound event.
if (....) // control if datasource count = 0
$("#TransactionTypeId").data("kendoDropDownList").text(--Select--);
this is not an option label but it looks like option label to users :)
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"
}
I have a Kendo UI grid which uses a dropdown as the editor for a field. I'm having problems getting the dropdown to properly bind to the viewModel (at least I think that is the issue). If I make a selection from the dropdown then add a new row or navigate from the row I am on, the field shows [object Object]. Now if I go back to the row and make a different selection and navigate to a different row, it behaves like it should, showing the selection I made. Here is a js bin showing the behavior.
The problem is SuggestedVendor type is string but when you click Add New Line Item link to add new item you set some default value Id: 1, Position: 1 and SuggestedVendor : null but it should empty string like SuggestedVendor : ''
dataSource.add({ Id: 1, SuggestedVendor: (viewModel.suggestedVendor === null) ? '' /* instead of null*/ : viewModel.suggestedVendor.SuggestedVendor, Position:1 });
Working demo
Note:
You can set your default value during datasource field declaration, for more details demo for custom editing. In this way you don't need manually handle $(".k-grid-custom-create").on("click", function (e) {...})
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
In kendo grid, I have popup editor for user.
in this popup, I have kendo tabstrip contains two kendo Grid in two tabs.
I want to do like this :
+ The first Grid in first tab load dataSource (read) by add parameter UserID of Model User in popup.
.Read(read => read.Action("ReadUserBranch", "User", new { UserIDSys = #Model.IDSys }))
And the second tab is grid "Store" read datasource by parameters list and UserID, How to add array list from First Grid .
Read(read => read.Action("ReadUserStore", "User").Data("DataStore"))
Thanks ALL... help me !
You can view link: http://www.telerik.com/forums/tabstrip-content-inside-edit-template
Download code: KendoPopupEditorWithTabStrip.zip
Can you add nick skype of me ( kaka_nnc ) , We can learning Kendo UI together ...
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");