Questions on Kendo UI for jQuery Forum

13 answers

1.4K+ views

Refresh Filter AutoComplete when grid datasource is refreshed

Hello,

We have a grid with filter row mode enabled. The filters are either drop down lists, or autocomplete fields. When the grid is first initialized, the autocompletes are initialized correctly with their list of possible suggestions based on the data present in the grid (server side filtering is not enabled). On the grid we have a button which changes the datasource url of the grid and refreshes the data :

//change the URL of the datasource

grid.dataSource.options.transport.read.url = Worklist.buildWorklistUrl();

grid.dataSource.page(1);

grid.dataSource.read();

grid.refresh();

When we do this, the grid is updated and the new data set is shown like we want. However, it seems that the autocomplete filter field values are based on the old grid and don't reflect the new data.

I've tried to refresh the autocompletes manually after refreshing the grid to get them to reflect the new values, but no luck:

var inputs = grid.thead.find("tr").eq(1).find(".k-input");

$.each(inputs, function(idx, input) {

var autocomplete = $(input).data("kendoAutoComplete");

if (autocomplete) {

autocomplete.refresh();

}

});

Are there any suggestions about how to get those autocompletes to update when the grid contents are updated?

Thanks for the help

Grid

answered on 28 Jul 2017

6 answers

2.2K+ views

Editor Character Counter

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

170 views

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

513 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

84 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

457 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

511 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

158 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

359 views

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