I want to add a CSS class to telerik dropdown. Here is my View Code:
#Html.Telerik().DropDownList().Name("ddlSalutationMailing").Items((ddlItem => { ddlItem.Add().Text(" - Select One - "); }))
Purpose:
I have many Telerik dropdownlists in my project, So I would like to set width commonly for all dropdownlists.
Thanks in advance
If Telerik doesn't have a method allowing you to set attributes on the dropdownlist, what I commonly do is look at the underlying HTML, find the CSS classes that Telerik uses to represent the dropdownlist, and override the width values with the values you want. That's worked well for me for what you are describing.
Related
I was trying to use the Kendo Grid UI control.
I am using the binding from Javascript with few template columns.
When the HTML is generated it gets two tables, one for header and one for body. This becomes hard for accessibility, can someone please guide me how do I set to generate only one table with header and data in it.
This issue is caused by setting grid to be scrollable. Scrollable property in Kendo UI for jQuery is true by default so you need to explicitly set it false.
If you are using Kendo UI for ASP.NET MVC then you have to remove GridBuilder's .Scrollable() method call.
Does kendo have any option to set FOOTER template like header ?
My requirement is to show some content in Footer, say that "Type more for refine search"
The Kendo Combobox does not support footers.
http://www.telerik.com/forums/footer-template-in-combobox
The ComboBox widget does not support footerTemplate. As an alternative
solution I suggest putting the checkbox outside of the widget and use
the setOptions method to modify the filter that is used by the widget.
For example:
Firstly, I am doing a research on KendoUI, and my experience is mainly on struts-layout taglib.
And now I got issues on HTML Form while using KendoUI.
My Questions are as below:
Can Kendo ListView be used to replace the html form? That is, there is no Form any more, but a kendo ListView.
If still use html form, how to make each field editable in line (is there any kendo widget to do same behavior as JQuery UI plugin X-editable)?
The closest thing would probably be a Grid that is editable. Clicking on a cell puts it in edit mode: http://demos.telerik.com/kendo-ui/grid/editing
But you could also make a custom Kendo UI widget that behaves basically the same as x-editable by having a clickable element that opens a Kendo Tooltip box with an input element in it.
In a Kendo grid, how to bound the column with auto complete option in MVC web application. Want to display grid product name in autocomplete option. In that option need to bound Product item code and Product Item Name. Have any custom editor in a Kendo grid?
You can find one way on how to do it at How to have an autocomplete field inside kendoUI grid using asp.net mvc wrapper. Basically you will have to create EditorTemplate and reference it from grid.
Hope this helps.
I have a kendo grid using ASP.NET MVC wrappers and has multiple columns (say col 1 and 2). The grid is set to InCell editing mode. Columns 1, 2 need to be able to be edited (or preventing editing) based off the values of each other for a specific row.
For instance, if column 1 value is true then column 2 is allowed to be edited.
if column 2 value is false, then column 2 is not allowed to be edited.
Any ideas?
I found similar example but using client side extensions.
When editing a grid, how do I disable specific fields by row?
Is there a similar way to do it using ASP.Net MVC wrappers?
We just ran across a similar issue and found the following solution. It might not be the right way to do it, but it seems to work for disabling a field when the row is existing and enabling when it is new. This logic should be able to be swapped for any logic you need.
In your Kendo MVC bindings. "disableOnEdit" is the name of a Javascript function to call when the cell goes into edit mode.
#(Html.Kendo().Grid<yourModel>()
.Name("grid")
...
.Events(events => events.Edit("disableOnEdit"))
...
In your JavaScript:
function disableOnEdit(e) {
if (e.model.isNew()) {
// Leave it editable if the row is new.
} else {
// Disable the editor for Element in this row if the row already exists.
var select = e.container.find('input[name=Element]').data('kendoDropDownList');
select.enable(false);
}
}
This approach was borrowed from Kendo Grid Edit Docs
See the other answer mentioned about for different conditions.
Thanks to Chris Finlayson for pairing on this.