Questions on Kendo UI for jQuery Forum

10 answers

1.1K+ views

Hi,

Is there a way to customize the display of the group header as presented in the aggregates grid demo?

For instance, we would like the header to appear as an aggregated row with grouped data and totals for numeric columns.
Ideally, the grid would start with all groups closed and look like a summary grid. Then when the user expanded a group, the detail would look like it is part of the same grid, with the same column headers and positions and sizes (as opposed to the way the hierarchy demo is laid out with separate grids for the details).

Thanks,
Take care,
Ken Rubin

Grid

answered on 24 Jun 2013

1 answer

672 views

dynamic enable / disable sorting in Kendo grid + jquery

Hello
I am using kendo grid.
in keno grid i want to enable/disable sorting functionality dynamic based on condition. when grid apply grouping to any column then grid sorting disable else sorting enable.

i tried below code but some issue occur
onGridDataboundEvent

   var GroupTable = $(gridName + ' .k-grouping-header').find('div');
                    if (GroupTable.length > 0) {
                    $(gridName).find('TH a').bind('click' , function(){return false;}).css('text-decoration', 'none').css('cursor','default');

                    }
                    else {
                               $(gridName).find('TH a').bind('click' , function(){return true;}).css('text-decoration',
'underline').css('cursor','pointer');
                    }

Thanks

Grid

answered on 24 Jun 2013

5 answers

156 views

Link between DataSource objects

I have a Grid, with a KendoDataSource that provides the data. That grid has some aggregate data. The entire data sits in a KendoObservableObject in my VM.

01.vm.SetLayers = function (values) {

02. //this.LayerTable.data(values);

03. //this.LayerTable.aggregate = [{ field: "FileCount", aggregate: "count" }];

04. //this.trigger("change", { field: "LayerTable" });

05. this.LayerTable = new kendo.data.DataSource({

06. data: values,

07. aggregate: [

08. { field: "FileCount", aggregate: "count" },

09. { field: "Size", aggregate: "sum" }

10. ]

11. });

12. this.trigger("change", { field: "LayerTable" });

13.};

I have another calculated field in the VM which shows the sum and count:

01.var totalFiles = function () {

02. return this.LayerTable.aggregates().FileCount.count;

03.};

04.var totalSize = function () {

05. return this.LayerTable.aggregates().Size.sum;

06.};

07.vm = kendo.observable({

08. InfoTable: infoTable,

09. LayerTable: layerTable,

10. StatsTable: statsTable,

11. TotalFiles: totalFiles,

12. TotalSize: totalSize

13.});

I would like have the TotalFiles and TotalSize as column values in another Grid (which is backed by a different VM DataSource. Is this sort of chaining possible?

01.var infoTable = [

02. { Item: "Status", Value: "Initializing" },

03. { Item: "XHR2", Value: false },

04. { Item: "B64", Value: false },

05. { Item: "PouchDB", value: "" },

06. { Item: "Center", Value: "xx" },

07. { Item: "Date", Value: "xx" },

08. { Item: "Zoom", Value: 0 },

09. { Item: "Total Files", Value: 0 },

10. { Item: "Total Size", Value: 0 }

11.

12.];

Data Source

answered on 24 Jun 2013

1 answer

148 views

Set Column Height to Always Take Up 100% of it's Container

Hello,

I'm working on styling a stacked bar chart and I want the chart to always take up 100% of it's containers height no matter what the data values are. I will be binding local json data to this chart so obviously the values will change. I wasn't sure if there was a way to set the valueAxis max property to do this? Any help is appreciated!

<!DOCTYPE html>
<head>

<link rel="stylesheet" type="text/css" href="../css/kendo/kendo.common.min.css">
<link rel="stylesheet" type="text/css" href="../css/kendo/kendo.default.min.css">

</head>
<body>

<div id="example" class="k-content" >
<div class="chart-wrapper">
<div id="chart"></div>
</div>
</div>

<script src="../JavaScriptLib/jquery/main.js"></script>
<script src="../JavaScriptLib/kendo/kendo.all.min.js"></script>

<script>

function createChart() {
$("#chart").kendoChart({
chartArea: {
background:"",
height:180,
width:70
},

legend: {
visible: false,

},
seriesDefaults: {
type: "column",
stack: true,
gap:0
},

series: [{
name: "Interest",
stack: "Mortgage",
data: [494.50],
color: "#f58025"
}, {
name: "Taxes",
stack: "Mortgage",
data: [375],
color: "#f58025"
}, {
name: "Principle",
stack: "Mortgage",
data: [269],
color: "#f58025"
}, {
name: "PMI",
stack: "Mortgage",
data: [200],
color: "#f58025"
}, {
name: "Rollover",
stack: "Mortgage",
data: [75],
color: "#f58025"

}, {
name: "Insurance",
stack: "Mortgage",
data: [50],
color: "#f58025"
}],

valueAxis: {
max:1450,
color:"#ff0000",

labels:{
color:""
},

labels:{
visible:false
},
line: {
visible: false
},
majorGridLines: {
visible: false
},

},
categoryAxis: {
color:"",
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= ['$']+value #"
}
});
}

$(document).ready(function(){
$('#LoanActivityTable').dataTable();

setTimeout(function() {
// Initialize the chart with a delay to make sure
// the initial animation is visible
createChart();

$("#example").bind("kendo:skinChange", function(e) {
chart.options.series[0].color = chart.options.series[0].data[0].color;
createChart();
});
}, 400);

});

</script>
</body>
</html>

Charts

answered on 24 Jun 2013

3 answers

595 views

Using custom TreeViewItem fields in template

Hi,

I currently am using the MVC wrapper extensions to create a TreeView from my models. I would like to pass some data from the model to the template so that I can display it alongside the text upon click.
Here is my TreeView:

@(Html.Kendo().TreeView()

.Name("s-list-event-container")

.HtmlAttributes(new { @class = "s-list-container", style = "color: white" })

.Events(events => events

.Select("preventSelect")

)

.TemplateId("template-list-event")

.BindTo(Model.ToList(), mapping => mapping

.For<ArdentMC.Sentry.Data.Event>(binding => binding

.Children(e => e.EventObjects)

.ItemDataBound((item, e) =>

{

item.Id = e.EventID.ToString();

item.Text = e.Name;

// Here's where I'd like to add a description. The line below runs but appears to do nothing.

item.HtmlAttributes.Add("data-description", e.Description);

})

)

.For<ArdentMC.Sentry.Data.EventObject>(binding => binding

.Children(o => o.EventObjects)

.ItemDataBound((item, o) =>

{

item.Id = o.EventObjectID.ToString();

item.Text = o.Name;

})

)

Thanks for any help,
Jeff

TreeView

answered on 24 Jun 2013

3 answers

436 views

Menu 'bottom left' direction

Hi!

I tried to customize menu direction on example page (http://demos.kendoui.com/web/menu/direction.html) for settings 'bottom left', but sub menu is always displayed in the left side from menu and isn't placed in the bottom. How can we apply this settings for our needs?

Best regards,
Artem

Menu

answered on 24 Jun 2013

1 answer

370 views

Children of DataItem

Hi,
I have a static HierarchicalDataSource defined in a file. I use it as source for a TreeView. TreeView has an 'expand' event fired before expand actually occurs. In that event I can get dataItem related to the node that is being expanded. I need to get children of that dataItem but I cannot see any method/property on dataItem that would allow me to get them. Is there any way to get/load child items?

I would be most grateful for any help :)

Hierarchical Data Source

answered on 24 Jun 2013

1 answer

103 views

TypeScript definitions and interface DropDownListOptions template property

I download the new 0.9 Typescript definition file from the forum and it fixed the 0.9 compatibility issues. However, it also brought back and error I had manually fixed but forgot to put a post about with the older version. The interface DropDownListOptions defined the template property as

template?: string;

But this does not work with kendo.template function which returns a function. Changing it to the following worked.

template?: any;

However, I think the following is more correct and also works.

(data: any) => string

Just looking through the file there seems to be some other places where I think this is wrong too.

General Discussions

answered on 24 Jun 2013

7 answers

178 views

wrong format in german

Hi!

Before I describe anything with my own words, please look at: http://jsfiddle.net/YdLCJ/

The first problem is the initialization with 1.5 for both NumericTextBox. The second problem is in-/decreasing the german NumericTextBox. - Komma is at the wrong position.

Hopefully you can help!

Thanks in advance.

Jörg Bergner

NumericTextBox

answered on 24 Jun 2013

1 answer

73 views

Inline editing mode customizing

Hi,

We need to customize inline editing mode in kendo grid: all rows should be editable all the time and grid should supporting tabbing between the last field of row and the first field of next row. What is the best way to implement behaviour like this?

Best Regards,

Artem

Grid

answered on 24 Jun 2013