Questions on Kendo UI for jQuery Forum

5 answers

219 views

Editor - No Visual Indicator that Text is Still highlighted when Formatting

When Highlighting text and choosing some formatting options the highlight disappears completely, though the text is still chosen.

Steps to Reproduce
1) Add some text to WYSIWYG
2) Highlight text
3) Choose dropdown options for - Font or Size

As actual result text is no longer visually highlighted (please see attached video as zip file - that's actually tar, I just renamed it as zip and split on two parts)

But in demo on the your site Text remains highlighted (http://demos.telerik.com/kendo-ui/editor/index). Any ideas how to fix it?

Editor

answered on 01 Dec 2017

1 answer

306 views

jQuery Range Slider in Angular Project

I'm using the jQuery implementation of the range slider in an angular project (because I don't see a range slider component for angular yet, only a single value slider). I have this working by including the scripts locally, however, I'd like to pull them in via npm upon the bundling of the app via webpack.

Here are the entries from my angular-cli.json. Webpack compiles successfully, however, scripts.bundle.js complains that the module related to kendo.all.js is not defined.

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/@progress/kendo-theme-default/dist/all.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "../node_modules/sortablejs/Sortable.min.js",
        "../node_modules/@progress/kendo-ui/js/kendo.all.js"
      ],

The result is that kendo.all.js looks the same as its entry in scripts.bundle.js.

I'm aware that I can include less than ALL to use the range slider, but I'm just trying to get this working first.

Slider

answered on 01 Dec 2017

1 answer

234 views

Collapsed groups expands after editing

Hi,

I'm trying to handle with expanding all collapsed groups after editing row (in inline method).

Here is example:

http://dojo.telerik.com/olusa

Try to collapse couple of groups and then edit some row - all groups will expand automatically. I suppose that such behavior is result of data binding. How to fix this? I suppose I should use some workaround, but I don't know what events should I look at.

Grid

answered on 01 Dec 2017

1 answer

134 views

Checkboxes in Grid - Batch editing

Hi ;)

I'm trying to create a grid with a column with a checkbox option. Like in http://demos.telerik.com/kendo-ui/grid/editing

Somehow in my example (and in yours) when I click once to use the checkbox it's not possible to edit it with a second click. Just using the space-bar I can change the status of the checkbox.

Is that the normal behavior?

I'd like to use the checkbox in batch editing without using the space-bar, just clicking on it. How can I make it possible?

Thank you in advance

Grid

answered on 01 Dec 2017

5 answers

915 views

Reload tab every time it is clicked

Hi,

My tabstrips are pulling in content via ajax.

I am looking for the ability to have the tabstrip selected load a fresh ajax call every time it is selected, not just the first time.

Please advise.

Thanks.

TabStrip

answered on 01 Dec 2017

2 answers

1.5K+ views

required validation on condition

HI,

I need to validate Model field as required only if models datasource has items. If var models = [ ] - I don't need to validate.

Thank you for your help.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>how to make required field on condition</title>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css"/>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>

<div id="grid"></div>
<script>
// array of all brands
var brands = [
{ brandId: 1, name: "Ford" },
{ brandId: 2, name: "BMW" }
];

// array of all models
var models = [
{ modelId: 1, name: "Explorer", brandId: 1},
{ modelId: 2, name: "Focus", brandId: 1},
{ modelId: 3, name: "X3", brandId: 2},
{ modelId: 4, name: "X5", brandId: 2}
];

$("#grid").kendoGrid({
dataSource: {
data: [
{ id: 1, brandId: 1, modelId: "" } // initial data item (Ford, Focus)
],
schema: {
model: {
id: "id",
fields: {
id: { editable: false } // the id field is not editable
}
}
}
},
editable: "inline", // use inline mode so both dropdownlists are visible (required for cascading)
columns: [
{ field: "id" },
{
// the brandId column
title: "Brand",
field: "brandId", // bound to the brandId field
template: "#= brandName(brandId) #", // the template shows the name corresponding to the brandId field
editor: function(container) { // use a dropdownlist as an editor
// create an input element with id and name set as the bound field (brandId)
var input = $('<input id="brandId" required name="brandId">');
// append to the editor container
input.appendTo(container);

// initialize a dropdownlist
input.kendoDropDownList({
dataTextField: "name",
optionLabel: "Select...",
dataValueField: "brandId",
dataSource: brands // bind it to the brands array
}).appendTo(container);
}
},
{
//The modelId column
title: "Model",
field: "modelId", // bound to the modelId field
template: "#= modelName(modelId) #", //the template shows the name corresponding to the modelId field
editor: function(container) { // use a dropdownlist as an editor
var input = $('<input id="modelId" name="modelId">');
input.appendTo(container);
input.kendoDropDownList({
dataTextField: "name",
dataValueField: "modelId",
optionLabel: "Select...",
cascadeFrom: "brandId", // cascade from the brands dropdownlist
dataSource: models // bind it to the models array
}).appendTo(container);
}
},
{ command: "edit" }
]
});

function brandName(brandId) {
for (var i = 0; i < brands.length; i++) {
if (brands[i].brandId == brandId) {
return brands[i].name;
}
}
}

function modelName(modelId) {
if (modelId == null || modelId == "") {
return "";
}
for (var i = 0; i < models.length; i++) {
if (models[i].modelId == modelId) {
return models[i].name;
}
}
}
</script>
</body>
</html>

Grid

answered on 30 Nov 2017

3 answers

1.0K+ views

Some issues with treeview lazy loading (on-demand)

Hi Telerik, we use the kendo treeview and we need to load-on-demand subitems.

We have some issues.

1. When the treeview have lots of subitems, it generates too many "databind" when we expand it, if loadOnDemand = false.
But, that way, we are able to load our subitems correctly.

2. So, we prefer to use loadOnDemand = false, that generates only 2 databind, 1 when we expand, and 1 other when we set the data.

But, we're unable to set the data, if we don't add a "setTimeout", because the data item is incomplete! It looks like the "expand" event is raising too quickly, .items list doesn't contains our "loading..." item, and if I set new data to it, nothing happen.

If I add a setTimeout,the argument is ok and I can load my subitems.

So, my suggetsions are:

1. do not generate too many databind event if loadOnDemand = false?

2. can you raise the "expand" event when the data is really ready to be used?

Or, is there something we're doing wrong? We can continue using the settimeout, in fact,it works in our case because we do an "ajax" call. But, if my data is in "cache" and I don't need ajax call, I must do a setTimeout.

Sample:

https://dojo.telerik.com/isuGOn/134

Thank you

TreeView

answered on 30 Nov 2017

4 answers

738 views

How to prevent grid filter reset on push update

I am using kendo grid with signalr push updates.

I also have code for server filtering and paging working.

It all works apart from when a filter menu is open and a push update occurs. I have code intended to prevent the update and data binding - however it isn't preventing the filter menu getting reset and any filter text being cleared.

Thanks in advance..

var hubUrl = "/signalr";

var connectionGrid = $.hubConnection(hubUrl, { useDefaultPath: false });

var hubGrid = connectionGrid.createHubProxy("eventAlertsHub");

var hubGridStart = connectionGrid.start();

////////////////////////////////////////////////

// Kendo grid

$("#grid").kendoGrid({

dataSource: {

push: onPush,

type: "signalr",

transport: {

signalr: {

promise: hubGridStart,

hub: hubGrid,

server: {

read: "read"

},

client: {

read: "read",

update: "update",

destroy: "destroy",

create: "create"

}

},

schema: {

data: "Data",

total: "Total",

model: {

id: "id",

fields: {

id: {

editable: false,

nullable: true

},

LogTime: { type: "date" },

OperatingMode: { type: "string" },

StatusDescription: { type: "string" },

LogSeverity: { type: "number" },

MessageSource: { type: "string" },

MessageSourceDetails: { type: "string" }

}

},

sort: { field: "LogTime", dir: "desc" },

pageSize: 20,

serverPaging: true,

serverFiltering: true,

serverSorting: false

},

filterable: true,

sortable: true,

pageable: true,

scrollable: true,

height: 180,

columns: [{

field: "LogTime",

width: "150px",

title: "Timestamp",

format: "{0:dd/MM/yyyy HH:mm:ss}",

filterable: {

ui: "datetimepicker"

}

}, {

field: "MessageSource",

width: "10%",

title: "Source",

values: [

{ text: "DATA_BROKER", value: "DATA_BROKER" },

{ text: "RULES_ENGINE", value: "RULES_ENGINE" },

{ text: "UI_SUBSYSTEM", value: "UI_SUBSYSTEM" },

{ text: "DATA_PUBLISHER", value: "DATA_PUBLISHER" }

],

}, {

field: "MessageSourceDetails",

width: "15%",

title: "Source Details",

filterable: false

}

,{

field: "OperatingMode",

title: "Status",

width: "10%",

values: [

{ text: "STARTUP", value: "STARTUP" },

{ text: "INITIALISATION", value: "INITIALISATION" },

{ text: "NORMAL", value: "NORMAL" },

{ text: "STOPPING", value: "STOPPING" }

],

}, {

field: "StatusDescription",

width: "55%",

title: "Message",

filterable: false

}, {

field: "LogSeverity",

width: "10%",

values: [

{ text: "DEBUG", value: 1 },

{ text: "INFO", value: 2 },

{ text: "WARN", value: 3 },

{ text: "ERROR", value: 4 },

{ text: "FATAL", value: 5 }

],

title: "Severity"

}

]

});

function onPush(e) {

console.log("Push update received type = " + e.type);

//var notification = $("#notification").data("kendoNotification");

//notification.success(e.type);

//var dataSource = $grid.dataSource;

// Check if a filter menu is open. If so, prevent binding, for binding will interfere with everyting typed in the filter

//var $filtermenu = $(".k-filter-menu");

if ($('.k-animation-container').is(":visible")) {

console.log("Filter is open push update binding cancelled ");

e.preventDefault();

}

//if (e.type === "create") {

// // Sort grid programmatically

// // http://www.telerik.com/forums/sorting-a-grid-programmatically

// dataSource.sort(dataSource._sort);

//}

};

$("#grid").data('kendoGrid').bind("dataBinding", function (e) {

console.log("Binding");

// Check if a filter menu is open. If so, prevent binding, for binding will interfere with everyting typed in the filter

// http://www.telerik.com/forums/prevent-kendo-grid-data-bind-events-when-updating-multiple-model-properties

if ($('.k-animation-container').is(":visible")) {

e.preventDefault();

console.log("Prevent binding");

}

});

Grid

answered on 30 Nov 2017

2 answers

273 views

Kendo UI Grid XML showing data as [object Object]

Hi
I have a Kendo UI grid, that will only display values like [object object]. I have the datasource for the grid working so I know there is data.

This is my code

var ds = new kendo.data.DataSource({

transport: {

read: {

url: dataUrl + "data_xml.p",

contentType: "text/xml",

method: "POST",

processData: false,

dataType: "xml",

},

parameterMap: function() {

return formxml;

}

},

schema: {

data: "/ProDataSet/ttCustomers",

type: "xml"

},

model: {

id: "id",

fields: {

first_name: "first_name/text()",

last_name: "last_name/text()",

email: "email/text()",

num_tel: "num_tel/text()",

adresse: "adresse/text()",

}

});

Data from server :

<ProDataSet xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">

<tt_action>

<sessionId />

<action>getdata</action>

<vstatus>0</vstatus>

<vmsg />

<field1 />

<field2 />

<field3 />

<field4 />

</tt_action>

<ttCustomers>

<id>4</id>

<first_name>Aguistin</first_name>

<last_name>Scoles</last_name>

<email>ascoles0@thetimes.co.uk</email>

<num_tel>+976 222 689 0571</num_tel>

<adresse>8 Elgar Park</adresse>

</ttCustomers>

<ttCustomers>

<id>5</id>

<first_name>Jada</first_name>

<last_name>Brigg</last_name>

<email>jbrigg1@scribd.com</email>

<num_tel>+86 114 303 0017</num_tel>

<adresse>6011 Birchwood Point</adresse>

</ttCustomers>

<ttCustomers>

<id>7</id>

<first_name>Corenda</first_name>

<last_name>Bulleyn</last_name>

<email>cbulleyn2@google.com</email>

<num_tel>+357 573 337 0942</num_tel>

<adresse>159 Sycamore Hill</adresse>

</ttCustomers>

<ttCustomers>

<id>8</id>

<first_name>Nadeen</first_name>

<last_name>Birkin</last_name>

<email>nbirkin3@answers.com</email>

<num_tel>+420 265 225 8304</num_tel>

<adresse>6600 Manitowish Drive</adresse>

</ttCustomers>

<ttCustomers>

<id>9</id>

<first_name>Cassy</first_name>

<last_name>Wickerson</last_name>

<email>cwickerson4@ucoz.com</email>

<num_tel>+237 388 473 9219</num_tel>

<adresse>823 Rockefeller Alley</adresse>

</ttCustomers>

<ttCustomers>

<id>10</id>

<first_name>Dene</first_name>

<last_name>Palk</last_name>

<email>dpalk5@omniture.com</email>

<num_tel>+62 395 367 4730</num_tel>

<adresse>2053 Kennedy Center</adresse>

</ttCustomers>

<ttCustomers>

<id>11</id>

<first_name>Garreth</first_name>

<last_name>Clayal</last_name>

<email>gclayal6@sogou.com</email>

<num_tel>+234 851 283 4750</num_tel>

<adresse>2243 Manitowish Plaza</adresse>

</ttCustomers>

<ttCustomers>

<id>13</id>

<first_name>Witty</first_name>

<last_name>Kilgour</last_name>

<email>wkilgour7@cmu.edu</email>

<num_tel>+880 457 881 2601</num_tel>

<adresse>95 Sage Way</adresse>

</ttCustomers>

<ttCustomers>

<id>14</id>

<first_name>Abbey</first_name>

<last_name>Banaszczyk</last_name>

<email>abanaszczyk8@timesonline.co.uk</email>

<num_tel>+7 813 501 5869</num_tel>

<adresse>97 Fieldstone Alley</adresse>

</ttCustomers>

<ttCustomers>

<id>15</id>

<first_name>Byrom</first_name>

<last_name>Beachamp</last_name>

<email>bbeachamp9@buzzfeed.com</email>

<num_tel>+86 879 807 3783</num_tel>

<adresse>83369 Golf Drive</adresse>

</ttCustomers>

<ttCustomers>

<id>16</id>

<first_name>Reeva</first_name>

<last_name>Moresby</last_name>

<email>rmoresbya@nba.com</email>

<num_tel>+93 131 451 6825</num_tel>

<adresse>5 Sachtjen Parkway</adresse>

</ttCustomers>

<ttCustomers>

<id>17</id>

<first_name>Hadlee</first_name>

<last_name>Klisch</last_name>

<email>hklischb@hostgator.com</email>

<num_tel>+880 783 928 3370</num_tel>

<adresse>56 Elka Street</adresse>

</ttCustomers>

<ttCustomers>

<id>18</id>

<first_name>Marie</first_name>

<last_name>Mustoo</last_name>

<email>mmustooc@microsoft.com</email>

<num_tel>+351 555 677 0044</num_tel>

<adresse>7016 Hovde Circle</adresse>

</ttCustomers>

<ttCustomers>

<id>20</id>

<first_name>Georgeanne</first_name>

<last_name>Zecchii</last_name>

<email>gzecchiid@etsy.com</email>

<num_tel>+46 368 291 6723</num_tel>

<adresse>10799 Londonderry Drive</adresse>

</ttCustomers>

<ttCustomers>

<id>21</id>

<first_name>Norah</first_name>

<last_name>Levane</last_name>

<email>nlevanee@usa.gov</email>

<num_tel>+86 636 328 8366</num_tel>

<adresse>20976 Hanover Alley</adresse>

</ttCustomers>

<ttCustomers>

<id>22</id>

<first_name>Timi</first_name>

<last_name>Abramson</last_name>

<email>tabramsonf@omniture.com</email>

<num_tel>+30 973 316 0947</num_tel>

<adresse>461 Bellgrove Way</adresse>

</ttCustomers>

<ttCustomers>

<id>23</id>

<first_name>Kirsten</first_name>

<last_name>Hearnden</last_name>

<email>khearndeng@ca.gov</email>

<num_tel>+86 818 429 5160</num_tel>

<adresse>0 Melvin Trail</adresse>

</ttCustomers>

<ttCustomers>

<id>24</id>

<first_name>Tommie</first_name>

<last_name>Haggarty</last_name>

<email>thaggartyh@shutterfly.com</email>

<num_tel>+502 320 246 3017</num_tel>

<adresse>76 Parkside Parkway</adresse>

</ttCustomers>

<ttCustomers>

<id>25</id>

<first_name>Orella</first_name>

<last_name>Gossan</last_name>

<email>ogossani@mysql.com</email>

<num_tel>+86 435 661 2497</num_tel>

<adresse>0 Blue Bill Park Parkway</adresse>

</ttCustomers>

<ttCustomers>

<id>26</id>

<first_name>Melly</first_name>

<last_name>Loidl</last_name>

<email>mloidlj@state.tx.us</email>

<num_tel>+376 969 321 3040</num_tel>

<adresse>59541 Forest Hill</adresse>

</ttCustomers>

<ttCustomers>

<id>28</id>

<first_name>Yettie</first_name>

<last_name>Petranek</last_name>

<email>ypetranekk@clickbank.net</email>

<num_tel>+970 458 555 6703</num_tel>

<adresse>3 Montana Avenue</adresse>

</ttCustomers>

<ttCustomers>

<id>29</id>

<first_name>Natal</first_name>

<last_name>Bauman</last_name>

<email>nbaumanl@diigo.com</email>

<num_tel>+86 418 984 0016</num_tel>

<adresse>03252 Division Plaza</adresse>

</ttCustomers>

<ttCustomers>

<id>30</id>

<first_name>Joela</first_name>

<last_name>Bendon</last_name>

<email>jbendonm@yolasite.com</email>

<num_tel>+357 836 602 1041</num_tel>

<adresse>056 Caliangt Hill</adresse>

</ttCustomers>

<ttCustomers>

<id>31</id>

<first_name>Timothy</first_name>

<last_name>Antonsen</last_name>

<email>tantonsenn@123-reg.co.uk</email>

<num_tel>+86 767 723 8152</num_tel>

<adresse>3 Tennessee Trail</adresse>

</ttCustomers>

<ttCustomers>

<id>32</id>

<first_name>Joye</first_name>

<last_name>Bourgeois</last_name>

<email>jbourgeoiso@t-online.de</email>

<num_tel>+33 398 217 3274</num_tel>

<adresse>14377 Spenser Crossing</adresse>

</ttCustomers>

</ProDataSet>

Grid code :

$('#customers-list').kendoGrid({

dataSource: ds,

toolbar: ["create", "save", "excel"],

excel: {

fileName: "Export.xlsx"

},

sortable: true,

columns: [{

field: "first_name",

title: "Nom",

}, {

field: "last_name",

title: "Prénom"

}, {

field: "email",

title: "Adresse Email",

}, {

field: "num_tel",

title: "Numéro de téléphone"

}, {

field: "adresse",

title: "Adresse"

}, {

command: ["edit", "destroy"],

title: " ",

width: "300px"

}],

editable: "popup",

pageable: {

pageSize: 5,

}

});

Grid

answered on 29 Nov 2017

3 answers

1.3K+ views

Dynamic schema based on data

I've built a function that loops through my data set and builds an array of the schema and detects what the data type is for each column (this is similar to excel in that it loops through the first few rows of data to determine its data type). This function returns an array that is similar structure to how the datasource schema is defined.

My problem is I cannot then figure out how to get this information into the data source configuration. calling the array directly into the datasource doesn't seem to work.

Below you can see I'm assigning the variable schema to another function that has a response similar to the one in the code block at the bottom of this post.

The full function is like so

01.function create_kendo_data_source(path, pagesize, rows_to_check_for_schema, callback) {

02. if(pagesize == undefined) {

03. pagesize = 20;

04.

05. }

06.

07. ajax_json_post(path, null, function(response) { //success

08. var schema = create_kendo_data_source_schema(response);

09.

10. console.log(schema);

11.

12. var new_schema = {

13. id: "data",

14. fields: []

15.

16. };

17.

18. for(var i in schema) {

19. var item = schema[i];

20.

21. new_schema.fields.push({

22. [item.column]: {

23. type: item.type

24.

25. }

26.

27. });

28.

29. }

30.

31. var ds = new kendo.data.DataSource({

32. transport: {

33. read: function (options) {

34. options.success(response);

35.

36. }

37.

38. },

39. pageSize: pagesize,

40. schema: { new_schema

41.

42. }

43.

44. });

45.

46. ds.read();

47.

48. console.log(ds);

49.

50. if(typeof callback === "function") {

51. callback(ds);

52.

53. return true;

54.

55. } else {

56. return false;

57.

58. }

59.

60. }, function() { //error

61. return false;

62.

63. });

64.

65.}

1.1

2.:

3.{column: "column1_name", type: "string"}

4.2

5.:

6.{column: "column2_name", type: "number"}

Data Source

answered on 29 Nov 2017