Questions on Kendo UI for jQuery Forum

5 answers

114 views

Hi i am having trouble in adding PAger. I have search function which is called from couple of location which is bring data using Jquery. Code working fine and displaying the data but unable to add the Paging.

var srchResuls = function () {<br> var pg = 1;<br> $("#srchgrd").data("kendoGrid"

).dataSource.query({<br>                    page: pg,<br>                    pageSize: 2<br>                });<br>                $.ajax({<br>                    url:

"Docktst.aspx/Getserachres",<br> type: "post",<br> dataType: "json",<br> contentType: "application/json; charset=utf-8",<br> <br><br> success: function

(result) {<br>                        searchResults = result;<br>                    }<br>                }).done(

function () {<br> var dataSource = new

kendo.data.DataSource({<br>                        data: searchResults.d,<br>                      <br>                       <br>                        schema: {<br>                            model: {<br>                                id:

"DOCK_ACTIVITY_ID"

,<br>                                fields: {<br>                                    DOCK_ACTIVITY_ID: { type:

"number", editable: false },<br> LOC_ABBR: { type: "string", editable: true, filterable: { multi: true, search: true } },<br>

// BatchId :{ editable: true, nullable: true },<br>                                    SHIPPER_ACCT_NBR: { type: "number", editable: false },<br>                                    ORDER_ID: { type: "number", editable: false },<br>                                    VESSEL_VIN: { type: "string" },<br>                                    CUSTOMER_PT: { type: "string" }<br><br><br>                                }<br>                            },<br><br>                            pageable: {<br>                                <br>                                pageSize: 2,<br>                                buttonCount: 1<br>                            },<br><br>                            serverSorting: true,<br>                            sort: { field: "DOCK_ACTIVITY_ID", dir: "desc" },<br><br>                            parameterMap: function (data) {<br>                                return JSON.stringify(data);<br>                            }<br><br>                        }<br>                    });<br>

Grid

answered on 29 Feb 2016

3 answers

410 views

alternate row colors

How to specify alternate row colors in a spreadsheet ? The examples I saw specify cell background color , but not the color for the entire row .

Spreadsheet

answered on 29 Feb 2016

3 answers

618 views

How to check a splitter pane's collapsed/expanded state?

Is there a way to check the collapsed/expanded state of one of the splitter's internal panes?

Splitter

answered on 29 Feb 2016

1 answer

191 views

[Solved] Unbind close button

Hello,

I want to unbind close button in kendoWindow. So when user clicks button: X nothing happens. Is it possible?

Iam looking for that solution as I want to add my custom handler on closing kendoWindow. Iam aware of close event, but still I want to handle it on my own.

Window

answered on 26 Feb 2016

3 answers

125 views

[Solved] Brittle charting components and crap docs

Once again I find myself at the mercy of another flaky Telerik control, this time it's the chart component and the totally inadequate documentation (as usual).

Imaging this simple configuration (or so I thought!!!)

Why is the months axis in the wrong order despite the order clause?

<div id="chart3"></div>
<script>
var data = [
{ "MonthName": "Jan", "MonthNum": 1, "Status": "Approved", "Value": 1 },
{ "MonthName": "Jan", "MonthNum": 1, "Status": "Completed", "Value": 2 },
{ "MonthName": "Jan", "MonthNum": 1, "Status": "Requested", "Value": 1 },
{ "MonthName": "Feb", "MonthNum": 2, "Status": "Requested", "Value": 1 },
{ "MonthName": "Mar", "MonthNum": 3, "Status": "Booked", "Value": 1 },
{ "MonthName": "Apr", "MonthNum": 4, "Status": "Completed", "Value": 1 },
{ "MonthName": "May", "MonthNum": 5, "Status": "Completed", "Value": 1 },
{ "MonthName": "Jun", "MonthNum": 6, "Status": "Completed", "Value": 1 },
{ "MonthName": "Jul", "MonthNum": 7, "Status": "Approved", "Value": 1 },
{ "MonthName": "Aug", "MonthNum": 8, "Status": "Requested", "Value": 1 },
{ "MonthName": "Sep", "MonthNum": 9, "Status": "Requested", "Value": 1 },
{ "MonthName": "Oct", "MonthNum": 10,"Status": "Approved", "Value": 1 },
{ "MonthName": "Nov", "MonthNum": 11,"Status": "Booked", "Value": 1 },
{ "MonthName": "Dec", "MonthNum": 12,"Status": "Completed", "Value": 1 }
];

$("#chart3").kendoChart({
dataSource: {
data: data,
group: {
field: "Status"
},
sort: {
field: "MonthNum",
dir: "asc"
}
},
series: [{
type: "column",
field: "Value",
categoryField: "MonthNum"
}]
});
</script>

Charts

answered on 26 Feb 2016

1 answer

109 views

Some tiles are completely white

Hello, I have a bug with the Kendo UI Map.

While panning the map, some tiles will not render and stay white. This does not happen when zooming.

The same happends when exporting to PDF using kendo drawing PDF API, but with a higher frequency of white tiles than normal usage.

I am using openstreetmap as map provider.

See attached image for an examle of the error.

Grateful for any help!

/Simon

Map

answered on 26 Feb 2016

3 answers

145 views

[Solved] text in donut hole?

when the user clicks on a piece of the donut, I would like to have some text (via template) show up in the donut hole. Is this possible and if so, how?

Thanks,

--Ed

Charts

answered on 26 Feb 2016

1 answer

113 views

Donut chart

Is there a way to fill the small gap between two donut chart in kendo UI.

General Discussions

answered on 26 Feb 2016

3 answers

2.3K+ views

Prevent double execution on fast double click

Kendo MVVM supports click event (data-bind="enabled: isEnabled, events: { click: onClick }"), like documentation on button demonstrates http://demos.telerik.com/kendo-ui/button/mvvm. Is there a way to prevent click of element while onClick function is executing and when onClick function finishes, element is enabled again.

Upper functionality can be accomplished by first disabling element and at the end of function enabling it again.

<div id="example">

<button data-role="button" data-bind="visible: isVisible, enabled: isEnabled, events: { click: onClick }">Click me</button>

</div>

<script>

var viewModel = kendo.observable({

isVisible: true,

isEnabled: true,

onClick: function() {

this.set("isEnabled", false); // disable

kendoConsole.log("event :: click");

this.set("isEnabled", true); // enable

}

});

kendo.bind($("#example"), viewModel);

</script>

Basically is there (or will be) a mvvm event that behaves like jQuery .one. This would specially be good when dealing with deffered objects like this:

<html>

<head>

<title>bla</title>

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$("#sel" ).on("click", function(e) {

$(this).attr("disabled", "disabled");

console.log("Clicked ....");

$.when(bla()).then(function(success){

console.log("Executed ok: " + success);

}, function(error) {

console.log("error");

});

function bla()

{

var def = $.Deferred();

setTimeout(function(){

def.resolve("ok1");

}, 5000);

return def.promise();

}

});

</script>

</head>

<body>

<button id="sel">Click me</button>

</body>

</html>

MVVM

answered on 26 Feb 2016

1 answer

588 views

Kendo UI Grid inside the a Flexible Container

Hi,

I am using the kendo UI Grid inside the a flexible container. And I want the grid to be auto adjustable according to the available space in the container.
I am able to achieve this behavior by making some changes in the CSS for grid, I am using the following CSS to achieve this behavior.

.grid-auto-adjustable {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
}

But the issue is when we are using Frozen columns. Because of above CSS change (auto-adjustable) we are not able to use Frozen columns feature.

Can I get a sample code with Auto adjustable height and having Frozen columns inside the flex container.

Thanks in advance.

Regards

Chenna Basappa C

Grid

answered on 26 Feb 2016