Questions on Kendo UI for jQuery Forum

1 answer

143 views

Multi layer Kendo control Grid+Tabstrip+Grid+TabStrip issue

Hi,

I can't get this working when I've checked each control for a ToClientTemplate for it to render properly
1st grid = fine
1st tabstrip = fine
2nd grid = not working
2nd tabstrip within grid = fine

<h2>Awards Listed By Programs</h2>

@(Html.Kendo().Grid<Scholarship2013.Models.Category>()

.Name("Grid")

.Columns(columns =>

{

columns.Bound(p => p.CategoryID);

columns.Bound(p => p.CategoryDescription);

})

.ClientDetailTemplateId("employeesTemplate")

.Pageable()

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("Program_Read", "Student"))

.PageSize(10)

)

.Sortable()

//.Events(events => events.DataBound("dataBound"))

)

<script>

function dataBound() {

this.expandRow(this.tbody.find("tr.k-master-row").first());

}

</script>

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

@(Html.Kendo().TabStrip()

.Name("TabStrip_#=CategoryID#")

.SelectedIndex(0)

.Items(items =>

{

items.Add().Text("Awards").Content(@<text>

@(Html.Kendo().Grid<Scholarship2013.Models.Award>()

.Name("Awards_#=CategoryID#")

.ClientDetailTemplateId("awarddetailTemplate")

.Columns(columns =>

{

columns.Bound(o => o.AwardID).Width(101);

columns.Bound(o => o.AwardName).Width(140);

columns.Bound(e => e.AwardName)

.ClientTemplate("# if(AwardDetails[0].IsApplicationOpen >= 0 && AwardDetails[0].IsApplicationClosed < 0) {# <span class='redfont'>*</span> #=AwardName# #} else {# #=AwardName# #} #")

.Width(500);

})

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("Award_Read", "Student", new { categoryID = "#=CategoryID#" }))

)

.Pageable()

.Sortable()

.ToClientTemplate()

)

</text>

);

})

.ToClientTemplate()

)

</script>

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

@(Html.Kendo().TabStrip()

.Name("AwardDetailTabStrip")

.SelectedIndex(0)

.Items(items =>

{

items.Add().Text("Award Details").Content(@<text>

<div id="details-container2">

@* <h2>#= AwardName #</h2>*@

<dl>

@*<dt>Award Name: #= AwardName #</dt> *@

<dt> Award Detail ID: #= AwardDetails[0].AwardDetailID #</dt>

<dt> Award Amount: #= AwardDetails[0].AwardAmount #</dt>

<dt> Number of Awards: #= AwardDetails[0].NumberOfAwards #</dt>

<dt> Criteria: #= AwardDetails[0].ConditionsText #</dt>

<dt> Deadline: #= AwardDetails[0].ApplicationDeadlineDate #</dt>

<dt> Special Instructions: #= AwardDetails[0].SpecialInstructions #</dt>

</dl>

</div></text>

);

})

.ToClientTemplate()

)

</script>

. I'm having an issue particularly in the 2nd grid and on this part (perhaps its the AwardDetails[0] field/object

columns.Bound(e => e.AwardName)

.ClientTemplate("# if(AwardDetails[0].IsApplicationOpen >= 0 && AwardDetails[0].IsApplicationClosed < 0) {# <span class='redfont'>*</span> #=AwardName# #} else {# #=AwardName# #} #")

.Width(500);

Thanks for your help.

Aaron

Grid

answered on 29 Apr 2013

1 answer

80 views

How can I re-order column that I've added a custom inline filter?

We added our custom filter to the grid since we want to use google type filter. The issue is how can we take advantage of the Kendo Grid that will allow us to re-order the column. Right now if we re-order it, the filter remains the same therefore it filter incorrectly.
see attachment.
Header1 | Header 2
------------ |-------------
Filter1 | Filter 2 <--- custom filters (free text and drop dropdown)
----------- | -----------
data1 | data 2

Now if I dragged Header 2 to Header one, it looks correct but the filter remains so not filter 1 is under Header 2 and Filter 2 is under Header one.

Header2 | Header1
------------ |-------------
Filter1 | Filter 2 <--- unchanged
----------- | -----------
data2 | data1

Do I need to do something to accomplish the re-ordering properly?

Grid

answered on 29 Apr 2013

2 answers

160 views

Bullet Chart Rotation, tooltip

Is there a way to set the rotation of the tooltip apart from the rotation of the chart?

I rotated my chart 90 degrees, to make it vertical, which works fine. However the tooltip, is now sideways and I can't see a way to rotate the tooltip as well to be horizontal again. If it is not possible I can just disable the tooltip, although I would prefer to have it if possible. Thanks

Sparkline

answered on 29 Apr 2013

2 answers

950 views

Inline edit not working (Edit button not displayed)

Hello,

I have the problem, that I cannot inline edit my data in my grid because the edit button is simply missing. All other actions (read data, create data (inline), delete data) are working very well.

I am using a webservice to communicate with the server side.
Here is the code of my grid:

01.<script type="text/javascript">

02. var Grid = null;

03. var DataSource = new kendo.data.DataSource({

04. transport: {

05. read: { url: "GetData" },

06. destroy: { url: "DeleteData" },

07. update: {

08. url: "UpdateData",

09. type: "POST",

10. complete: function (e) {

11. Grid.data("kendoGrid").dataSource.read();

12. }

13. },

14. create: {

15. url: "CreateData",

16. type: "POST",

17. complete: function (e) {

18. Grid.data("kendoGrid").dataSource.read();

19. }

20. },

21. parameterMap: function (options, operation) {

22. switch (operation) {

23. case "destroy":

24. return { id: options.Id };

25. case "create":

26. return { name: options.Name, width: options.Width, height: options.Height };

27. default:

28. return { take: options.take, skip: options.skip };

29. }

30. }

31. },

32. schema: {

33. data: "d.Data",

34. total: "d.Total",

35. model: {

36. id: "Id",

37. fields: {

38. Id: { editable: false },

39. Name: { editable: true },

40. Width: { editable: true },

41. Height: { editable: true },

42. Code: { editable: true }

43. }

44. },

45. errors: "d.ErrorMessage"

46. },

47. pageSize: 20,

48. serverPaging: true,

49. error: function (response) {

50. this.cancelChanges();

51. }

52. });

53.

54. $(document).ready(function () {

55. Grid = $("#md-contentGrid").kendoGrid({

56. dataSource: DataSource,

57. height: "100%",

58. pageable: true,

59. toolbar: [

60. { name: "create" }

61. ],

62. columns: [

63. { field: "Name" },

64. { field: "Width" },

65. { field: "Height" },

66. { command: [

67. "edit",

68. "destroy",

69. ], title: " ", width: "300px"

70. }

71. ], editable: "inline"

72. });

73. });

74.</script>

I have been trying now for hours, but stil no success to get the inline edit feature working. I hope someone call help me a bit.
Thank you very much.

Grid

answered on 29 Apr 2013

1 answer

98 views

Menu+window on page

Hello,
I have menu, window on page!
<script>
$(document).ready(function() {
var window = $("#window"),
undo = $("#undo")
.bind("click", function() {
window.data("kendoWindow").center().open();
});
var onClose = function() {
undo.show();
}
window.kendoWindow({
width: "auto",
title: "Настройка системы",
actions: ["Refresh", "Maximize", "Close"],
content: 'settings',
modal: true,
close: onClose
});
$("#menu").kendoMenu();
});
</script>
but menu don't work

Menu

answered on 29 Apr 2013

5 answers

157 views

Linear Guage Databinding to WCF JSON Service from HTML

Hi Kendo team,

My scenario is as follows:

I have an html page, where I want to put my Kendo Linear guage.

I have a WCF running in my IIS, which returns a value in JSON like this [{"unSrvd":12}]

The WCF llink is as follows

http://localhost/WCFSrv/Uns.svc/api/Unserved/-1/-1/-1

Where -1/-1/-1 are the parameters that I have to pass to the WCF.

How can I bind this to the Linear guage?

Any help will be appreciated

Thanks and Regards

Renju J Panicker

LinearGauge

answered on 29 Apr 2013

1 answer

107 views

Problem with asp.net web services consuming in kendo mobile listview

Hi

I am trying to call asp.net web services in telerik kendo mobile listview but i am not getting any data its showing only loading on page .Please find code with attachment and with web services .Please check what is issue in that.

And if you can share sample code from asp.net services with telerik kendo for mobile that will helpful.

//----------web services ---------------------------
[WebMethod]
public string EmployeeList()
{

string abc = null;
JavaScriptSerializer serializer = new JavaScriptSerializer();
SqlCommand cmd = new SqlCommand("select top 10 Firstname from employee where branchid=@branchid", connection.getConn());
cmd.CommandType = CommandType.Text;
cmd.Parameters.AddWithValue("@branchid", 9);

SqlDataAdapter sda = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
sda.Fill(ds);
for( int i=0;i<ds.Tables[0].Rows.Count ;i++)
{

if (i == 0)
{
abc = ds.Tables[0].Rows[i]["firstname"].ToString();
}
else
{
abc =abc+"," + ds.Tables[0].Rows[i]["firstname"].ToString();
}
}
string jsonString = serializer.Serialize(abc);
return jsonString;
}

ListView (Mobile)

answered on 29 Apr 2013

15 answers

1.4K+ views

How to enable case insensitive sorting on kendo ui grid

Hi there,

I need to implement the case insensitive sorting on kendo ui grid, by default it sort the columns in case sensitive manner as shown in attached document.

Thanks,
Surendra Singh

Grid

answered on 29 Apr 2013

2 answers

102 views

PartialView - load gauge

I tried loading the gauge using a partial view

<body style="padding: 0px;margin: 0px;height:100%;">

<div id="Replace@(uid)" style="width: 100%;height: 100%;position: relative;"></div>

<script type="text/javascript">

jQuery(function () {

jQuery.get('@Url.Action("Chart","SalesTarget", Request.QueryString.ToRouteValues())', function (data) {

$('#Replace@(uid)').html(data);

});

</script>

</body>

unfortunately this approach leads to a javascript "unresponsive script" error.
the chart title shows up so my markup is added to the page - but the kendo initialization is NOT completing.

This is the only script loaded in partial..

jQuery(function(){jQuery("#charte5d435958d7e47569bd533bd3bd63d11").kendoRadialGauge({"pointer":{"value":0},"scale":{"minorUnit":5,"min":0,"max":2352000002.3961,"ranges":[{"from":0,"to":1568000001.5974,"color":"f2dd30"},{"from":1568000001.5974,"to":2352000002.3961,"color":"399E38"}],"endAngle":180,"startAngle":0},"theme":"bootstrap"});});

LinearGauge

answered on 29 Apr 2013

2 answers

101 views

[Solved] Is the widget suppose to copy the input style?

Is the dropdownlist widget suppose to copy the style from the input element?

<input class="#MyDDL" style="width:930px;">

$('#MyDDL').kendoDropDownList({

index: 0,

dataTextField: 'FirstName',

dataValueField: 'ID',

dataSource: myDataSource

});

I thought 930px would be copied from the input style but I was wrong. The width is provided by the kendo.common.min.css

Is this the expected behavior?

Best regards,

Simon

EDIT
OK, I just realized the problem occurs in Chrome only... Firefox and IE are working as expected.

DropDownList

answered on 29 Apr 2013