I am having an mvc kendo CombBox declared as
var comboBox = Html.Kendo().ComboBox()
.Name("Combo")
.Placeholder("Select a val...")
.DataTextField("Description")
.DataValueField("Description")
.AutoBind(false)
.Filter(FilterType.Contains)
.DataSource(source => source
.Read(read => read.Action("XYZ", "ABC").Data("callList"))
.ServerFiltering(true)
)
.HtmlAttributes(new { style = "width:400px" });
Is there any way to have different css for alternative items.
I couldnt find any thing in the kendo documentation. I also tried with JQuery but had failed. Can anyone tell if there is solution for this.
Thanks.
Depending on your browser support (IE9 or higher), you can do this with plain old CSS.
#Combo .k-item:nth-child(odd) {
background-color: #f00;
}
Try this way.
$(document).ready(function () {
$("#States").kendoComboBox();
var cmb = $("#States").data("kendoComboBox");
cmb.ul.find("li:odd").css("background-color", "#C0C0C0");
cmb.ul.find("li:odd").css("background-color", "#FFFFFF");
});
check this kendo dojo http://dojo.telerik.com/ePIQu
I am using Kendo Web not MVC but the result will be same as long as this script runs after the grid is populated.
Related
I don't really know how to achieve my requirement which is:
Allowing users to user sorting/filtering on complete dataset
Server Side intially default filter
So basically I want to set the client filter control to a server side defined value. After page load the user could overwrite this setting and retrieve a list of the complete data set.
I am using following Grid:
#(Html.Kendo().Grid<SubscriptionViewModel>()
.DataSource(dataSource => dataSource
...
.ServerOperation(true)
)
.Name("subscriptionsGrid")
.Columns(columns =>
{
...
columns.Bound(p => p.SubscriptionValidStatus).Filterable(filterable=>filterable.UI("subscriptionStatusFilter")).HeaderHtmlAttributes(new { style = "white-space: normal; vertical-align: top" });
....
})
.Scrollable(a => a.Height("700px"))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single)
)
...
.Sortable()
.Filterable(filterable => filterable
.Extra(false)
)
)
thx for your possible solution Dinglemeyer
I just figured out how to do it server side; by adding:
.Filter(factory => factory.Add(model=> model.SubscriptionValidStatus).IsEqualTo("Aktiv"))
to datasource!
Rather than a server side default filtering, you could have a client side event add the filter on page load... The practical effect will be your filter in place, at which point a user could select the filter widget in the column header to remove it, or they could add more filters to other columns. I've taken some of my code that I use to do this and renamed it for your grid's name.
Try this out!
In your grid definition, add a events like the following:
.Events(events => events.DataBound("dataBoundSetFilter"))
Then have a javascript function to set the filter of a column with your preferred filtering:
<script type="text/javascript">
// hasBound variable set on page load to false, will be set true after Grid databound event
var hasBound = false;
function dataBoundSetFilter(e) {
// If the grid has not yet been data-bound, apply this here filter
if (hasBound === false) {
//alert("Start");
// Get a reference to the grid
var grid = $("#subscriptionsGrid").data("kendoGrid");
// Apply a filter to the grid's datasource
grid.dataSource.filter({ field: "SubscriptionValidStatus", operator: "eq", value: true });
// Set hasBound = true so this won't be triggered again...
hasBound = true;
}
}
</script>
I was looking for row filter, and add multiple filters in it. I found the following article very helpful. It is using [Kendo.Mvc.CompositeFilterDescriptor] to filter
https://www.telerik.com/forums/how-do-i-use-compositefilterdescriptor-to-set-the-initial-datasource
I'm dynamically editing some fields using JavaScript. But the problem is Kendo's dataSource doesn't recognize them as changed cells.
Grid's edit mode is InCell.
This is my current JavaScript code:
tablesGrid.tbody.find("input[type='checkbox']").each(function () {
$(this).on('change', function () {
var isChecked = $(this).prop('checked');
var dataItem = tablesGrid.dataItem($(this).closest('tr'));
var currentTr = $(this).closest('tr');
var i = $('td:visible', currentTr).index($(this).closest('td'));
var head = tablesGrid.thead.find('th:visible')[i];
var headName = $(head).prop('dataset').field;
tablesGrid.editCell($(this).closest('td'));
dataItem[headName] = isChecked;
tablesGrid.refresh();
});
});
And if you're wondering about this code, I should note that I'm using client template to show checkboxes. But I don't want the user to double click the cell for editing, once to put it in the edit mode, and another one to change the checkbox. I'm not sure if I'm using the right solution, but the JS code works for sure. If I click in the cell and put it in the edit mode, I'll see the change.
#(Html.Kendo().Grid<grid>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(x => x.field)
.ClientTemplate("<input type='checkbox' class='checkbox-inline' #=field? checked='checked':''# />")
.EditorTemplateName("Checkbox");
Well, the best solution I came up with is to put the cell in edit mode when mouse enters that cell! So instead of the entire JS code in the question, I simply use this.
tablesGrid.bind('dataBound', function () {
tablesGrid.tbody.find('td').each(function () {
$(this).mouseenter(function () {
tablesGrid.editCell(this);
});
});
});
Please let me know if you have any better or more efficient way to use editable
checkboxes inside a Grid.
Among Edit and Destroy, Kendo grid has a Select command too. But it seems there's no configuration for this operation. Do you know how can I use it? Any better way of JS binding like custom commands? Notice that it doesn't have a click event.
This line is in my Kendo grid, columns section.
columns.Command(command => { command.Select(); command.Edit(); command.Destroy(); });
Well, I found no better way than using a custom command.
Custom command inside grid:
command.Custom("select").Text("Select").Click("select");
and JS handler code:
<script>
function select(e) {
var grid = $("#grid").data("kendoGrid");
var item = grid.dataItem(grid.select());
var data = item.Title;
alert(data);
}
</script>
Another way to call this will be:
function select(e){
var row = $(e.currentTarget).closest("tr");
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
alert(dataItem.Title);
}
I have an editor template for a grid using Telerik MVC grid and I have two kendo ui components in a grid cell. How can I get them to align next to each other i.e. side by side.
I have tried some css and placing them in div and align float but they render in separate spans and unsure on how to get them side by side any ideas?
Currently the search button is underneath the autocomplete textbox.
#model object
#*#Html.Kendo().AutoComplete().Name("LocationSearch").Placeholder("Type in your search item . . ").Filter("startswith").BindTo(new string[] { "UK","USA","FR","ES","TR","RU","PT"}).Separator(",")*#
#(Html.Kendo().AutoComplete()
.Name("DepartmentSearch")
.Filter("startswith")
.Placeholder("Type in your search item")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetDepartments", "Home");
})
.ServerFiltering(false);
})
)
#(Html.Kendo().Button()
.Name("Search")
.HtmlAttributes(new { type = "button", style="min-width:20px !important;"})
.Content("...")
)
The autocomplete widget is created in a span added inline width via jquery and this worked. $("#DepartmentSearch").first().css('width', '65%');
I'm using Kendo UI 2013.1 and I have a grid within a window. The window's visibility is set to false on the page load, but when a link is clicked, I make it visible.
The problem is that whenever you try to do anything with the grid, like use the filter, or use a paging button, the window becomes invisible. When you click the link again, the window is visible again and reflects whatever the last action was - filtered results or on the next page.
I've tried several approaches that look similar to:
$("#outageWindow").kendoWindow({ visible: true });
But no luck. Here is the full code without any of my resolution attempts:
#(Html.Kendo().Window()
.Name("viewListWindow")
.Title("Complete CI List")
.Width(650)
.Actions(actions => actions.Close())
.Content(#<text>
#(Html.Kendo().Grid(chg.CIsModifiedByChange.CIsModifiedByChange) //Bind the grid to ViewBag.Products
.Name("grid")
.RowAction(row =>
{
if (row.IsAlternate)
{
//Set the background of the entire row
//row.HtmlAttributes["style"] = "background:#e0f7ff;"; this is a lighter blue
row.HtmlAttributes["style"] = "background:#dde1ff;";
}
})
.Columns(columns =>
{
columns.Bound(ci => ci.Value).Title("CI Name");
})
.Pageable() // Enable paging
.Sortable() // Enable sorting
.Filterable() // Enable filtering
)
</text>)
.Draggable()
.Visible(false)
)
<script type="text/javascript">
$(document).ready(function () {
$("#viewCI").bind("click", function () {
$("#viewListWindow").data("kendoWindow").center().open();
})
});
</script>
this solution is work fine for me,
try this
function load_grid() {
/* your grid properties here */
}
$(document).ready(function () {
$("#viewCI").bind("click", function () {
/* load window */
$("#viewListWindow").data("kendoWindow").center().open();
/* load grid into element inside window after window opened */
load_grid();
})
});