Questions on Kendo UI for jQuery Forum

1 answer

872 views

Hi,

When a record is added to grid ;it just adds to top of the rows in the grid by default.And we can retrieve the row item by below statement.

// returns first record in datasource of the Grid
$('#Grid').data().kendoGrid.dataSource.data()[0];

What if I click any header column of the grid which sorts grid list and try to add the new record and the record adds to end of list in Grid Data source then how to retrive that record which just got added to last row of the grid?

Is their a better way to retrieve the latest dirty row in the grid.

Thanks,
chatrapathi chennam

Grid

answered on 18 Jun 2014

2 answers

178 views

strategy-cluster kendo maps

Hey Guys,
I have seen some threads saying this is not supported can some one guide how to acheiev this
Some real example would be helpful

http://dev.openlayers.org/releases/OpenLayers-2.12/examples/strategy-cluster.html

Regards,
Rahul Mehta

Map

answered on 18 Jun 2014

1 answer

251 views

Kendo UI MVC Grid and client paging

Hi,

I have a Kendo MVC Grid with start date and end date filters on the same page:

@(Html.Kendo().Grid<UnileverMetricsSystem.Entities.VisitsByTimeDTO>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.DateFormat).Width(140);
            columns.Bound(c => c.Product).Width(190);
            columns.Bound(c => c.Duration);
            columns.AutoGenerate(false);

        })
        .HtmlAttributes(new { style = "height: 380px;" })
        .Scrollable()

        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            )
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("RefreshTable", "AverageDuration").Data("additionalInfo"))
        )
    )

The initial grid data is binded calling RefreshTable action.
When the user click on a "Show" button I want to filter the grid taking into account the start and end dates.
I do this through an Ajax call to a controller:

$.ajax({
                type: "POST",
                url: controllerName + '/RefreshTable',
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                data: JSON.stringify({ country: country, startDate: startDate, endDate: endDate, groupedBy: groupedBy, product: product }),
                success: function (results) {

                    $("#grid").kendoGrid({
                        autoBind: false,
                        dataSource: results,
                        pageable: {

                            pageSize: 5,
                            autoBind: false,
                            info: true,
                            refresh: false
                        }
                    });

                    dataSource2.read();
                }
            });

The new data loads correctly in the grid but when i change the page I am paging the data that was initially shown in the grid, not the filtered by dates data.
How can I implement client paging with this configuration?

Thanks in advance.

Grid

answered on 18 Jun 2014

3 answers

166 views

datetimepicker display error.

Hi,

i met one problem with datetime picker. It's not show all days. Miss something in css or html?

DatePicker

answered on 18 Jun 2014

3 answers

1.5K+ views

TypeError: 'open' called on an object that does not implement interface Window

This is a kendo DropDownList. I want to show an alert when it is opened.

@(Html.Kendo()

.DropDownList()

.Name("DropdownList")

.BindTo(new List<SelectListItem>() { new SelectListItem() { Text = "Drop Down" },

new SelectListItem() { Text = "Office" } })

.Events(e=>e.Open("open")))

// Following is the simple script

<script type="text/javascript">

function open(e) {

alert("Hello");

}

</script>

This gives me the error "TypeError: 'open' called on an object that does not implement interface Window."

Thanks

General Discussions

answered on 18 Jun 2014

2 answers

108 views

[Solved] Shaping data for Kendo UI PanelBar

Hi All:

I was working with underscore and figured out that I could reformat the data for the PanelBar control.
Here is my example code:

$(function () {

//

var meetingDataSource = new kendo.data.DataSource({

data: [

{ MeetingId: 65, Year: 2014, MeetingDate: '2014-05-14 18:00:00', Title: "30 tools for modern .net web development in 60 minutes" },

{ MeetingId: 64, Year: 2014, MeetingDate: '2014-04-09 18:00:00', Title: "azure websites deep dive" },

{ MeetingId: 63, Year: 2014, MeetingDate: '2014-03-12 18:00:00', Title: "cancelled" },

{ MeetingId: 62, Year: 2014, MeetingDate: '2014-02-12 18:00:00', Title: "getting to know windows azure mobile services" },

{ MeetingId: 60, Year: 2013, MeetingDate: '2013-12-11 18:00:00', Title: "custom graphics for your web application: the html5 canvas and kinetic.js" },

{ MeetingId: 59, Year: 2013, MeetingDate: '2013-11-13 18:00:00', Title: "four platforms. one codebase. xamarin." },

{ MeetingId: 58, Year: 2013, MeetingDate: '2013-10-09 18:00:00', Title: "it’s cheaper than therapy: building an “eliza” psychotherapist app in windows 8" },

{ MeetingId: 57, Year: 2013, MeetingDate: '2013-09-11 18:00:00', Title: "if typescript is the answer, what is the question?" }

]

});

//

meetingDataSource.fetch(function () {

//

var meetings = meetingDataSource.data();

//

var years = _.chain(meetings)

.pluck('Year')

.uniq()

.value();

//

var shapedData = _.reduce(years, function (memo, year) {

var exp = false;

if (memo.length == 0) exp = true;

//

var det = _.chain(meetings)

.filter(function (meeting) { return meeting.Year == year; })

.map(function (meeting) {

var m = meeting;

return { value: m.MeetingId, text: m.Title };

})

.value();

memo.push({ value: year, text: year, expanded: exp, items: det });

return memo;

}, []);

//

$("#inline-listview").kendoPanelBar({

dataSource: shapedData,

expandMode: "single"

}).data("kendoPanelBar");

});

//

});

The data is read with a dataSource fetch command. In the fetch function, I first extract the years for the level 0 of the panel-bar, then I use the years as input for the reduce function and reprocess the input data. The years are the level 0 and the level 1 is the reprocessed data. So, this process could easily adapted to data in a database.

Phil

PanelBar

answered on 18 Jun 2014

2 answers

162 views

Diagram save error

Hi,

I am created one new same application for using kendo diagram. Now i am trying to save kendo diagram, some time i got 'TypeError: Cannot convert object to primitive value' error. How to solve this issue.

The sample application url is : http://demos.telerik.com/kendo-ui/html5-diagram-sample-app

Thank you!
Senthilkumar.V

Diagram

answered on 18 Jun 2014

5 answers

533 views

[Solved] Drawer as navigation menu?

Is it possible to use the drawer control to contain a navigation menu instead of containing all the views of the various pages? Ideally, I'd like to use this control but have each view item redirect to another page rather than having actual content in the view item. As always, thanks for your help.

Regards,
Brian

Drawer (Mobile)

answered on 18 Jun 2014

2 answers

347 views

[Solved] ListView refresh not rendering

Hi:
I am updating after initial rendering. I am manually modifying the datasource data as follows:

<div id ="listView2"></div>

<script>

$("#listView2").kendoListView({

dataSource: { data: [] },

template: "<div>#:name#</div>"

});

var listView2 = $("#listView2").data("kendoListView");

listView2.dataSource.data = [ { name: "Jane Doe" }, { name: "John Doe" }];

listView2.refresh();

</script>

I expected the refresh after the data assignment to render the ListView widget, but the value of length is never set when refresh is called.

Phil

ListView

answered on 17 Jun 2014

6 answers

271 views

Dynamically select on chart without refresh

Hi,

We are currently evaluating kendo UI charts, and here is our use case.

we need to display large number of points on line chart, for a date range selected.

We plan to use 2 charts on a page, one will be a selection/navigation chart (like this one: http://demos.telerik.com/kendo-ui/chart-api/selection) used to select date range. 2nd chart will be a line chart with multiple series. (screen cap attached)

Also we plan to have navigation options "<Next> Month, Week, Day <Prev>" so that user has an option to move/navigate through dates (without clicking/dragging the zipper on the navigation chart). During this we want the keep the navigation chart synchronized with Next/prev buttons navigation.
we could achieve this by setting:

navchart.options.categoryAxis.select.from
navchart.options.categoryAxis.select.to

But each time we need to do navchart.refresh() to reflect the changes.

This is causing some performance issues when the charts have more number of points (taking abt 5 to 6 seconds to redraw both charts for 3 series, each with 6000 points).
I noticed we can cut this time by half if I don't refresh the Selection/navigation chart (which really does not need to refresh, other than just moving the date selection zipper to keep both charts synchronized)

I have attached a screen shot of how our chart page looks like.

Please suggest on how to keep the Navigation/Selection chart synchronized without refreshing it each time.

Thanks very much!

Can you please suggest

Charts

answered on 17 Jun 2014