Questions on Kendo UI for jQuery Forum

3 answers

3.3K+ views

how to fix columns width without expanding to fill all the grid

Hello there,

The observable behavior about the column width is that if the columns have explicit fixed width, and the sum of the fixed width less than the grid width, kendo grid will ignore the width and expand columns to fill the gird.

But now, I need to make all the columns have fixed width, user can add or remove columns. So sometimes it will just have one column, or sum of the column width less than grid width, we would not like the column expand to the grid, we hope it just take the fixed width, the remain area become blank.

Is there an solution to solve this issue?

Grid

answered on 04 Mar 2019

5 answers

360 views

Kendo Mobile MVVM + Datasource simple POST call

I have a kendo mobile app with a view that is binded to an observable object

//Post Account View Model

var postaccountModel = kendo.observable({

Username: null,

Password1: null,

Password2: null,

Firstname: null,

Middlename: null,

Lastname: null,

Gender: null,

BirthDate: null

});

What i want basically is to just make a simple POST call using kendo datasource passing this viewmodel to webapi post method

public class PostAccountModel

{

public string Username { get; set; }

public string Password1 { get; set; }

public string Password2 { get; set; }

public string Firstname { get; set; }

public string Middlename { get; set; }

public string Lastname { get; set; }

public string Gender { get; set; }

public DateTime? BirthDate { get; set; }

}

[Authorize(Roles = Service.Security.Role.Guest)]

public void Post(PostAccountModel value)

{

}

But I cant figure out how, I tried this code but it doesnt work

$("#button-save").on("click", function () {

if (createaccountvalidator.validate()) {

var authheader = EMRGUEST;

var authbase64 = Base64.encode(authheader);

var dataSource = new kendo.data.DataSource({

transport: {

create: {

url: EMRAPIURL + "account",

dataType: "jsonp",

type: "POST",

beforeSend: function (xhr) {

xhr.setRequestHeader('Authorization', 'Basic ' + authbase64);

},

data: kendo.stringify(postaccountModel)

}

});

dataSource.sync();}

});

can anyone point me to the right direction on how to make this kind of call?

General Discussions

answered on 01 Mar 2019

2 answers

231 views

Templo

I have the following template defined

<script type="text/x-kendo-tmpl" id="tmplterminalSummary">

<div class="row grandTotalRow"><br>

<span class="col-md-1 col-xs-3 resultLabel text-left">Gift Cards Terminal</span><br>

<span class="col-md-2 col-xs-2 resultValue">#:kendo.toString(gcardGross,"c")#</span><br>

<span class="col-md-3 col-xs-2 resultValue">#:kendo.toString(gcardRefund,"c")#</span><br>

<span class="col-md-3 col-xs-2 resultValue">N/A</span><br>

<span class="col-md-3 col-xs-2 resultValue">#:kendo.toString(netGCard,"c")#</span><br>

</div>

</script>

The issue I am having is that sometimes gcardGross is undefined. This results in a run time error like this https://screencast.com/t/6lHLtsliMx5F

I have tried replacing it with a line like this but unfortunately the error continues to occur.

<span class="col-md-2 col-xs-2 resultValue">#:gcardGross?kendo.toString(gcardGross,"c"):kendo.toString(0,"c")#</span><br>

So how can I define a default value so that 0 is shown if the property is undefined.

Templates

answered on 01 Mar 2019

2 answers

415 views

Only display last label in stack

I've been struggling with this for quite a while now with no good results. We are using stacked charts that are built dynamically in javascript from a dataset. I want to only display the last label in the stack (using stackValue in the label template). The issue is that the stack in each category may not have the same number of series displayed.

For example, I am binding 3 series to the chart in a stack with months as my category. October only has a value for 1 series, November has values for all 3 series, December has values for only 2 series.

So I can't just set the last series' labels as visible and the other series as not visible. Is there a way in the labels visible event to see what the last series is in the stack and set the other series labels to hidden?

Charts

answered on 28 Feb 2019

3 answers

1.2K+ views

Custom Edit Popup template that contains another grid

Is that possible to create a custom edit pop up that contains another grid inside?

My template has a dropdownlist. I would like to use the onchange event of that dropdownlist to display a grid with read only information, nothing fancy.

Is that possible?

Please let me know your comments.

Thanks in advanced.

Grid

answered on 28 Feb 2019

2 answers

118 views

Local data binds, remote data does not

I'm using an old version of Kendio-UI (from 2014) in an ASP.NET web site. I cannot update to a newer version of Kendo-UI. Copy/pasting code into this message is not possible because of domain separation.

I have the following (psuedo-code:

$(document).ready(function()

{

// 0) variables that I set from hidden input fields (I have verified via the console that these

// values are being set as expected)

// 1) a data url that calls a sql server stored proc to retrieve remote data

// 2) a kendo.data.DataSource object that retrieves the remote data

// 3) a hand-jammed local array of items that the remote datasource would normally

// contain (for testing)

// 4) an array of columns to display in the grid

// 5) a kendoui grid object to display the data

}

Problem: With the local testData object, the grid displays as expected. When I try to set the dataSource property to the remote data object, the grid displays 32,800 empty rows (there are only two rows of data in the remote datasource).

I have verified via the browser debugger that the remote data is being successfully retrieved, and it's in the desired/expected format, but the grid freaks out when I try to use it as a data source.

Grid

answered on 27 Feb 2019

1 answer

151 views

Tab Content pane is being pushed outside container

Hi,

As my title says the content pane of my is being pushed outside the Tabstrip container. I've never seen this before, at first I it was something to do with my code, in the attached image, you can see its simply 2 titles and test data tabs.

Have you ever seen something like this before?

Thanks,
Grant

TabStrip

answered on 27 Feb 2019

1 answer

2.3K+ views

pageSize changed event

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.4K+ views

[Solved] 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.8K+ 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