Questions on Kendo UI for jQuery Forum

3 answers

188 views

Dropdown in edit mode popup doesn't fire "change" on first change when the selectedValue is null

Hello,
I'm trying to figure out why this behavior is changed on the last kendo release .. with no luck
The strange behavior that was working perfecly on kendo 2014.3.1411 and which is changed in vers. 2015.1.318
is the follow:

when I have a dropdown list in a popup edit mode which can be nullable and I manually change the value from the defaultValue to another value,
the first time the dropdown doesn't fire anything, all the other tiimes it fires correctly.

http://dojo.telerik.com/isECi

Eg.
click on New Record
change once "CategoryID" (doesn't fire)
chenge it once again (it fires)

with old versions

http://dojo.telerik.com/isECi/3
click on New Record
change once "CategoryID" (fires)

is this a bug ?
Thank you

Simone

DropDownList

answered on 06 Oct 2016

13 answers

2.3K+ views

DataSource Binding Not working

Can someone please have a look at the code and screen shots below and see 
if you can give me some idea why the grid is blank after returning a valid collection
as part of a JsonResult?

Html.Kendo().Grid<AppointmentsDTO>().Name("FailedAppointments")
                .Columns(columns =>
                {
                    columns.Bound(o => o.MemberFirstName).Title("Member First").Width(80);
                    columns.Bound(o => o.MemberLastName).Title("Member Last").Width(80);
                    columns.Bound(o => o.ClientMemberID).Title("ClientID").Width(60);
                    columns.Bound(o => o.ProviderID).Title("ProviderID").Width(60);
                    columns.Bound(o => o.ProviderFirstName).Title("Provider First").Width(80);
                    columns.Bound(o => o.ProviderLastName).Title("Provider Last").Width(100);
                    columns.Bound(o => o.AppointmentDate).Title("Appointment Date").Width(200);
                    columns.Bound(o => o.IHAAppointmentID).Hidden(true);
                })
                .EnableCustomBinding(true)
                .AutoBind(true)
                .Pageable(page => page.Enabled(true).PageSizes(new Int32[] {20, 30, 50,100}))
                .Sortable(sorting => sorting.SortMode(Kendo.Mvc.UI.GridSortMode.SingleColumn))
                .Selectable()
                .Scrollable(scroll => scroll.Height(350))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("BindFailedAppointments", "AppointmentScheduling")))

Grid

answered on 06 Oct 2016

1 answer

119 views

IE performance issues on vertical grouping

I'm experiencing extreme performance issues when loading pages with vertical grouping in IE on Windows 7. For example, http://demos.telerik.com/kendo-ui/scheduler/resources-grouping-vertical will take 15 seconds or longer to load. During load time, IE will lock up for about 15 seconds and bog don my computer until the page finally completes rendering. This only appears to happen on vertical grouping since none of the other demos for the scheduler cause issues. The odd thing is that this seems to happen to random windows 7 machines. I have been unable to reproduce this on Windows 10 or in Chrome and Firefox. This happens in all versions of IE.

Scheduler

answered on 06 Oct 2016

1 answer

295 views

JS break when resizing column

Hi to all,

I have an issue regarding the resizing feature on a gridview, when I'm trying to resize any column, the code break with this message :

Unhandled exception at line 48, column 27944 in http://localhost:54998/Scripts/kendo/2016.2.714/kendo.all.min.js
0x800a138f - JavaScript runtime error: Unable to set property 'width' of undefined or null reference

on those lines :

resizeend: function () {

var newWidth = th.outerWidth(), column, header;

cursor(that.wrapper, '');

if (browser.webkit) {

that.wrapper.removeClass('k-grid-column-resizing');

}

if (columnWidth != newWidth) {

header = that.lockedHeader ? that.lockedHeader.find('thead:first tr:first').add(that.thead.find('tr:first')) : th.parent();

var index = th.attr(kendo.attr('index'));

if (!index) {

index = header.find('th:not(.k-group-cell):not(.k-hierarchy-cell)').index(th);

}

column = leafColumns(that.columns)[index];

column.width = newWidth; /* <--- WHERE IT BREAKS*/

that.trigger(COLUMNRESIZE, {

column: column,

oldWidth: columnWidth,

newWidth: newWidth

});

that._applyLockedContainersWidth();

that._syncLockedContentHeight();

that._syncLockedHeaderHeight();

}

that._hideResizeHandle();

th = null;

}

And here is the code of the grid :


@(Html.Kendo().Grid(Model)
      .Name("mainGrid")
      .Columns(columns =>
      {
          //// Column binding
          //// First three columns are locked
          columns.Bound(c => c.Article).Width(70).Locked(true).Lockable(false);
          columns.Bound(c => c.ParagraphNb).Title("Paragraph").Width(90).Locked(true).Lockable(false);
          columns.Bound(c => c.CircularSName).Title("Legislation short name").Width(180).Locked(true).Lockable(false)
              .ClientTemplate("#=generateNameTemplate('Document', 'SN', CircularSName, false, data.UnderReview)#"); // Template based column to generate link toward Documnets
 
          columns.Bound(c => c.CircularLName).Title("Legislation long name").HtmlAttributes(new { @class = "multiline-cell" }).Width(300);
 
          columns.Bound(c => c.EntitiesNameList).ClientTemplate("#=generateEntitiesTemplate(Entities)#").Width(150).HtmlAttributes(new
          {
              @class = "multiline-cell"
          });
          columns.Bound(c => c.EntitiesIdList).Hidden(); // Entities list column is used for filtering purposes only and is hidden (list of Guids)
 
          columns.Bound(c => c.Section).Width(200);
          columns.Bound(c => c.FullText).Title("Full text").ClientTemplate("<div class='fulltext-cell'>  #if (data.UnderReview) " +
                                                           "{# " +
                                                           "<span class='under-review'> Full Text is unavailable until the paragraph is published. </span>" +
                                                           "#} " +
                                                           "else if (data.IsRepealed) " +
                                                           "{# " +
                                                           "<span class='repealed-disclaimer'> This paragraph has been repealed </span>" +
                                                           "#}" +
                                                           "else" +
                                                           "{# " +
                                                           " #=data.FullText #" +
                                                           "#}#" +
                                                           "</div>")
                                                           .HtmlAttributes(new { @class = "multiline-cell" })
                                                           .Width(600);
          columns.Bound(c => c.Category).Width(150);
          columns.Bound(c => c.MainTopic).Width(125);
          columns.Bound(c => c.SubTopic1).Title("Other topic 1").Width(125);
          columns.Bound(c => c.SubTopic2).Title("Other topic 2").Width(125);
          columns.Bound(c => c.ObligationTitle).Title("Obligation title").Width(200);
          columns.Bound(c => c.ObligationDrafted).Title("Obligation Text").HtmlAttributes(new { @class = "multiline-cell" }).Width(345);
          columns.Bound(c => c.LogicLinks).Width(250).ClientTemplate("#=generateLinksTemplate(data.LogicLinks)#"); ;
 
          columns.Bound(c => c.Information).Title("Administration comments").HtmlAttributes(new { @class = "multiline-cell" }).Width(350);
          columns.Bound(c => c.ShortEntryDate).Title("Entry in force date").Width(160).Format("{0:dd/MM/yyyy}");
          columns.Bound(c => c.Order).Title("Order in Legislation");
 
          columns.Bound(c => c.Id).ClientTemplate("<button class='editButton' onclick='editParagraph(\" #=data.Id #\");'>Edit</button>").Title("").Width(60);
      })
      .Scrollable(scrollable => scrollable.Height(540))
      .Resizable(resizable => resizable.Columns(true))
      .Pageable(pageable => pageable
          .Refresh(true)
          .PageSizes(new[] { 25, 50, 100 })
          .ButtonCount(5)
          )
 
      .DataSource(dataSource => dataSource
          .Ajax()
          .Read(read => read.Action("Read", "Paragraph"))
          .PageSize(25)
          .ServerOperation(true)
          .Sort(s =>
          {
              s.Add("CircularSName").Ascending();
              s.Add("Order").Ascending();
          })
      )
 
      .Selectable(selectable => selectable
          .Mode(GridSelectionMode.Multiple))
 
      // Eport Excel
      .Excel(excel => excel
        .FileName(string.Format("Paragraphs_{0}.xlsx", DateTime.Now.ToString("yyyyMMdd")))
        .Filterable(true)
        .AllPages(true)
        .ForceProxy(true)
        .ProxyURL(Url.Action("ExportExcel", "Paragraph"))
      ))

Can you help me to understand this and how to fix it ?

Cheers !

Grid

answered on 06 Oct 2016

4 answers

3.4K+ views

[Solved] Prevent Read on DataSource Inialization

Hi there,

Im creating a kendoScheduler that retrieves events for a specific user, see below code (shortened for brevity):

Controller:

@RequestMapping(value="/forUserCalendar", method=RequestMethod.GET, produces=MediaType.APPLICATION_JSON_VALUE)

@ResponseBody

public List<KendoSchedulerEvent> getCalendarEventsForUser(@RequestParam(value="userId", required = true) Long userId) {

  System.out.println("### forUserCalendar..."+userId);



  //Retrieves events from Database

  //Converts Domain Events to KendoSchedulerEvents

  return KendoSchedulerEvent.convertEvents(events);

}

HTML:

var dataSource_events = new kendo.data.SchedulerDataSource({

  transport: {

    read: {

      url: "/itd-boot-thymeleaf-demo/events/forUserCalendar",

      dataType: "json",

      type: "GET"

    },



    parameterMap: function(options, operation) {

      if (operation === "read") {

        var userId = $("#select-users").getKendoDropDownList().value();

        var result = {

          userId: userId,

        }

        return result;

      }

      return options;

    }

  }

});

$("#scheduler-calendar").kendoScheduler({

  autoBind: false,

  dataSource: dataSource_events

});

$("#select-users").kendoDropDownList({

  dataSource: dataSource_users,

  dataValueField: "id",

  dataTextField: "fullName",



  change: function() {

    if (this.value() != "") {

      $("#scheduler-calendar").getKendoScheduler().dataSource.read();

    }

  }

});

The Problem:
When my page loads, the read URL is being called from the DS, but there wont be a user selected at this stage as the page just loaded. Is there a way to prevent the DS from being read when its initialized? I thouhg that by including "autoBind" in the Scheduler would help, but its had no effect.

Please advise if you can.

Many Thanks,
Grant

Data Source

answered on 06 Oct 2016

1 answer

575 views

[Solved] SchedulerDataSource, Cannot read property 'data' of undefined

Morning,

I've created a widget that uses the KendoScheuler inside a kendoWindow and sets its DataSource dynamically. Code below, shortened for brevity:

CODE:

function openWindow(optionOverrides) {

var options = {

/**

* @type {Array | kendo.data.SchedulerDataSource}

* @required

* The dataSource where existing events are read from, can be a kendo.data.SchedulerDataSource or a JavaScript Array.

* If an array is used a new kendo.data.SchedulerDataSource will be created with the 'data' attribute set as the array

*/

dataSource: null

};

//Validate a dataSource exists

if (!validateArgument(optionOverrides.dataSource, ["object"])) {

console.error("SchedulerDataSource of incorrect type. Expected: object; found: " + typeof optionOverrides.dataSource);

return false;

} else {

if ((optionOverrides.dataSource).constructor == Array) {

//If the optionOverrides.dataSource is an array, use it to create a new kendo.data.SchedulerDataSource containing the array data

var schedulerDS = new kendo.data.SchedulerDataSource({

data: optionOverrides.dataSource

});

options.dataSource = schedulerDS;

} else if ((optionOverrides.dataSource).constructor == kendo.data.SchedulerDataSource) {

//Use optionOverrides.dataSource if it is already a kendo.data.SchedulerDataSource

options.dataSource = optionOverrides.dataSource;

} else {

console.error("optionOverrides.dataSource object not of type Array or kendo.data.SchedulerDataSource");

return false;

}

var dfd = $.Deferred();

var result = null;

$("<div />")

.attr("id", "window-schedulerWindow")

.appendTo("body")

.kendoWindow({

visible: false,

modal: true,

resizable: false,

title: options.title,

activate: function(e) {

//Hide the headers of the scheduler

var timePickerScheduler = $("#scheduler-scheduleTimePickerWindow-timePicker").data("kendoScheduler");

//Set data source after initialization. Prevents data being loaded before the scheduler is ready

timePickerScheduler.setDataSource(options.dataSource);

},

open: function(e) {

var timePickerScheduler = $("#scheduler-scheduleTimePickerWindow-timePicker").kendoScheduler({

/* Attributes removed for Brevity */

edit: function(e) {

               e.preventDefault(); //prevent default event editing



               //Retrieve and sync the dataSource with the new event generated in the 'add' callback

              var dataSource = this.dataSource;

              dataSource.sync();

            }

}).getKendoScheduler();

}

}).data("kendoWindow")

.content($("#template-schedulerTimePickerWindow").html())

.center()

.open();

return dfd.promise();

}

The Problem:
So the issue Im having is that if the SDS is created fresh from an array of Event Objects, everything works fine, however, if I specify an already existing SDS, that uses remote data, and then start dragging and resizing events, I get the error: "Cannot read property 'data' of undefined", which points to statement 'dataSource.sync();' in the 'edit' event of my scheduler.

Is there some kind of sync trying to happen with the remote SDS? I monitored my network activity and didnt see anything.

Please advise, Thanks,
Grant

Data Source

answered on 06 Oct 2016

3 answers

277 views

passing jquery event to column command in template

I want to use a template for my command button. like this:

command: [

{

name: "editReport",

template:

"<button type='button' class='btn btn-link' title='Redigér rapport' data-ng-click='vm.onEdit()' data-ng-disabled='!vm.canEdit'><i class='fa fa-pencil' aria-hidden='true'></i></button>"

} as any,

{

name: "deleteReport",

template:

"<button type='button' class='btn btn-link' title='Slet rapport' data-ng-click='vm.onDelete()' data-ng-disabled='!vm.canDelete'><i class='fa fa-minus' style='color:darkred' aria-hidden='true'></i></button>"

} as any,

],

title: "Handlinger", width: 50

We are in a Angular controller and I want to get the JQueryEventObject in the vm.onDelete() function.

If that not possible then maybe I could get the Id of the row in the binding vm.onDelete({{dataItem.Id}}).

Or is there another way to make a image button?

public onDelete = (e: JQueryEventObject) => {

this.$confirm({ text: 'Ønsker du at slette rapporten?', title: 'Slet rapport', ok: 'Ja', cancel: 'Nej' })

.then(() => {

var dataItem = this.mainGrid.dataItem(this.$(e.currentTarget).closest("tr"));

var entityId = dataItem["Id"];

this.mainGrid.dataSource.remove(dataItem);

this.mainGrid.dataSource.sync();

});

}

Grid

answered on 06 Oct 2016

1 answer

252 views

Caching MVVM Views and View-Models

My app uses both Kendo MVVM and the Kendo Router. When I initialize a Kendo view I provide Kendo with my view and a view-model to bind. The outcome is a view-model and view that are constantly in sync.

I tried to take this a step further by caching the view-view-model results using the URL hash as the primary key/id. When I tried to reload a cached view-view-model the page displays correctly, but none of the binding work.

What am I missing?

Thanks!

MVVM

answered on 06 Oct 2016

3 answers

314 views

Grid Displays Incorrectly When JSON Data Replaced

I am loading a complex JSON object via AngularJS. The object contains several child collections that I want to display in Kendo UI grids. When I first load the page, the object doesn't exist at all. Periodically, the user can use a master list (not included here) to change the entire JSON object.

So far, I have the object loading correctly and displaying/working with AngularJS integration for the basic fields. The grid in question is configured to appear inside a Kendo TabStrip, as part of an AngularJS directive that displays my entire child form.

I currently define the grid (and tabStrip) in the Angular HTML template for the directive as:

<div class="detailTabStrip" kendo-tab-strip k-content-urls="[ null, null]">

<ul>

<li class="k-state-active">Facility Types</li>

<li>Notes</li>

</ul>

<div style="padding: 1em">

<kendo-grid k-options="typeSnapshotGridOptions" k-scope-field="typeSnapshotGrid" style="height:99%;width:100%">

</kendo-grid>

</div>

<div style="padding: 1em">

TBD

</div>

My controller supplies the grid options:

$scope.typeSnapshotGridOptions = {

dataSource: {

data: [],

pageSize: 5,

},

sortable: true,

groupable: false,

resizable: true,

useStaticHeaders: true,

allowScroll: true,

selectable: "row",

pageable: {

refresh: false,

pageSizes: false,

buttonCount: 5

},

autoSync: true,

//dataBound: function () {

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

//},

columns: [(...omitted for brevity...)]

};

And, when the JSON object is changed, it reinitializes the grid:

$scope.$on('facilitySelected', function (ev, args) {

kendo.ui.progress($('#facilityDetailSection'), true);

$http.get('/FacAdmin/GetFacilityDetail/' + args.facilityID)

.then(function (response) {

$scope.facility = response.data;

$scope.typeSnapshotGrid.dataSource.data($scope.facility.TypeSnapshots);

kendo.ui.progress($('#facilityDetailSection'), false);

});

As far as displaying data goes, this all works. The grid starts off invisible (because I have an ng-show vanishing the entire pane if there is no data), and it appears and shows the correct child rows each time I load a new complex JSON object.

However, the appearance is horrible. The grid appears about 100px tall (despite settings for 100% height and width, and use of useStaticHeaders and allowScroll) the very first time I load a JSON collection into it. On the second and subsequent loads, the grid appears the correct size and is almost right... the last row is missing the bottom border.

I have tried:

* refresh()
* dataSource.sync()
* dataSource.read()
* replacing the datasource instead of replacing the just the data

None of these had the slightest effect.

I am testing in Chrome and Chrome's debugger reports no JS errors. My Telerik version was installed from telerik.kendoui.professional.2016.2.714.commercial, which I assume also represents the version number.

Attached: Screenshot of grid appearance on first load of the child collection (_1) and on subsequent loads (_2).

Please suggest additional possible fixes.

Grid

answered on 05 Oct 2016

1 answer

636 views

Formatted value numeric input missing k-invalid class

Hi,

I noticed, that when using a validation for kendo grid fields, only some fields get the k-invalid class. This can be easily seen on the demo page: http://demos.telerik.com/kendo-ui/grid/editing-custom-validation .

All the empty fields are correctly validated, but only ProductName fields has the k-invalid class. The Unit Price and Units In Stock don't (they still kave the k-valid class, although there is tooltip saying that field is required). So my problem is that I want to style invalid fields with red background etc, and it simply doesn't work for numeric fields.

Is that a known issue? Any workarounds for now?

Thanks,

Pawel

Validation

answered on 05 Oct 2016