Questions on Kendo UI for jQuery Forum

1 answer

1.4K+ views

Hi,

I have created custom popup for kendo scheduler to Add and Edit details using Kendo template. However, I want to add kendo autocomplete and kendo multiselect on the popup. I have attached screenshot of the popup.

The issue we are facing is how to populate "AUTO COMPLETE" & "MULTI-SELECT" controls on the scheduler popup (which is already working on Modal popup but somehow it does not work on "Scheduler Popup".

Scheduler

answered on 11 Feb 2016

1 answer

226 views

Chart type(k-series-defaults) 2 way binding with AngularJS

I have reproduced this issue in here ... http://dojo.telerik.com/@Salmal/OcALi

I am implementing Kendo Charts for my AngularJS application . I have a scenario where i need to change the type of the Chart when user clicks on a button .

For this i am using k-series-defaults attribute directive and for its value i am binding a scope variable from controller . Please see below code snippets.

View.html

<div class="demo-section k-content wide">

<div>

<h4>Hover some series</h4>

<div kendo-chart

k-legend="{ position: 'bottom' }"

k-series-defaults="{ type: 'pie' }"

k-series="[{ field: 'amount', categoryField: 'name'}]"

k-data-source="chartData"

k-rebind="chartData">

</div>

Ctrl.js

$scope.chartData = [

{

"name": "Books",

"amount": 200

},

{

"name": "Newspapers",

"amount": 320

},

{

"name": "Magazines",

"amount": 225

},

{

"name": "Shoes",

"amount": 400

}

];

$scope.update = function () {

$scope.ChartType = { type: 'bar' };

};

$scope.ChartType = { type: 'pie' };

My problem is that , the ChartType variable change doesn't reflect in the chart rendered in the view . Which means that the AngularJS 2 way binding doesn't work with the kendo ui charts . Is there something i am missing here , or can we use some alternatives such as ObservableArray as specified here http://docs.telerik.com/kendo-ui/AngularJS/data-source#update-the-datasource-object . ?

Charts

answered on 11 Feb 2016

3 answers

335 views

ASP.NET (MVC) bundles breaks kendo.common-bootstrap - kendo.bootstrap theme

Hi team

Anyone knows why mvc bundles breaks the kendo css?

this is my bundle in a brand new mvc project, doing this give the result find on 1.png which is the expected

bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/bootstrap")

.Include("~/Scripts/kendo/2016.1.112/angular.min.js")

.Include("~/Scripts/kendo/2016.1.112/kendo.all.min.js")

);

bundles.Add(new StyleBundle("~/Content/css").Include(

"~/content/kendo/2016.1.112/kendo.common-bootstrap.min.css",

"~/content/kendo/2016.1.112/kendo.bootstrap.min.css",

"~/Content/site.css"

));

However if I force the bundling using BundleTable.EnableOptimizations = true; I get the results on attachments 2 which does not render properly

Regards

General Discussions

answered on 11 Feb 2016

3 answers

106 views

Group collapse with frozen columns only collapses frozen columns

Hi,

We've pulled down the latest build (2016.1.112) and looking to push it into our solution already using kendo.

We've noticed on the latest build frozen columns + grouping works differently:

http://demos.telerik.com/kendo-ui/grid/frozen-columns

Current build: If I group by a field and then collapse the group it only does this for the frozen columns rather than all.

Previous build ie .2015.3.930 : If I group by a filed then collapse the group it collapses everything (What we want/expect).

Is there a setting a setting to force the group close to close both the frozen and unfrozen columns?

Grid

answered on 11 Feb 2016

1 answer

216 views

Measuring Kendo Grid Performance

We are implementing kendo grids in angularjs for large datasets and would like to measure the performance times (i.e. grid loading, paging including the client-side data binding times) for various page sizes and no. of columns. Is there a way to do this accurately with any tool or technique out there? And if so could you list out the steps to measure the total time using that tool? Thanks.

Grid

answered on 11 Feb 2016

3 answers

115 views

_back is always defined in query parameter

It says it should appear only when back button is pressed, but this is not the case in version 2016.1.125.

There are some changes in kendo.router.js file in _checkUrl method which I think is not correct. backCalled is always undefined, which means backButtonPressed parameter in trigger method is always true.

if (this.trigger(CHANGE, {

url: current,

backButtonPressed: !backCalled

SPA

answered on 11 Feb 2016

1 answer

115 views

Grid Design Help

Hi All,

Could someone tell me if it's possible for the grid to display a layout like the one attached. And have the ability to edit the month cells?

Grid

answered on 11 Feb 2016

3 answers

955 views

[Solved] Insert Array into Grid

I have a page where the user is able to select objects from Grid A to either 1) insert them into Grid B or 2) insert them into Grid C. One way to expedite use of the page is we want to allow users to have a button that does "Add all Visible in Grid A to Grid B". I have some javascript that does here

$("#addAllSelectedToGridB").click(function () {

var gridA = $("#gridA").data("kendoGrid");

var gridB = $("#gridB").data("kendoGrid");

var gridBDatasource = gridB.dataSource;

var alreadyInGridB = gridBDatasource.view();

var itemsToBeAdded = new Array();

gridA.select().each(function () {

var dataItem = gridA.dataItem($(this));

var result = $.grep(alreadyInGridB, function (e) { return e.ID == dataItem.ID; });

if (result.length == 0) {

itemsToBeAdded.push(dataItem);

}

});

for (i = 0; i < itemsToBeAdded.length; i++) {

gridBDatasource.insert(itemsToBeAdded[i].toJSON());

}

});

This was working fine when we were displaying 25 items per page in Grid A. The customer has requested that we up that total to 300 and now an operation that took less than a second now takes 10-12 seconds.

I tried looking through the grid documentation but I couldn't find an alternative method for inserting items into a gird. I'm just curious if there is a method explicitly for adding a collection of items that may possibly be more efficient?

Thanks

Grid

answered on 10 Feb 2016

2 answers

637 views

Kendo dataSource.add = "Id is not defined"

I'm trying to add some items to a Kendo DataSource to then display in the grid. However, every time I try to save I get Reference Error: Id is not defined.

001.var viewModel = new kendo.observable({

002.orgDataSource: new kendo.data.DataSource({

003. transport: {

004. read: {

005. url: "/Organization/GetAll",

006. dataType: "json"

007. },

008. update: {

009. url: "/Host/Organization/Edit",

010. dataType: "json",

011. type: "POST",

012. data: {

013. __RequestVerificationToken: getAntiForgeryToken()

014. }

015. },

016. create: {

017. url: "/Host/Organization/Create",

018. dataType: "json",

019. type: "POST",

020. data: {

021. __RequestVerificationToken: getAntiForgeryToken()

022. }

023. },

024. destroy: {

025. url: "/Host/Organization/Delete",

026. dataType: "json",

027. type: "POST",

028. data: {

029. __RequestVerificationToken: getAntiForgeryToken()

030. }

031. }

032. },

033. schema: {

034. model: {

035. id: "Id",

036. fields: {

037. Id: { type: "number", editable: false, nullable: true },

038. Name: { type: "string" },

039. LicenseExpiration: { type: "date" },

040. LicenseNumber: { type: "number" },

041. Active: { type: "boolean" },

042. CreateDate: { type: "date" },

043. LastModDate: { type: "date" },

044. AvailableLicenses: { type: "string" },

045. State: { type: "string" }

046. }

047. },

048. errors: "errorMsg"

049. },

050. pageSize: 20,

051. error: function (e) {

052. toastr.options = {

053. "positionClass": "toast-bottom-full-width"

054. };

055. toastr.error("There was an error: " + e.errors, "Uh, Oh!");

056. this.cancelChanges();

057. },

058. serverPaging: false,

059. serverFiltering: false,

060. serverSorting: false

061.}),

062.reloadOrganizations: function () {

063. this.get("orgDataSource").read();

064.},

065.onOrgSave: function (e)

066.{

067. var uid = $('input[name="OrgRowUID"]').val();

068. var tr = $('tr[data-uid="' + uid + '"]'); // get the current table row (tr)

069. var name = $('input[name="Name"]').val();

070. var licenseNumber = $('input[name="LicenseNumber"]').val();

071. var licenseExpiration = $('input[name="LicenseExpiration"]').val();

072. var email = $('input[name="Email"]').val();

073. var state = $('input[name="State"]').val();

074. var logo = $('input[name="ImageUrl]').val();

075. var active = $('input[name="Active"]').is(":checked");

076.

077. // get the data bound to the current table row

078. var orgGrid = $("#OrganizationGrid").data("kendoGrid");

079. var data = orgGrid.dataItem(tr);

080.

081. if (data == null)

082. {

083.

viewModel.orgDataSource.add({ Name: name, LicenseNumber: licenseNumber, LicenseExpiration: licenseExpiration, Email: email, State: state, ImageUrl: logo, Active: active })

084. orgGrid.saveChanges();

085. viewModel.orgDataSource.sync();

086. viewModel.reloadOrganizations();

087. } else {

088. data.set("Name", name);

089. data.set("LicenseNumber", licenseNumber);

090. data.set("LicenseExpiration", licenseExpiration);

091. data.set("Email", email);

092. data.set("State", state);

093. data.set("ImageUrl", logo);

094. data.set("Active", active);

095. }

096.

097. $("#orgCreateModal").modal('hide');

098. $("#orgEditModal").modal('hide');

099.}

100.});

The error is occurring on this line:

viewModel.orgDataSource.add({ Name: name, LicenseNumber: licenseNumber, LicenseExpiration: licenseExpiration, Email: email, State: state, ImageUrl: logo, Active: active });

The error in FireBug is:

"Reference Error: Id is not defined - kendo.all.min.js line 25 > function"

I basically just copied this code from another grid that I created and it works perfectly fine on the other one. So I'm not sure what I'm missing here that is causing this error.

Grid

answered on 10 Feb 2016

9 answers

765 views

Disable server filtering on keypress

Hello,

I encountered problem with server side filtering. My datatabase table have like 100k rows. Iam presenting this 100k rows in kendoGrid using server filtering, paging and sorting. The problem is that whenever I type a single letter into filter input then grid makes a call to WebApi. Then again I type second letter then again call to WebApi is made. The problem is performance. I dont want grid to be calling my WebApi each letter. Is it possible to turn it off and make that only when I will unfocus input or click key Enter then the datasource.read() will be called?

Grid

answered on 10 Feb 2016