Questions on Kendo UI for jQuery Forum

2 answers

295 views

is it possible to store existing grid events before unbinding them

I have the pleasure of dealing with the code someone else has written that affects every grid on our site (about 100).
Here is the problem. His default "DataBound" event resizes the action column we have at the left of our grids so that it matches the width of the displayed buttons. Makes sense. However, he has code in there that when the grid is intiialized, unbinds the current databound event then rebinds it to his special databound event. It looks like he assumed that this is the only usage we would ever have for databound.

I discovered this when i created a custom databound on a grid, and it was never called.

Is there a way to modify this code so that it stores the current databound event and reapplies it?

gridSelector = gridSelector || "#grid";

// scoped function that can be assigned to the dataBoundEvent and called directly (below)

var doGridDataBound = function (me, gridSelector, grid) {

me.InitMenu(gridSelector);

setTimeout(function () {

grid.autoFitColumn(actionColIndex);

}, 500);

};

var grid = $(gridSelector).data("kendoGrid");

// delay "connecting" the dataBound event handler for 250ms to give time for other event handlers to be assigned first (we need this one to "fire" last)

// specifically - customKendoButtons_OnDataBound needs to fire earlier than this one to ensure that the buttons are visible/fully defined before "autoFit" is executed

grid.unbind("dataBound").bind("dataBound", function () {

doGridDataBound(me, gridSelector, grid);

});

/* if any data rows already exist, then the dataBound event will not fire again, so fire it now */

if ($(gridSelector).find("input.gridPopupHelper").length)

doGridDataBound(me, gridSelector, grid);

Grid

answered on 28 Aug 2020

1 answer

174 views

Alternative map sources via urlTemplate

Hi,

We have the Open Street Map example working, but in the documentation, it says...

"Displaying raster maps from popular online providers such as OpenStreetMap, OpenWeatherMap, ArcGIS, and so on."

Does Telerik or anyone else have any working examples of using the Kendo UI Map control with different providers. Either ArcGIS or any other service?

Much appreciated,

George

Map

answered on 28 Aug 2020

1 answer

6.8K+ views

UTC DateTime handling with DatePicker and Kendo UI Grid Edit Dialog

We have a strange issue where the edit template for our grid is causing issues when editing dates.The dates are stored on the server in UTC timezone.
We use the following pattern to set the timezone:-
private DateTime _minDate;
public DateTime MinDate        {
    get { return _minDate; }
    set { _minDate = DateTime.SpecifyKind(value, DateTimeKind.Utc); }
}The dates get loaded into the grid using WebApi OData services.{"Id":50088,"ProductId":101437,"Valor":"12224000","ISIN":"CH0122240002","Description":"Outperformance Bonus Certificate, Multi Shares","Provider":"CSIB","AlertedTicker":"KO UN","ProtectionPercentage":1.0,"ProtectionType":"Protection Lost","UnderlyingCurrency":"USD","BarrierLevel":190.0,"BarrierPercentage":70.0,"BarrierType":"Low","BarrierId":0,"EventStructureId":170378,"Date":"2013-11-20T00:00:00Z","Comment":null,"Confirm":false,"Reject":false}The OData service correctly serializes the UTC date and the date get to the UI intact.After editing the date using a date picker control but just typing using the keyboard the data is sent back to the server in the wrong format.{ "odata.metadata":"http://localhost:51850/web/odata/$metadata#PendingBarrierAlerts/@Element","Id":50088,"ProductId":101437,"Valor":"12224000","ISIN":"CH0122240002","Description":"Outperformance Bonus Certificate, Multi Shares","Provider":"CSIB","AlertedTicker":"KO UN","ProtectionPercentage":1.0,"ProtectionType":"Protection Lost","UnderlyingCurrency":"USD","BarrierLevel":190.0,"BarrierPercentage":70.0,"BarrierType":"Low","BarrierId":0,"EventStructureId":170378,"Date":"2013-11-20T23:00:00Z","Comment":null,"Confirm":false,"Reject":false}Notice the date has a changed time !How can we edit UTC dates in a grid and correctly return them to the server using OData as a transport and a remote datasource ?

Grid

answered on 28 Aug 2020

2 answers

98 views

Inline Grid combobox get searchtextvalue for serverFiltering

This my Editor

function userNameAutoCompleteEditor(container) {

$('<input id="UserId" name="UserId">')

.appendTo(container)

.kendoComboBox({

autoBind: false,

dataTextField: "UserName",

dataValueField: "UserId",

filter: "contains",

minLength: 3,

valuePrimitive: true,

dataSource: new kendo.data.DataSource({

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

serverFiltering: true,

transport: {

read: {

url: '../Warehouse/SearchUser' ,

data: function () {

debugger;

UserSearcText:"asd"

}

},

}),

});

}

///Mvar grid = new BaseGrid('grdWarehouse_OnWarehouseUserRelation');
grid._batch = false;
grid._dataSourceAutoSync = false;
grid._toolbar = ['create'/*, 'save', 'cancel'*/];
grid._editable = {
mode: "inline",
create: true,
update: true,
destroy: true,

};
grid._autoBind = false;
grid._schemaMethod = {
model: {
id: 'Id',
fields: {
Id: { editable: false },
//User: { defaultValue: { UserId: '', UserName: '' } },

}
}
};
grid._columns.push(grid.GridColumn('Id', null, '200px', null, null, null, null, null, null, null, true));
//grid._columns.push(grid.GridColumn('User', 'User', '200px', null, "#=User.UserName#", null, null, null, null, null, null, null, null, null, userNameAutoCompleteEditor));
grid._columns.push(grid.GridColumn('UserId', 'User', '200px', null,'#=modelName(this)#', null, null, null, null, null, null, null, null, null, userNameAutoCompleteEditor));
grid._columns.push(grid.GridColumn(null, ' ', '200px', { style: 'text-align:right' }, null, null, null, null, null, null, null, null, null, ['edit', 'destroy']));

grid._cancelMethod = function (e) {
var uid = $("#grdWarehouse_OnWarehouseUserRelation").data("kendoGrid").dataItem($(e.container).closest("tr")).uid
dataSource = $("#grdWarehouse_OnWarehouseUserRelation").data("kendoGrid").dataSource
var item = dataSource.getByUid(uid);
dataSource.cancelChanges(item);
};

//My problem ı need filter text to send the controller.But I cant catch searc text CAN YOU HELP ME!!!!??????????

This my grid

01.var grid = new BaseGrid('grdWarehouse_OnWarehouseUserRelation');

02. grid._batch = false;

03. grid._dataSourceAutoSync = false;

04. grid._toolbar = ['create'/*, 'save', 'cancel'*/];

05. grid._editable = {

06. mode: "inline",

07. create: true,

08. update: true,

09. destroy: true,

10.

11. };

12. grid._autoBind = false;

13. grid._schemaMethod = {

14. model: {

15. id: 'Id',

16. fields: {

17. Id: { editable: false },

18. //User: { defaultValue: { UserId: '', UserName: '' } },

19.

20. }

21. }

22. };

23. grid._columns.push(grid.GridColumn('Id', null, '200px', null, null, null, null, null, null, null, true));

24.

//grid._columns.push(grid.GridColumn('User', 'User', '200px', null, "#=User.UserName#", null, null, null, null, null, null, null, null, null, userNameAutoCompleteEditor));

25. grid._columns.push(grid.GridColumn('UserId', 'User', '200px', null,'#=modelName(this)#', null, null, null, null, null, null, null, null, null, userNameAutoCompleteEditor));

26. grid._columns.push(grid.GridColumn(null, ' ', '200px', { style: 'text-align:right' }, null, null, null, null, null, null, null, null, null, ['edit', 'destroy']));

27.

28. grid._cancelMethod = function (e) {

29. var uid = $("#grdWarehouse_OnWarehouseUserRelation").data("kendoGrid").dataItem($(e.container).closest("tr")).uid

30. dataSource = $("#grdWarehouse_OnWarehouseUserRelation").data("kendoGrid").dataSource

31. var item = dataSource.getByUid(uid);

32. dataSource.cancelChanges(item);

33. };

ComboBox

answered on 28 Aug 2020

1 answer

247 views

How do I do sorting if I'm binding to a json file?

Due to some performance issues on the application. I need to do the binding via a json file instead of using an api. However, I was running into an issue doing sorting/filtering.

The application displays a list of data. It needs to filter data by a date range.

Could someone provide me a direction on what I need to do?

Grid

answered on 27 Aug 2020

9 answers

2.1K+ views

Exporting large Kendo grid dataset

I found the following section regarding exporting large datasets from the Kendo Grid:

http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/excel-export#use-server-side-processing

We currently have this exact need, but I am unable to find any code giving an example of how to tie the grid data to the TDP library. The closest I can find relating to exporting with this library is http://docs.telerik.com/devtools/document-processing/libraries/radspreadstreamprocessing/export but the code samples are not closely related to my situation. Can you provide or point me to some code samples that show how to process a large data set from a Kendo grid?

Thank you.

Grid

answered on 27 Aug 2020

5 answers

622 views

Showing Tooltips for disabled items

Is there a solution (or workaround) to the following problem:

Tooltips are only displayed for active ("enabled") listbox items.

I have two linked listboxes (ListBoxA and ListBoxB). ListBoxA shows valid and invalid entries. Invalid entries are disabled in ListBoxA so that they cannot be added to ListBoxB. I want to display tooltips for all entries in ListBoxA so that the user can see why an entry may be is disabled.

Sample code https://jsfiddle.net/chstorb/b2u9cowd/

Kind regards,

Chris

ListBox

answered on 27 Aug 2020

2 answers

102 views

Local CRUD Operations doesn't work with kendo.data.Model.define

I've modified the first example at https://docs.telerik.com/kendo-ui/framework/datasource/crud by using a model that is strictly typed with kendo.data.Model.define instead of using the flat JSON object array. If I click on the edit button in a row in the grid and change the value of "Units in Stock" and then click on the cancel button, the change will NOT be discarded. The error "kendo.all.min.js: 27 Uncaught TypeError: n.wrap is not a function" is displayed in the browser's developer console.

What do I have to change so that the example with kendo.dataModel.define works correctly?

Sample code https://jsfiddle.net/chstorb/pq45mn19/

Kind regards,

Chris

Data Source

answered on 27 Aug 2020

2 answers

163 views

Multiselect options with filtration in kendo drop downlist

HI, I want to have a kendo drop down list with multiselect and filtration options into it. I don't want to use kendo multiselect widget.

I need to have only kendo dropdownlist with multiselect and filter option so that i can select the options from the drop down and display into my custom div container.

Kindly suggest any option for this. please refer the screen shot.

DropDownList

answered on 26 Aug 2020

5 answers

1.6K+ views

KendoUI NumericTextBox output type is “text” instead of “number”

I am using KendoUI components to write a mobile friendly website. I've come across my first issue with the KendoUI controls. I have an Input DOM element as below:

<input type="number" id="myNumberInput" min="1" max="10" />

and the javascript behind this is as follows:

var inputDOM = $("#myNumberInput");

inputDOM.kendoNumericTextBox({format: "#"});

after the kendo control has been created, both the new input tag created by kendo and the old ones have both had their "type" properties set to "text" instead of "number". This has now completely removed the benefits on a phone where a context specific (i.e a number pad) is displayed when a "number" type input is selected.
Is there any way I can change the type property back to "number", or is there anything i'm missing?.
I can change the type of the original input object by just doing the below after the kendo control is made

inputDOM.prop("type", "number");

but this doesn't help the actual control now visible to the user. I've also tried the wrapper and element properties on the numericTextBox object as below

inputDOM.data("kendoNumericTextBox").element.prop("type", "number"); inputDOM.data("kendoNumericTextBox").wrapper.prop("type", "number");

but this did not seem to change the property of the visible control, the "element" only changed the value of the original now hidden Input element.
Any ideas where i've gone wrong, or how I can achieve this?

NumericTextBox

answered on 26 Aug 2020