Questions on Kendo UI for jQuery Forum

0 answers

73 views

How to reduce the size of the header for any kendo control such that the title fits in correctly.

Hi,

I tried reducing the size of my grid header as well as the footer where the page size and page numbers are mentioned. On doing so , the text in the header doesnt fit completely inside the header. Also, In case i want to remove any padding or margin around the title I am unable to do so in the header or footer.

The same hold true for any kendo control whose header or footer i need to change size. Please help

General Discussions

asked on 22 Oct 2012

1 answer

231 views

Issue with Multi Level of Groups

I'm using ServerGrouping, I can group 1 level without problem, however when I try to group by a second level I get an error "Uncaught TypeError: Cannot read property 'ProductLine' of null"
My Json Data set that is returned from the server is:

{
"Count":5,
"ViewData":null,
"groups":[
{
"aggregates":null,
"field":"ProductLine",
"hasSubgroups":true,
"items":[
{
"aggregates":{
"JobID":{
"count":2
}
},
"field":"Tier",
"hasSubgroups":false,
"items":[
{
"ProductLine":"CART for Commuters",
"JobID":"042712",
"Tier":"Tier 1"
},
{
"ProductLine":"CART for Commuters",
"JobID":"060712",
"Tier":"Tier 1"
},
{
"ProductLine":"Platinum",
"JobID":"101792",
"Tier":"Tier 1"
}
],
"value":"Tier 1"
}
],
"value":"CART for Commuters"
},
{
"aggregates":null,
"field":"ProductLine",
"hasSubgroups":true,
"items":[
{
"aggregates":{
"JobID":{
"count":1
}
},
"field":"Tier",
"hasSubgroups":false,
"items":[
{
"ProductLine":"CART for Commuters",
"JobID":"042712",
"Tier":"Tier 1"
},
{
"ProductLine":"CART for Commuters",
"JobID":"060712",
"Tier":"Tier 1"
},
{
"ProductLine":"Platinum",
"JobID":"101792",
"Tier":"Tier 1"
}
],
"value":"Tier 1"
}
],
"value":"Platinum"
},
{
"aggregates":null,
"field":"ProductLine",
"hasSubgroups":true,
"items":[
{
"aggregates":{
"JobID":{
"count":2
}
},
"field":"Tier",
"hasSubgroups":false,
"items":[
{
"ProductLine":"Platinum",
"JobID":"101792",
"Tier":"Tier 2"
},
{
"ProductLine":"Platinum",
"JobID":"101792",
"Tier":"Tier 2"
}
],
"value":"Tier 2"
}
],
"value":"Platinum"
}
],
"aggregates":null,
}

My grid code is as follows:
var grid = $("#grid").kendoGrid({
dataSource: {
type: "json",
serverPaging: true,
serverGrouping: true,
serverAggregates: true,
pageSize: 500,
transport: {
read: "http://localhost:6332/api/Test
},
schema: { data: "ViewData", total: "Count", groups: "groups", aggregates: "aggregates" },
group: [{ field: "ProductLine" }, { field: "Tier"}]
},
scrollable: false,
sortable: true,
pageable: true,
columns: colList
});

I have been over it and over it and as far as I can see everything looks correct. I'd appreciate any assistance. Thanks.

Grid

answered on 22 Oct 2012

3 answers

94 views

Iphone 5 iOS 6 and display bug.

Hello,
I have an iPhone 5 and in the demo i have many display bug like no footer, can't scroll in the bottom of page....

have you a solution? Kendoui mobile is compatible with IO6 and iphone 5?

General Discussions

answered on 22 Oct 2012

1 answer

155 views

Date = Date in the template :/

Ok so the data object I have to bind to (remote data, have no control over it) has a property called "Date", and since it's also sending me dates in ISO format I need to do one of these

#= kendo.toString(new Date(data.Date), 'hh:sstt') #

However the error thrown is "Date is not a function"

I do this same thing in another similar object whos date property is PublishedDate (not "Date") and the above code works fine...so I assume its the ambiguous naming.

Is there anything I can do outside of telling telligent community server to change their REST API :)

ListView

answered on 22 Oct 2012

3 answers

360 views

add splitter in a tab content.

Hi

I have added splitter in a tab but it is not resize with tab content.Also I have resize the tabstrip size with the window size with follwing parameter

<div id="tabstrip" style="height: 100%; border: 0;">

The tab has resize but the content is not resized.

code :

001.<div id="tabstrip" style="height: 100%; border: 1;">

002. <ul>

003. <li>First tab</li>

004. <li>Second tab</li>

005. </ul>

006. <div>

007.

008. </div>

009. <div>

010. <div id="vertical" >

011. <div>

012. <div id="horizontal1" >

013. <div><div id="grid"></div></div>

014. <div><div id="grid1"></div></div>

015. </div>

016. </div>

017. <div>

018. <div id="horizontal2" >

019. <div></div>

020. <div></div>

021. </div>

022. </div>

023. <div>

024. <div id="horizontal3" >

025. <div></div>

026. <div></div>

027. </div>

028. </div>

029. </div>

030. </div>

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

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

033. $("#tabstrip").kendoTabStrip();

034.

035. $("#grid").kendoGrid({

036. dataSource: {

037. data: createRandomData(50),

038. pageSize: 10

039. },

040. height: 250,

041. groupable: true,

042. scrollable: true,

043. sortable: true,

044. pageable: true,

045. columns: [

046. {

047. field: "FirstName",

048. title: "First Name"

049. },

050. {

051. field: "LastName",

052. title: "Last Name"

053. },

054. {

055. field: "City"

056. },

057. {

058. field: "Title"

059. },

060. {

061. field: "BirthDate",

062. title: "Birth Date",

063. template: '<#= kendo.toString(BirthDate,"dd MMMM yyyy") #>'

064. },

065. {

066. field: "Age"

067. }

068. ]

069. });

070. $("#grid1").kendoGrid({

071. height: 250,

072. groupable: true,

073. scrollable: true,

074. sortable: true,

075. pageable: true,

076. columns: [

077. {

078. field: "FirstName",

079. title: "First Name"

080. },

081. {

082. field: "LastName",

083. title: "Last Name"

084. },

085.

086. ]

087. });

088. $("#vertical").kendoSplitter({

089. orientation: "vertical",

090. panes: [

091. { collapsible: true, size: "100%" },

092. { collapsible: false },

093. { collapsible: true, size: "100%" }

094. ]

095. });

096. $("#horizontal1").kendoSplitter({

097. orientation: "horizontal",

098. panes: [

099. { collapsible: true, size: "100px" },

100. { collapsible: false },

101. { collapsible: true, size: "100%" },

102. { resizable: true }

103. ]

104. });

105. $("#horizontal2").kendoSplitter({

106. orientation: "horizontal",

107. panes: [

108. { collapsible: true, size: "100px" },

109. { collapsible: false },

110. { collapsible: true, size: "100%" },

111. { resizable: true }

112. ]

113. });

114. $("#horizontal3").kendoSplitter({

115. orientation: "horizontal",

116. panes: [

117. { collapsible: true, size: "100px" },

118. { collapsible: false },

119. { collapsible: true, size: "100%" },

120. { resizable: true }

121. ]

122. });

123.

124. });

125.

126.

127. </script>

128. </div>

Please help me.

Thanks & Regards,
Sourav

TabStrip

answered on 22 Oct 2012

1 answer

252 views

Encoded false Grid column

If i set column as encoded false it still shows html text.kendo grid does not set encoded false.how can i change this?

Grid

answered on 22 Oct 2012

3 answers

147 views

Navigate to external file from TabStrip view - and show it within the TabStrip

Can I not navigate to another file from within my tabstrip view? The page load is stuck with ajax loading indicator.

Here is the tabstrip code in default.html

<div data-role="footer">

<div data-role="tabstrip">

<a href="#Home" data-icon="home">Home</a>

<a href="External.html" data-icon="info">Details</a>

</div>

here is External.html

<!DOCTYPE html>

<html>

<head>

<title>External</title>

</head>

<body>

<div id="External" data-role="view" data-title="External" data-layout="mobile-tabstrip">

</div>

</body>

</html>

TabStrip (Mobile)

answered on 22 Oct 2012

4 answers

1.3K+ views

How to get grid selected row value ajax

How to get the row value on Kendo grid row selection change. I used a ajax method to bind the Kendo grid.

@(Html.Kendo().Grid<OnlineAB.Models.GoodsServiceModel>()

.Name("GSSrcGrid")

.Columns(columns =>

{

columns.Bound(gs => gs.ID).Visible(false);

columns.Bound(gs => gs.GSPrice).Groupable(false).Width(100);

columns.Bound(gs => gs.GSTime).Width(100);

columns.Bound(gs => gs.GSDescription).Width(200);

columns.Bound(gs => gs.GSTitle).Width(150);

columns.Bound(gs => gs.GSCode).Width(120);

})

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("GetGoodsandService", "GS")

.Data("GetParam"))

.ServerOperation(false)

)

.Sortable()

.Scrollable()

.Filterable()

.RowAction(row => row.HtmlAttributes.Add("data-id", row.DataItem.ID))

.Selectable(s => s.Mode(GridSelectionMode.Single))

.Events(events => events.Change("GSSelectionChange"))

)

and js code snippet

function GSSelectionChange() {

var gsgrid = $('#GSSrcGrid').data('kendoGrid');

var goods = gsgrid.select();

var goodsID = goods.data("id");

alert(goodsID);

}

goodsID always return undefined. Whats the wrong with this.

thanks
Santhosh

Grid

answered on 22 Oct 2012

0 answers

111 views

Window center in parent

Hello
I iframe in my page in the iframe i have a button i want when click on the button open window in center of the my page.

Window

asked on 21 Oct 2012

0 answers

120 views

Problem with numeric text box validantion

Hello guys

I'm having a problem with the NumericTextBox. Here is a jsfiddle example http://jsfiddle.net/Ns6sd/16/

The validation fails on almost every occasion:
- go one level up, and validate
- write your own number, ex. 2.3 and validate

The validation passes if you:
- go one level down and press validate (now if you go up and validate it will work, but if you enter your own number it fails again)

Please help me solve this problem

Best Regards

NumericTextBox

asked on 20 Oct 2012