Questions on Kendo UI for jQuery Forum

1 answer

2.2K+ views

I have listView bind to dataSource and pager also bind to the same dataSource. When I change pageSize I want to store new value, so the next time user load page I can set pageSize to his last choice.

I try dataSource change event, but it is not fired. There is also no events on pager.

Data Source

answered on 27 Feb 2019

7 answers

1.3K+ views

Conditionally Hidden Column Causes Display Issues

I have a column that I want hidden conditionally based on user input. As I have my grid set up now, the column starts off hidden and everything displays properly, however if the user switches to make the hidden column visible, kendo grid just messes up its display:

01.function displayKendo(response){

02. var paymentMethod = $("#NS-pymntSchedule-payment-selector").val();

03. var hiddenInd = false;

04. if(paymentMethod === "getAll"){

05. hiddenInd = true;

06. }

07. var grid = $("#NSpaymentKendo").kendoGrid({

08. columns:[

09. {headerAttributes:{"class": "",style: "text-align:left;font-weight:700;font-style:italic;",},width:45,

10. },

11. hidden:hiddenInd,

12. },

13. {title:"Data 1",field:"field1",headerAttributes:{"class": "",style: "text-align:left;font-weight:700;font-style:italic;",},},

14. {title:"Data 2",field:"field2",headerAttributes:{"class": "",style: "text-align:left;font-weight:700;font-style:italic;",},},

15. {title:"Data 3",field:"field3",headerAttributes:{"class": "",style: "text-align:left;font-weight:700;font-style:italic;",},},

16. {title:"Data 4",field:"field4",headerAttributes:{"class": "",style: "text-align:left;font-weight:700;font-style:italic;",},},

17. {title:"Data 5",field:"field5",headerAttributes:{"class": "",style: "text-align:left;font-weight:700;font-style:italic;",},},

18. {title:"Data 6",field:"field6",headerAttributes:{"class": "",style: "text-align:left;font-weight:700;font-style:italic;",},},

19. {title:"Data 7",field:"field7",headerAttributes:{"class": "",style: "text-align:left;font-weight:700;font-style:italic;",},},

20. {title:"Data 8",field:"field8",headerAttributes:{"class": "",style: "text-align:left;font-weight:700;font-style:italic;",},},

21. {title:"Data 9",field:"field9",headerAttributes:{"class": "",style: "text-align:left;font-weight:700;font-style:italic;",},},

22. ],

23. dataSource:{

24. data:response,

25. pageSize:10,

26. schema: {

27. model: {

28. fields:{},

29. }

30. },

31. },

32. pageable: {

33. pageSizes: true,

34. buttonCount: 5

35. },

36. columnMenu: true,

37. allowCopy: true,

38. sortable: {

39. mode: "multiple",

40. allowUnsort: true,

41. showIndexes: true

42. },

43. reorderable: true,

44. resizable: true,

45. noRecords: {

46. template: "<br> No data available. <br>"

47. },

48. filterable: true,

49. groupable: true,

50. pageable: {

51. refresh: false,

52. pageSizes: false,

53. buttonCount: 5

54. },

55. editable:false,

56. })

57.

58. grid.data("kendoGrid").refresh();

59.}

Attached are screenshots showing before and after

Thanks, in advance.

Grid

answered on 26 Feb 2019

3 answers

1.7K+ views

Bind Select Column to Model Field

We're using the select column described here: https://demos.telerik.com/aspnet-mvc/grid/checkbox-selection

Is there a way (preferably in the MVC Grid) to bind that column to a boolean field on the grid row model, so that when the box is checked the field is set to true and when unchecked set to false?

Grid

answered on 26 Feb 2019

1 answer

135 views

tagTemplate

are you considering adding a tagTemplate (like multiselect: https://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect/configuration/tagtemplate) to DropDownTree?

DropDownTree

answered on 26 Feb 2019

8 answers

559 views

Treelist multicolumn headers styling issues

I am using Treelist Multicolumn headers to apply multiple columns in treelist. I have been facing an issue when applying attributes & headerAttributes properties. I tried implementing it in the below link example, but it doesn't works. I found there is a bug reported in Github related to this issue, but not sure whether its fixed or available in the latest version. Is there any fixes ? Thanks.

https://dojo.telerik.com/@paulrajj/iJifOwas

TreeList

answered on 26 Feb 2019

1 answer

163 views

telerik kendo chart not binding to string

I am new to telerik kendo chart I have created a string that is being returned from an ashx page. I want the x Axis to be the date has in the month and year and for each date there will be two box going up to the number.

ASHX.CS Page

string JSON = sb.ToString(); context.Response.ContentType = "text/json"; context.Response.Write(JSON);

Returns

[{"Date":"2/2018""Images":"199956""ImagesDownloads":"540903"},{"Date":"3/2018""Images":"226606""ImagesDownloads":"635068"}]

JS Page

Chat

answered on 25 Feb 2019

1 answer

113 views

How to integrate Kendo Progressbar into Grig column ising template?

We want to use Kendo vertical progressbar in one of our grig (basic usage) column (named "Zero"). All matherials were took from spring demos.

We have tried to use basic html progress-bar (template="<progress max='100' value='75' style='transform: rotate(-90deg); height: 40px; background-color: \#d40000'></progress></div>'"/>) and it's work correctly (but we already have some problems with style - we can't change progressbar color).

However, when we tried to use:

template="<kendo:grid name='grid' groupable='true' sortable='true' style='height:550px;'>"

it stop worked.

Hull code:

<kendo:grid name="grid" groupable="true" sortable="true" style="height:550px;">
<kendo:grid-pageable refresh="true" pageSizes="true" buttonCount="5">
</kendo:grid-pageable>

<kendo:grid-columns>

<kendo:grid-column title="Zero" field="zero" width="470" template="<kendo:grid name='grid' groupable='true' sortable='true' style='height:550px;'>"
/>

<kendo:grid-column title="Contact Name" field="contactName" width="240"
template="<div class='customer-photo' style='background-image: url(../resources/web/Customers/#:data.customerId#.jpg);'></div><div class='customer-name'>#: contactName #</div>">
</kendo:grid-column>
<kendo:grid-column title="Contact Title" field="contactTitle" />
<kendo:grid-column title="Company Name" field="companyName" />
<kendo:grid-column title="Country" field="country" width="150" />
</kendo:grid-columns>

Grid

answered on 25 Feb 2019

4 answers

553 views

Stopping navigation

I am trying to stop the navigation on the Calendar to use it for displaying information. Still need the ability to select a day.

I have tried setting navigate event with

e.preventDefault() and e.preventDefault() ; return false;

but neither of these seem these work any ideas

Thanks

Calendar

answered on 25 Feb 2019

2 answers

288 views

How to hide action in window depending on value

Hi,

I'm my app I've a window with an action (a save button) defined. I'm trying to hide or not this action depending in a ViewData value. If I've write permissions I should see the button, else I shouldn't. How could achieve it? I could create 2 different windows or control it with jquery and hidding the button, but I think it's not the best way.

My window:

@(Html.Kendo().Window()

.Name("windowZonaExclusivas")

.Width(930)

.Resizable()

.Modal(true)

.Visible(false)

.Title("TEst")

.Draggable(true)

.Actions(actions => actions.Custom("Save").Maximize().Close())

.LoadContentFrom("EditZona", "ZonasExclusivas", new { idZona = -1 })

)

Any help will be appreciated.

Thanks in advance.

Window

answered on 25 Feb 2019

1 answer

2.9K+ views

Export to CSV

I wrote some code to export a datasources.view() to a csv file for anyone interested.

/**

* Converts a datasource's view to CSV and saves it using data URI.

       * Uses underscore for collection manipulation http://underscorejs.org/

* Uses moment.js for date parsing (you can change this if you would like)

* TODO save it using Downloadify to save the file name https://github.com/dcneiner/Downloadify

* @param {Array.<Object>} data The data to convert.

* @param {boolean} humanize If true, it will humanize the column header names.

* It will replace _ with a space and split CamelCase naming to have a space in between names -> Camel Case

* @param {Array.<String>} ignore Columns to ignore.

* @returns {string} The csv string.

*/

var toCSV = function (data, fileName, humanize, ignore) {

var csv = '';

if (!ignore) {

ignore = [];

}

//ignore added datasource properties

ignore = _.union(ignore, ["_events", "idField", "_defaultId", "constructor", "init", "get",

"_set", "wrap", "bind", "one", "first", "trigger",

"unbind", "uid", "dirty", "id", "parent" ]);

//add the header row

if (data.length > 0) {

for (var col in data[0]) {

//do not include inherited properties

if (!data[0].hasOwnProperty(col) || _.include(ignore, col)) {

continue;

}

if (humanize) {

col = col.split('_').join(' ').replace(/([A-Z])/g, ' $1');

}

col = col.replace(/"/g, '""');

csv += '"' + col + '"';

if (col != data[0].length - 1) {

csv += ",";

}

csv += "\n";

}

//add each row of data

for (var row in data) {

for (var col in data[row]) {

//do not include inherited properties

if (!data[row].hasOwnProperty(col) || _.include(ignore, col)) {

continue;

}

var value = data[row][col];

if (value === null) {

value = "";

} else if (value instanceof Date) {

value = moment(value).format("MM/D/YYYY");

} else {

value = value.toString();

}

value = value.replace(/"/g, '""');

csv += '"' + value + '"';

if (col != data[row].length - 1) {

csv += ",";

}

csv += "\n";

}

//TODO replace with downloadify so we can get proper file naming

window.open("data:text/csv;charset=utf-8," + escape(csv))

};

//toCSV(dataSource.view(), "FileName not used yet", true, ['IdColumnToIgnore', 'AnotherColumnToIgnore']);

Data Source

answered on 22 Feb 2019