kendo-ui

I have a Kendo UI grid that is rendered with javaScript. I want the string columns to have a single option ("Contains") and without the second filter. So far so good, I wrote $("#MyGrid").kendoGrid({ // other bits of configuration here filterable: { extra:false, operators: { string:{ contains: "Contains"} } }, // more bits of configuration here }); As part of the definition of the grid. And the result looks good-ish (I only have one option, so the drop down is redundant). However, regardless of this, the filter still performs the equals operation rather than the contains operation (which is

I have a ComboBox in my page and I want to bind keypress event to my Kendo ComboBox when the cliend writes down any letter. As I understand kendo doesn't have any keypress event on ComboBox. I've found that kendo has something like this to bind values and functions: kendo.data.binders.slide = kendo.data.Binder.extend({ refresh: function () { var value = this.bindings["slide"].get(); if (value) { $(this.element).slideDown(); } else { $(this.element).slideUp(); } } }); Source: Click Here But the problem is I can't workaround that and make it to trigger keypress event on the InputBox in the

Using Kendo UI in MVC4 I have a Grid that makes Ajax calls for data back into the Controller: public ActionResult SearchUser_Read([DataSourceRequest]DataSourceRequest request) { var data = CreateAnExcaptionHere(); return Json(data.ToDataSourceResult(request)); } How do I use this call to inform the page that there was an error? If you need to display an error message from the server then you can do it by returning a DataSourceResult object with only its Errors property set: return this.Json(new DataSourceResult { Errors = "my custom error" }); And pick it up on the client by using this

I have a kendo ui grid in my page that has some columns. Now I want to add a column to it that shows me row number. How to I do this? Thanks. Initialize a variable and show it in column as template: "#= ++record #" Working Demo Here is code: var record = 0; $("#grid").kendoGrid({ dataSource: { data: [{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo"

I have a Kendo tabstrip and I'm trying to put two divs with the col-md-6 class side by side inside a tabstrip item. Instead of having 2 columns, they stack on top of each other. If I change any of them to col-md-5 or smaller, they work correctly. Has anyone had this problem and found the culprit? This might be more of a 'hack' than a fix, but this is how we got around it create a class, lets call it boxFix .boxFix *, .boxFix *::before, .boxFix *::after { -moz-box-sizing: border-box !important; -webkit-box-sizing: border-box !important; box-sizing: border-box !important; } Then for the kendo

I'm just wondering how you go about changing a value of a row in a grid in JavaScript so that it is marked as 'dirty' in the grid and the underlying datasource. e.g. I have a list of Contact/Customer. They have 3 fields FirstName/LastName/IsPrimaryContact. There can only be 1 primary contact, so when the primary contact is set to true on a record I have JavaScript code that loops through the datasource and sets any other contacts set as primary to false. The JavaScript all fires fine and the data fields are set correctly but there are two problems: 1. The grid is not updated with the changes I

I know there is an easy way to set fixed height of a Kendo UI grid through their API but for our specific needs, I need to make the grid expand in full height of its wrapper. With the following markup structure, I set .wrapper to height:600px and I tried to give .k-grid-content height:100% but it doesn't expand. #grid expands to 100% with height:100% but I need the inside contents to expand as well. How do I achieve that? Here is the demo JS BIN <div class="wrapper"> <div id="grid"> <div class="k-grid-header"></div> <div class="k-grid-content"></div> <div class="k-grid-pager"></div> </div> <