Questions on Kendo UI for jQuery Forum

2 answers

668 views

How to disable Kendo Scheduler vertical Scrolling

Hello,
I have a problem with Kendo Scheduler doing a vertical auto-scroll.
For example, I want to change the end of an event by dragging it with the mouse. So I'm going to hit the bottom of the event (screenshot 1 - before-click.jpg).
As soon as I hit the mouse button, the event goes away. Scheduler performs the scroll so that the top edge of the event is visible.
When the event is too "long", so it does not fit into Scheduler, so after the "jump" the bottom edge disappears (screenshot 2 - after-click.jpg).
If I want to change this "long" event, I have to do it using the standard popup editing window.
Is it possible to turn off this vertical auto-scroll at Kendo Scheduler?
Thanks!
Jan Hron

Scheduler

answered on 21 Feb 2018

3 answers

287 views

Grid with Filter Row using ajax call action two times

Hi,

I created a Grid with Filter Row and using ajax:

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

.Name("grid")

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

.ServerOperation(true)

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

.Read(read => read.Action("GetList", "CurrentController").Data("HandleFilters")).PageSize(10)

)

.Columns(columns =>

{

columns.Bound(model => model.Name).

Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")).

Operators(m => KendoUICustomLocalization.GridFilterLocalization(m)));

columns.Bound(model => model.LastName).

Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")).

Operators(m => KendoUICustomLocalization.GridFilterLocalization(m)));

})

.Pageable(p => p.Messages(m => KendoUICustomLocalization.GridPageLocalization(m))

.PageSizes(10))

.Sortable() // Enable sorting

.Filterable(ftb => ftb.Mode(GridFilterMode.Row))

.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))

.Excel(excel => excel

        .FileName("Excel.xlsx")

        .Filterable(true)

        .AllPages(true)

        .ProxyURL(Url.Action("Excel_Export_Save", "CurrentController"))

    )

    .Events(events => events.Change("onGridChange"))

    )

and the GetList action:

public ActionResult GetList([DataSourceRequest]DataSourceRequest request, string filtro_texto)

{

IQueryable<Products> products = _uow.GetProducts();

.............

DataSourceResult result = products_model.ToDataSourceResult(request);

return Json(result, JsonRequestBehavior.AllowGet);

}

I see that the GetList action is called two times, one with the request pageSize = 0, and other with the request pageSize = 10

Is there any problem in my code? Is it a nomal behaviour?

Best regards

Grid

answered on 21 Feb 2018

4 answers

491 views

Cleanup Best Practices

My application has a lot of windows, containing forms and other views of data that have been bound to observables, using the kendo.bind function. Many of these windows are created and destroyed, over the course of the application lifetime.

My question is this: Is it necessary to call kendo.unbind on the contents of these windows, prior to destroying them, or will they automatically clean up their observable bindings?

Also, are there any other best practices I should be aware of, for tidying up after deleting these form windows?

MVVM

answered on 21 Feb 2018

4 answers

623 views

Editor template and resource editor

Hello,

I am in need of a custom editor for the Gantt task because I need to validate and/or have a dropdown for a field. I can see how to achieve that by following https://docs.telerik.com/kendo-ui/api/javascript/ui/gantt#configuration-editable.template but that doesn't show me how I can get the resource editor to work. Neither have I found anything from searching the Internet or these forums.

So my question is, how to achieve the normal resource editor for Gantt tasks while using a custom editor template?

Gantt

answered on 21 Feb 2018

7 answers

451 views

Server Filtering: How to get the next start and end date when navigating

I'm using the scheduler with server filtering and I'm trying to get the next start date & end date of the scheduler view but i can't figure it out.

i'm not using ASP/C# so i need a JS example of how to do this. Every example i've found has just linked to a visual studio project, which is no good for me.

Scheduler

answered on 20 Feb 2018

1 answer

2.0K+ views

kendoGrid is not a function

Hi,

I am trying to set up a kendo grid for my asp.net core application but running into 'kendoGrid is not a function' error. Please see attached snap shot for the error and script references that i have included in my file.

Thanks!

Grid

answered on 20 Feb 2018

2 answers

580 views

Get sum and average of selected items of a grid in alert / Field / popup

Hi,

I am having a requirement to get sum and average of selected items (cells of specific numeric columns) of a grid in either an alert , Field or popup

Such as in the below example I want to get the average and Sum of selected Frieght columns

eg: https://demos.telerik.com/aspnet-mvc/grid/selection

I am not able to find the event for selectable: "multiple cell"

And also I want to allow this feature only on numeric fields. Please suggest the possible solution for this.

Grid

answered on 20 Feb 2018

1 answer

1.1K+ views

Master/Detail binding and hide if empty

Hi,

I have a Grid With Master-Detail logic implemented which works just fine except 2 things:

1.) detailInit gets called every time I expand a row. Why? Can this be changed?

2.) If the detail grid has no data to show due to filtering I would like to remove the detail grid completely and show a text message instead "no Data".

I also want to get rid of the columns etc...so the complete Grid should disapear.

My MasterGrid and DetailGrid is defined as:

$("#kendoGefahrstoffGrid").kendoGrid({

groupable: true, //Können die Records per Drag and Drop grupiert werden?

sortable: true, //Dürfen die Spalten sortiert werden oder nicht

scrollable: false,

resizable: true,

detailInit: detailInit,

dataBound: function() {

this.expandRow(this.tbody.find("tr.k-master-row"));

},

columnMenu: true, //Zeigt ein Menü an um Sortierung vorzunehmen oder eine Spalte ein bzw. auszublenden

toolbar: kendo.template($("#toolbarTemplateGefahrstoff").html()),

columns: [{

field: "ID",

title: "ID",

width: 50

},

{

field: "SelGefarhrstoff.Title",

title: "My Gefahrstoff Title"

},

{

field: "SelGefarhrstoff.Modified",

title: "CheckDate"

}, {

field: "SelGefarhrstoff.CMR_Kat",

title: "CMR Kategorie"

}, {

command: [{

text: "Edit",

click: editItem,

iconClass: "k-icon k-i-edit"

}],

title: "Actions",

width: "120px"

}, {

command: [{

text: "create $18",

click: createp18,

iconClass: "k-icon k-i-file-add"

}],

title: "§18 Action",

width: "120px"

}

],

dataSource: dataSourceGefahrstoff

}); //kendoGefahrstoffGrid

function detailInit(e) {

dataSourceSelectedBAsDetails = new kendo.data.DataSource({

schema: {

model: {

id: "ID"

}

},

transport: {

read: function (options) {

$pnp.sp.web.lists.getByTitle("SelectedBAs").items

.select("*,UniqueId,FieldValuesAsText")

.expand("FieldValuesAsText")

.filter("INGAId eq " + currentINGA)

.get()

.then(function (items) {

console.log("SelectedBAs results:", items);

options.success(items);

}) //then function

.catch(function (e) {

console.log(e);

options.error(e);

}) //catch function

} //read function

}, //transport

filter: { field: "GefahrstoffbezugId", operator: "eq", value: e.data.SelGefarhrstoff.Id }

}); //datasource

$("<div/>").appendTo(e.detailCell).kendoGrid({

dataSource: dataSourceSelectedBAsDetails,

noRecords: {

template: "No data available"

},

columns: [{

field: "ID",

title: "ID",

width: 50

}, {

field: "OData__dlc_DocIdUrl.Url",

title: "Doc",

template: '<a href="#=OData__dlc_DocIdUrl.Url#">Details</a>'

},

{

command: [{

text: "Edit",

click: editItem,

iconClass: "k-icon k-i-edit"

}, {

text: "view",

click: showDocInBrowser,

iconClass: "k-icon k-i-file"

}],

title: "Actions",

width: 240

}

]

});

}

Grid

answered on 20 Feb 2018

3 answers

783 views

Pager not refreshing when updating grid.

I have a grid that gets populated based on the selection in a treeview.

function onSelect(e) {

$('#grid').data('kendoGrid').dataSource.read({ FolderID: $('#treeview').data('kendoTreeView').dataItem(e.node).id });

$('#currentNode').val($('#treeview').data('kendoTreeView').dataItem(e.node).id);

}

It all works great except for the (server side) paging.

Here's the problem:

First: I populate the grid with a data set that has 12 pages, and I click on the sixth page.

Next: When I click on a another tree node for data that only has two pages, it will run dataSource.read to load new data into the grid

Problem: The request will still send data as if it's still trying to get page 6, instead of resetting page numbers based on the new data set.

How can I get the pager to reset when I call dataSource.read?

Grid

answered on 20 Feb 2018

2 answers

993 views

Filtering on multiple values

Hi,

Following the example from: https://docs.telerik.com/kendo-ui/knowledge-base/dropdownlist-filter-multiple-properties, I have implemented custom filtering on my kendo drop down list as follows:

$("#options").kendoDropDownList({
dataTextField: "name",
dataValueField: "id",
noDataTemplate: $("#noDataTemplate").html(),
filter: "contains",
dataSource: {
type: "odata-v4",
transport: {
read: function (options) {
$.ajax({
url: optionsURL,
dataType: "json",
success: function (result) {
options.success(result);
},
error: function (result) {
console.log(result);
}
});
}
},
},
filtering: function (ev) {
var filterValue = ev.filter.value;
ev.preventDefault();
this.dataSource.filter({
logic: "or",
filters: [
{
field: "name",
operator: "contains",
value: filterValue
},
{
field: "address",
operator: "contains",
value: filterValue
},
{
field: "id",
operator: "contains",
value: filterValue
}
]
});
} });

I also have code implemented which allows the user to add a new item to the dropdown if it doesn't exist, using the no data Template. Here I perform a remote call to add the item server side and then I execute the following lines of code to refresh the drop down:

var dropdown = $("#options").data("kendoDropDownList");
dropdown.dataSource.read();

If the user has added a new item I want to set the selected value of the dropdown to the newly added item. To achieve this I have set a global flag 'addNew' = tru once the remote call which adds the new item has been successful. I also store, in a global variable, the id of the item just added. I have then plugged into the 'success' method of the datasource on the drop down and added the following lines:

if (addNew) {
var dropdown = $("#options").data("kendoDropDownList");
dropdown.value(newId);
}

However, when executing my code crashed out at this line on the 'filtering' option: "var filterValue = ev.filter.value" because inb fact ev.filter is 'undefined'.

If I remove my custom filtering the dynamic select works perfectly and vice versa. Can the two exist together?

Many thanks

DropDownList

answered on 20 Feb 2018