Questions on Kendo UI for jQuery Forum

1 answer

381 views

Dynamic Grid column editor template is sending null data

We are using a Grid with a dynamic type. This has been working for us until we ran into the problem of a column editor template receiving null data. The editor template accepts non-nullable TimeSpans but when the grid initializes it is trying to send this editor template a null TimeSpan object. When I change the grid to one of the classes it should be getting such as DownTimeViewModel this error doesn't happen.

"Message: The model item passed into the dictionary is null, but this dictionary requires a non-null model item of type 'System.TimeSpan'."

@(Html.Kendo().Grid<dynamic>()

.Name("SomeName")

.Columns(columns =>

{

foreach (Field field in cols)

{

if (string.IsNullOrWhiteSpace(field.EditorTemplateName))

{

throw new NotImplementedException("EditorTemplate is not set and it needs to be");

}

columns.Bound(field.Member)

.Title(field.Title)

.Visible(field.Visible)

.Hidden(field.Hidden)

.Filterable(field.Filterable)

.IncludeInMenu(field.IncludeInMenu)

.Encoded(field.Encoded)

.Format(field.Format)

.Width(field.Width)

.Sortable(field.Sortable)

.ClientTemplate(field.ClientTemplate)

.EditorTemplateName(field.EditorTemplateName)

.HeaderHtmlAttributes(field.HeaderHtmlAttributes)

.EditorViewData(Util.CreateNewObject(field.AdditionalViewData));

}

})

.Scrollable()

.ToolBar(toolbar =>

{

toolbar.Create();

toolbar.Custom().Text("Delete").Action("Grid_Delete", "Downtime", new { WONumber = Model.WONumber });

//toolbar.Save();

})

.Editable(editable => editable.Mode(GridEditMode.InCell))

.Sortable()

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.PageSize(5)

.Model(model =>

{

foreach (Field field in cols)

{

model.Id(field.Member);

}

foreach (Field field in cols)

{

model.Field(field.Member, field.MemberType).DefaultValue(field.DefaultValue).Editable(field.Editable);

}

)

.Read(read => read.Action("Grid_Read", "Downtime", new { id = Model.WONumber.ToString() }))

.Create(create => create.Action("Grid_Create", "Downtime"))

.Update(update => update.Action("Grid_Update", "Downtime"))

.Destroy(destroy => destroy.Action("Grid_Delete", "Downtime"))

))

Grid

answered on 21 Dec 2017

1 answer

240 views

Problem with kendo.all.d.ts

Hello,

in kendo.all.d.ts is where it is defined that for properties in interface DataSourceTransport Function can be used in the interface and therefore does not want to DataSourceTransportWithFunctionOperations what is TypeScript 2.5 Compiler to compile the project.

Rewards

I. Stanek

Data Source

answered on 21 Dec 2017

2 answers

144 views

[Solved] Multiday Calendar

Hi,

Is it possible to create a scheduler that show 2 or more days like the outlook calendar?

Scheduler

answered on 20 Dec 2017

6 answers

3.4K+ views

MultiSelect values not being removed after filtering

I have three components that work together to filter a KendoGrid and filter each other. Basically when DropDownA gets changed, it should clear any selected values of the MultiSelect, then filter the MultiSelect's dataSource. It works fine on the very first change event of DropDownA, but after that it clears the values from the MultiSelect (calling .value() on it returns []), but does not update the UI--any previously selected values will still be there. The Kendo Components do use server filtering. I've tried clearing the filter before setting the value, as well as setting the value to null, "", and []--all produce the same or similar behavior.

function onChange() {

stationDropDown.select(-1);

hydrantGroupMultiSelect.value(null);

stationDropDown.dataSource.filter({}, {

branchGroupId: value

});

hydrantGroupMultiSelect.dataSource.filter({}, {

branchId: "",

branchGroupId: value

});

}

Above is the change event of DropDownA, and my multiSelects config:

$('#' + options.thisId).kendoMultiSelect({

value: "None Selected",

dataSource: // A Backbone DataSource wrapper we use,

dataTextField: "id",

dataValueField: "description",

filter: "contains",

placeholder: "None Selected",

change: _.bind(function (e) {

// Some Change Event code unrelated to this problem

}, this)

});

Digging through the Kendo library code to see how the behavior changes between the two (first change event and subsequent change events) is that around line 31258 in kendo.all.js, listView.isFiltered() is set to false on first change event, and set to true on subsequent change events, which causes different behavior. If I remove the filtering on the multiSelect in the change event, the component behaves properly.

Any ideas?

Thanks

MultiSelect

answered on 20 Dec 2017

1 answer

4.9K+ views

Kendo Grid UI Required validation not working

I am new to Kendo UI and trying to implement required field validation inside Kendo grid. All the functionalities like add/update/delete functionalities are working except required field validation.

$(document).ready(function () {

var dataSource1 = new kendo.data.DataSource({

batch: true,

transport: {

// PUT /POST Codes

},

error: function(e){

alert('Error code: ' + e.xhr.status + ' - The application encountered an issue please try again. If issue persist contact grh support team');

},

pageSize: 500,

schema: {

model: {  id:"Id", fields : { firstname : { editable : true , validation : { required : true }, type : "string" },createdby : { editable: false, defaultValue: "arjun.vadi"},createddate : { editable: false },modifiedby : { editable: false },modifieddate : { editable: false },tz : { editable: false, defaultValue: new Date().toString().substr(28,5) }} }

},

});

var grid = $("#grid").kendoGrid({

height: 620,

dataSource: dataSource1,

toolbar: ['create', 'save', 'excel'],

excel: {

fileName: "TestMandate" + "_Export.xlsx",

allPages: true

},

pageable: {

numeric: false,

previousNext: false,

messages: {

display: "Total: {2}"

}

},

navigatable: true,

sortable: true,

filterable: true,

resizable: true,

scrollable: true,

editable: true,

columns: [

{ command: [{ name: "destroy", text: "", width: "60px" }], title: " ", width: "100px" },

{ field: "firstname",title:"FirstName",editor: JSHelper.stringEditor, width: 100 , filterable: { multi: true, search: true } },{ field: "createdby",title: "Created By", width: 100, filterable: { multi: true, search: true } },{ field: "createddate",title: "Created Date", width: 100, editor : JSHelper.dateAdminEditor, template: "#= kendo.toString(kendo.parseDate(createddate), 'dd MMM yyyy hh:mm') #", filterable: { multi: true, search: true } },{ field: "modifiedby", title: "Modified By", width: 100, filterable: { multi: true, search: true, search: true } },{ field: "modifieddate", title: "Modified Date", width: 100, editor : JSHelper.dateAdminEditor,  template: "#= kendo.toString(kendo.parseDate(modifieddate), 'dd MMM yyyy hh:mm') #", width:150, filterable: { multi: true, search: true } },

],

});

Validation

answered on 20 Dec 2017

1 answer

143 views

Dirty Cell indicators seem to be misaligned if there are multi-line cells

Reading through documentation (https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/preserve-the-dirty-indicator-in-incell-editing-and-client-operations) it looks like the Kendo UI R3 2017 update made the dirty indicator built in functionality for editable grids. I have a grid in my product that didn't expect the dirty flag to appear. It looks like the only solution is to add CSS to prevent the flags from appearing (https://docs.telerik.com/kendo-ui/knowledge-base/disable-dirty-indicator-using-css). Is that correct? Is there any other way to deactivate the dirty flags?

As for the potential issue that I noticed, when the flag appears in my product, it appears right on the top left of the content that was edited. This works well if all the cells are one line long, but if other some cells in a row span multiple lines, the dirty flag appears to just be floating in the middle of the cells that are only one line long. Using this example (https://dojo.telerik.com/osuRi) You can change a product name to span many lines, then change teh corresponding unit price and you will see the dirty flag on the unit price appears to be floating rather than at the top of the cell. It feels a little odd that the indicators may be out of place. Is this expected behavior?

Grid

answered on 20 Dec 2017

1 answer

184 views

TypeScript kendo.data.DataSourceOptions missing inPlaceSort option

kendo.all.d.ts v2017.3.1026.

kendo.data.DataSourceOptions does not contain inPlaceSort configuration option.

Data Source

answered on 20 Dec 2017

2 answers

129 views

[Solved] How to enable out-of-range date

Hi,

As my title says, how can i enable a specific date that is outside the min and max range?

How can i enable the 5th as well in this example? https://dojo.telerik.com/uKuMap

Can this be done by using the 'dates' config attribute?

Thanks,
Grant

DatePicker

answered on 20 Dec 2017

6 answers

995 views

Bind Kendo TreeView to Model of Groups & Users

Hi, I'm trying to bind a Kendo treeview to a model of Users & Groups. A group contains a list of users and CAN contain a list of groups (and each group in turn can contain more users and more groups). I'd also like to be able to assign a node an icon depending on whether it's a user node or a group node.

The models:

public class Group

{

public int ID { get; set; }

public string Name { get; set; }

public int? ParentID { get; set; }

public List<Group> Groups { get; set; }

public List<User> Users { get; set; }

public class User

{

public int ID { get; set; }

public string Name { get; set; }

public int GroupID { get; set; }

}

And here's a method to get the data I want to bind to the treeview:

private IEnumerable<Group> GetUserGroups()

{

List<Group> model = new List<Group>

{

new Group()

{

ID = 1,

Name = "Admin",

ParentID = 1,

Users = new List<User>()

{

new User()

{

ID = 1,

Name = "John Doe",

GroupID = 1

},

new User()

{

ID = 2,

Name = "Jane Smith",

GroupID = 1

},

Groups = new List<Group>

{

new Group()

{

ID = 2,

Name = "Support",

ParentID = 1,

Users = new List<User>()

{

new User()

{

ID = 1,

Name = "Johnny Support",

GroupID = 2

}

},

new Group()

{

ID = 3,

Name = "Production",

ParentID = 1,

Users = new List<User>()

{

new User()

{

ID = 1,

Name = "Johnny Production",

GroupID = 3

}

};

return model;

}

When I try to do the below:

@(

Html.Kendo().TreeView()

.Name("treeview")

.BindTo((IEnumerable<TreeViewItemModel>)ViewBag.inlineDefault)

)

I get a casting error ... Unable to cast object of type 'System.Collections.Generic.List`1[MyApp.Models.Admin.Group]' to type 'System.Collections.Generic.IEnumerable`1[Kendo.Mvc.UI.TreeViewItemModel]'.

Any help would be appreciated, thanks.

TreeView

answered on 20 Dec 2017

0 answers

266 views

Selenium Webdriver Automation recommendations

We have the following case:

We have editable kendoo grid and editable kendoo form. I would like to make Front End automation testing with selenium webdriver for our application.

During testing I would like to be able to add/delete/update entries via grid and via form. Please provide a recommendations / best practices to do that.

You can find an example of our application under test here: https://www.telerik.com/forums/edit-records-using-external-forms-with-editable-grid

General Discussions

asked on 19 Dec 2017