Questions on Kendo UI for jQuery Forum

3 answers

329 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

105 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

213 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

111 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

113 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

946 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

622 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

752 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

1 answer

789 views

[Solved] Dynamic vertical line in charts

I have to create a line chart that will include some series and a vertical line whose position can be modified dynamically after the creation of the chart. I'm using the property notes to display the vertical line:

notes: {

line: {

length: 99999999,

color: "#ff0000"

},

// initial note (vertical line)

data: [{

value: dates[0]

}]

}

The position of the vertical line is updated by external events with the following code:

element.data("kendoChart").setOptions({