Questions on Kendo UI for jQuery Forum

1 answer

699 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

174 views

[Solved] 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

168 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

630 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

485 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

391 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

121 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

194 views

[Solved] 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

94 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

4 answers

134 views

[Solved] scrollTo does not work properly on a large site

Hi,

I have got a view with a lot of content (about 18000px high on my smartphone) and I am trying to jump to a specific position in the view by calling

$('#myview').data('kendoMobileView').scroller.scrollTo(0,-200);

upon clicking a particular button. If I click the button before I do anything else, this does not work properly: the scroller scrolls down a bit but returns to the top immediately. However, if I scroll the scroller manually before I click the button, it works perfect.

By the way, I also found that the scrollTop property of the scroller widget returns undefined or NaN in the beginning.

Best,
Alex

P.S.: I am using Kendo UI Mobile 2013.1.527 but the error also occurs with the stable build 2013.1.514.

General Discussions

answered on 23 Jun 2013