Questions on Kendo UI for jQuery Forum

6 answers

2.4K+ views

Hello, I've been trying to get some character counter code to work with the Kendo UI Editor control. The code for the counter is here: scriptiny.

It works great for the other controls I have on the page (textboxes and a file upload control), but for some reason I cannot get it to work with the editor control. The only code I have in the $("#editor").kendoEditor(); script block is "All Tools" code that I found on the demo page for the editor. But even if I take that out it doesn't work. Anyone have any suggestions on why it isn't working? Or maybe some sample code if you have implemented a character counter for the editor control.

Thanks,

David

Editor

answered on 28 Jul 2017

1 answer

240 views

[Solved] Bootstrap Theme Icon Color Changed

We recently updated from 2016.3.1028 to 2017.2.621. After this update, we noticed that while using the Bootstrap theme, icons like in the Grid are now using the Bootstrap blue color of #428bca. I confirmed this in the Grid demo that the icon colors have now all changed to blue. This looks really strange and is totally different from the previous version of the Bootstrap theme, in which icons were black. Was this an intentional change or a bug? Is there any easy way to go back to how it was?

General Discussions

answered on 28 Jul 2017

2 answers

562 views

Real Time Data with Angular 2 Kendo Grid...

Can we do the similar with Angular 2 Kendo grid?

http://www.telerik.com/forums/grid---real-time-data-updates

can you please share similar sample for Angular 2 Grid?

Grid

answered on 28 Jul 2017

1 answer

98 views

Angular 2 Kendo Grid- Column Reordering

Hi,

I am not able to find column reordering (using drag on browser) option. Is it possible in Angular 2 Kendo Grid?

Thanks

Atiraj

Grid

answered on 28 Jul 2017

1 answer

500 views

Multi filter - use client template data

If we have a client template on a column, is there an easy way to have the multi filter use that value?

columns.Bound(c => c.Logon).Filterable(f => f.Multi(true)).ClientTemplate("#= FullName #")

We want FullName in the filter dropdown.

Grid

answered on 28 Jul 2017

2 answers

1.3K+ views

How to enable multiple row selection programmatically

Hi. I have this grid

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

()

.Name("Something")

.Selectable(builder => builder.Type(GridSelectionType.Row).Mode(GridSelectionMode.Multiple).Enabled(false) )

.ClientRowTemplate(Html.Partial("Partials/Something").ToHtmlString())

.TableHtmlAttributes(new { @class = "table table-stripped" })

.Scrollable(scrollable => scrollable.Height(100).Enabled(true))

.Columns(columns =>

{

columns.Bound(h => h.Something).Title("Partner type").Width(120);

columns.Bound(h => h.Something).Title("Date").Width(120);

columns.Bound(h => h.Something).Title("Name");

}))

that has multiple row selection disabled.

This grid is populated when I select another grid. After that, I want to have multiple row selection enabled. I did set the grid.options.selectable to true, but it doesn't work.

How can I solve this?

Grid

answered on 28 Jul 2017

4 answers

577 views

Hierarchical Grid - Detail Grid rows not filtering on expanded row event correctly

Ok I have a hierarchical grid. One of the columns return in my SQL for both the Master Grid and Detail Grid is projectRoleId. I want to filter out roles that do not match the expanded rows projectRoleId. Currently , by following the kendo hierarchical grid example, I'm using the filter on the detailGrid like this:

filter: {
field: "projectRoleId", operator: "eq", value: e.data.projectRoleId
}

However all rows are still showing when I expand the master row.

This image shows the data returned to the Master Grid and Detail Grids.

http://imgur.com/9rJ0FVj

// INITIALIZE / CREATE UI ELEMENTS //

function initHierarchicalGrid() {

var hierGrid = $("#kgProjectGroupCapacityPlanning").kendoGrid({

dataSource: new kendo.data.DataSource({

transport: {

read: function (options) {

$.ajax(getHierarchicalGrid(options));

}

},

pageSize: 6,

serverPaging: true,

serverSorting: true,

serverFiltering: true,

schema: {

data: function (data) {

var res = JSON.parse(data.d);

return res;

},

model: getHierGridModel(),

total: function (response) {

var res = JSON.parse(response.d);

return res.length;

}

}),

//height: 600,

toolbar: setToolbarOptions(),

sortable: true,

pageable: true,

//detailInit: function(e) {

// e.detailRow.find(".grid").kendoGrid({ dataSource: e.data });

//},

detailInit: detailInit,

detailExpand: function(e) {

console.log(e.masterRow, e.detailRow);

},

dataBound: function () {

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

},

columns: [

{ field: "projectRoleId", visible: false, width: "110px" },

{ field: "rolename", width: "110px" },

{ field: "monthOne", title: "1/2017", width: "100px" }

]

//detailTemplate: "<div>ProjectRoleId: #: projectRoleId #</div><div>RoleName: #: rolename #</div><div>Month One: #: monthOne #</div>"

}).data("kendoGrid");

$('#btnCollapseAll').click(collapseAll);

$('#btnExpandAll').click(expandAll);

}

function detailInit(e) {

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

dataSource: new kendo.data.DataSource({

transport: {

read: function(options) {

$.ajax(getDetailRows(options,e.data.projectRoleId));

}

},

schema: {

data: function (data) {

var res = JSON.parse(data.d);

return res;

},

model: getDetailGridModel(),

total: function (response) {

var res = JSON.parse(response.d);

return res.length;

}

},

serverPaging: true,

serverSorting: true,

serverFiltering: true,

pageSize: 10,

filter: {

field: "projectRoleId", operator: "eq", value: e.data.projectRoleId

}

}),

scrollable: false,

sortable: true,

pageable: true,

columns: [

{ field: "projName", width: "110px" },

{ field: "sectorname", title: "Sector", width: "110px" },

{ field: "name", title: "Customer", width: "200px" },

{ field: "status", title: "Status", width: "100px" },

{ field: "monthOne", title: "1/2017", width: "100px" }

]

});

}

JavaScript ajax calls:

// READ

function getDetailRows(options,projectRoleId) {

var paramData = {

userId: userId,

projectRoleId: projectRoleId

};

return {

url: "ProjectGroupCapacityPlanningDashboard.aspx/GetDetailRowsForGrid",

data: JSON.stringify(paramData),

dataType: "json",

contentType: "application/json; charset=utf-8",

type: "POST",

success: function(result) {

options.success(result);

}, // notify the data source that the request succeeded

error: function(result) {

pageHelper.processAjaxError(result, notification);

options.error(result);

} // notify the data source that the request failed

}

function getHierarchicalGrid(options) {

var paramData = { userId: userId };

return {

url: "ProjectGroupCapacityPlanningDashboard.aspx/GetHierRowsForGrid",

data: JSON.stringify(paramData),

dataType: "json",

contentType: "application/json; charset=utf-8",

type: "POST",

success: function(result) {

options.success(result);

},

error: function (result) {

pageHelper.processAjaxError(result, notification);

options.error(result);

} // notify the data source that the request failed

}

This must be a simple fix I am hoping as my example is pretty similar to the one Telerik uses.

Thanks,

julian kish

Grid

answered on 28 Jul 2017

4 answers

227 views

grid with group: navigation only in one editable column

Helloi All,

I have a simple grid with 3 columns: section, question, and answer. Only answer column is editable. I need to:

1) hide group column(section)

2) don't allow user select a row and only allow a navigation in Answer column with Up/Down/Enter key down events

Please look at my example

http://dojo.telerik.com/@iakhmedov1/AbIlE

and correct the code to get it working as it is required

Thanks,

Igor

Grid

answered on 28 Jul 2017

2 answers

423 views

[Solved] Unauthorized error accessing kendo.common.css @font-face files cross-domain

After upgrading kendo we are getting the following error when accessing kendo.common.css cross-domain.

Failed to load resource: the server responded with a status of 401 (Unauthorized)

http://dev-sfri/Content/kendo/fonts/glyphs/WebComponentsIcons.woff?gedxeo
http://dev-sfri/Content/kendo/fonts/glyphs/WebComponentsIcons.ttf?gedxeo

At first after upgrading we had a CORS policy error which we fixed in the web.config by adding an origin header
<add name="Access-Control-Allow-Origin" value="*" />

But now I'm not sure how to authorize the font request.

Any ideas?

General Discussions

answered on 27 Jul 2017

1 answer

202 views

MultiSelect Clientside Filtering

I'm trying to filter the results of my query clientside using values selected from a Kendo MultiSelect menu. It filters properly when I select one option from the dropdown, but when I try to filter with two values for the same column, no results are returned.

It seems likely that this is because it is searching for rows where there are both selected values in the same column. Is there a way to change this so it is looking for one value or the other, instead of both?

I've attached a screenshot to demonstrate.

MultiSelect

answered on 27 Jul 2017