Questions on Kendo UI for jQuery Forum

5 answers

300 views

Bootstrap css messes with k-window-titlebar

I use Bootstrap + Kendo UI as explained here http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap.

However, when I include the Bootstrap css, it shifts the items in k-window-titlebar slightly lower which doesn't look very good.

You can seen the effect in this Kendo UI Dojo: http://dojo.telerik.com/apeWu

Could you please provide a workaround or fix?

Window

answered on 03 May 2016

8 answers

317 views

[Solved] Stop Undo and Redo service in Kendo Diagram

I need to stop undo and redo service (for prevent shapes and connections ) in kendo diagram using jquery or javascript .
In my project , i was form some shape with connections during drag event in kendo Diagram(refer image 1).then press ctrl+z ,last formed connection will loss(refer image 2).
so i need to stop this undo and redo service.
How to stop these service in kendo diagram using jquery or javascript ?

Diagram

answered on 03 May 2016

3 answers

1.0K+ views

Saving custom settings of the grid

Hello!
I know that user can save grid settings as per http://demos.telerik.com/kendo-ui/grid/persist-state
But it saves all settings. Is there a way to save a selected number of settings?
For example I want to save Sorting, Columns widths and Columns order.
Can this be done via some configuration? If no, can someone give an example how to implement it for localstorage?
Thanks!

Grid

answered on 03 May 2016

6 answers

1.5K+ views

Grid Filters do not reload when filters values reset to defaults

if you set a column filter value and then click filter in the Grid Column Filter Pop, the grid will filter.

If you then manually set the filtered value back to Nothing ("") by deleting the value in the text box and click filter, nothing will happen, and the grid will still be filtered on the previous value. The expected behaviour woudl be for the Grid to be reloaded with no filters when none are specified and the filter button is clicked.

This is mildly inconsistent when using the standard grid filter functionality, and very broken if you are customising the grid filters yourselves and using dropdowns or multiselects as I am.

In order to fix this behaviour, the following simple change neds to be made to the filter method of the FilterMenu object in the lastest source.

var FilterMenu = Widget.extend(

.

filter: function(expression) {

expression = this._merge(expression);

if (expression.filters.length) {

this.dataSource.filter(expression);

} else { // Add these lines

this.dataSource.read(); // Add these lines

} // Add these lines

},

Any chance this fix or similar could be incorporated into a future build ?

Grid

answered on 03 May 2016

5 answers

511 views

Dynamic Multipl Column Group Titles

Hello

I was wondering how I can achieve dynamic multiple column headers. Currently I have a product followed by six columns , each a pair of Quantity and Price for past three years from selected year. I wish to group each Quantity & Price of each year under a title of the year . See example.

Before the update with multiple headers I as injecting a <tr> rows with javascript after the first table element, but this doesnt export with grid.

Help much appreciated

columns.Group(group => group
.Title("Contact Info") ****** DYNAMIC HOW **** ????
.Columns(info => {
info.Bound(x => x.ContactTitle).Width(200);
info.Bound(x => x.ContactName).Width(200);
info.Group(g => g.Title("Location")
.Columns(location =>
{
location.Bound(c => c.Country).Width(200);
location.Bound(c => c.City).Width(200);
})
);
info.Bound(x => x.Phone);
})
);

Grid

answered on 03 May 2016

3 answers

795 views

[Solved] Search multiple fields

Hello,

I have this code that can do a partial search on the first name or last name of any rows.

http://jsfiddle.net/EaNm4/520/

$(document).ready(function() {

var data = [

{firstName: 'Bob test', lastName: 'Kelso'},

{firstName: 'abc test', lastName: 'def'},

{firstName: 'toto test', lastName: 'tata'},

{firstName: 'foo test', lastName: 'var'},

];

$("#grid").kendoGrid({

dataSource: {data: data},

height: 350,

columns: ['firstName', 'lastName']

});

var searchOperator = function(items, filterValue) {

items = items.toLowerCase();

var searchText = $('#search').val().toLowerCase().split(/[\s,]+/);

if (searchText.length) {

var found = true;

for(var s in searchText) {

if (items.indexOf(searchText[s]) == -1) {

found = false;

break;

}

return found;

}

return true;

};

$('#search').on('change', function() {

var dataSource = $("#grid").data('kendoGrid').dataSource;

var searchText = $(this).val();

dataSource.filter({

logic:"or",

filters: [{

field: 'firstName',

operator: searchOperator

},{

field: 'lastName',

operator: searchOperator

}]

});

If you type "bob", "bob test", "bo te", or "kel" in the search box, the first rows will stay visible.

As long as you have a partial word, you will get the rows.

But if you search for a word in both cols, like "bob kelso" the row will not be display.

Is there a way to be able to search multiple fields at the same time, so "bob kelso" will display the first rows?

I was thinking maybe of a way that when the datasource is loaded, it will create a new field with all the data of all other rows, so when I do a search like that, I would simply search that field... is there a way to do something like that... or maybe you have a better suggestion?

Thank you

Grid

answered on 02 May 2016

3 answers

102 views

Filter menu popup

Hello,

In the exemple: "http://dojo.telerik.com/AReza", how can i set minimum value for menu popup "Show items with value that". column "Units in Stock" i not want the value less than 0.

Grid

answered on 02 May 2016

3 answers

140 views

Grid with incell editing does not support schema 'from' option

Hello,

We have a grid that maps nested model properties. We have used the schema 'from' option exactly as outlined here: http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/use-nested-model-properties

However this does not work properly if the grid is configured with incell editing. Instead of editing the variable at its original location (as specified by the 'from' option), the grid just creates new dummy variables on the target object with the same name as the schema field. Any edits are then stored into those dummy fields rather than to the original location.

Here is a dojo example that reproduces the issue: http://dojo.telerik.com/eLOpI

If you open the console there is a timer that logs the toJSON() content of the object in the grid. You can see the dummy variables that get created, and whenever you make edits to the object the dummy variables update, but the original nested ones don't.

regards,

Rowan

Grid

answered on 02 May 2016

3 answers

89 views

Grid not accepting new record from controller after in line create.

I am using inline editing and creating a new record. The record is created by the controller and sent back to the webpage, but the kendo grid is not accepting it. Therefore it does not have the Id, and further edits (before refreshing the page) cause the grid to create another record. It is the same problem from this thread, however following their solution did not fix my issue.

Here is my grid/view

@(Html.Kendo().Grid(@Model.contactList)

.Name("AgentContactsGrid")

.Columns(columns =>

{

columns.Bound(d =>                  d.TypeId).EditorTemplateName("ContactType").Title("Type").ClientTemplate("#:TypeAsString#").Width("120px");

columns.Bound(m => m.Information)

.Title("Information");

columns.Command(command =>

{

command.Edit();

command.Destroy();

}).Width("200px");

})

.ToolBar(commands => commands.Create().Text("New Contact"))

.Editable(editable =>

{

editable.Mode(GridEditMode.InLine);

editable.DisplayDeleteConfirmation("Delete this Contact?");

})

.Pageable(x => x.Enabled(true))

.Events(e =>

{

e.Save("ContactUpdate");

})

.DataSource(ds => ds

.Ajax()

.Create(create => create.Action("CreateContact", "Users")).Read("ReadContact", "Users")

.Read(read => read.Action("ReadContact", "Users"))

.Update(update => update.Action("UpdateContact", "Users"))

.Destroy(destroy => destroy.Action("DeleteContact", "Users"))

.Model(model => model.Id(m => m.Id))

.PageSize(5)

.Total(Model.contactList.Count)

.Events(events => events.RequestEnd("onRequestEnd"))

))

Here is a function I use to set some values, in case it matters (if i can get this to work I won't need it any more)

function ContactUpdate(e) {

e.model.set("UserId", @Model.userDto.Id);

$.ajax(

{

url: "/Users/GetContactTypeById",

dataType: "JSON",

data: { id: e.model.TypeId },

success: function (data) {

e.model.set("TypeAsString", data.result);

},

error: function() {

e.model.set("TypeAsString", "error");

}

});

}

Here is my controller method for creating

public ActionResult CreateContact([DataSourceRequest] DataSourceRequest request, UserContactDto contact)

{

//insert the record to the DB

if (contact != null && ModelState.IsValid)

{

contact.Id = _userServices.AddUserContact(contact, CurrentUser.UserId);

}

//return the updated record which contains the correct model ID

return Json(new[] { contact }.ToDataSourceResult(request, ModelState));

}

And finally here is an example of what is returned to the page (from network in inspect)

{

"success": true,

"result": {

"data": [

{

"userId": 609001,

"typeId": 405,

"information": "123-123-1234",

"typeAsString": null,

"id": 182

}

],

"total": 1,

"aggregateResults": null,

"errors": null

},

"error": null,

"unAuthorizedRequest": false

}

Any help would be appreciated.

Grid

answered on 02 May 2016

1 answer

373 views

[Solved] How to change the color (and other properties) of a cell after initialisation?

Is it possible to change the color of a specified cell programmatically, after Spreadsheet initialisation? Apologies if there's documentation to this effect, I haven't managed to find it.

E.g. $("#spreadsheet").data("kendoSpreadhseet").activeSheet().range("J2").setState({background: "#000000"})

Spreadsheet

answered on 02 May 2016