Questions on Kendo UI for jQuery Forum

1 answer

221 views

Request for Master-Detail CRUD operations for Grid

Hello ,
Can you provide us with project for master-datial CRUD operations for kendo web grid (CRUD for both master and detail)

Thanks

Grid

answered on 09 Apr 2014

8 answers

210 views

Kendo Grid CSS is curoptted on Chrome

Hey,
I have a problem with Kendo grid css over google chrome, please check the attached files which show the problem

Grid

answered on 09 Apr 2014

3 answers

647 views

MVVM Binding + Refresh

Hi Guys

I am new to Kendo MVVM and trying to decipher a way to correctly implement the architecture. I have read many posts and put together a working implementation which I would like to get your take on:

My view.

define(['kendo', 'data', 'utils', 'config'], function (kendo, data, utils, config) {

var _runInit = false;

var browseViewModel = kendo.observable({

browseSource: data.browseServices(),

itemClick: function (e) {

window.localStorage["RequestId"] = e.dataItem.RequestId;

utils.navigate('details.html', 'slide');

}

})

return {

init: function (initEvt) {

//kendo.bind($('#serviceDetailsListview'), browseViewModel, kendo.mobile.ui);

},

beforeShow: function (beforeShowEvt) {},

show: function (e) {

console.log(e.view.params.fromView);

if (e.view.params.fromView != "detailsPage") {

if (!_runInit) {

kendo.bind($('#serviceDetailsListview'), browseViewModel, kendo.mobile.ui);

_runInit = true;

} else {

browseViewModel.set("browseSource", data.browseServices());

}

},

viewModel: browseViewModel

}

});

Data Source:

var browseServices = function () {

var browseDataSource = new kendo.data.DataSource({

requestStart: function (e) {

utils.showLoading();

},

requestEnd: function (e) {

utils.hideLoading();

},

error: function (e) {

var xhr = e.xhr;

var statusCode = e.status;

var errorThrown = e.errorThrown;

alert("A error has occured fetching data from the server.");

},

transport: {

read: {

url: config.browseUrl,

dataType: "json",

cache: false

},

parameterMap: function (options, type) {

var theSettings = utils.getCurrentSettings();

return {

phonelat: window.localStorage["gpsLat"],

phonelon: window.localStorage["gpsLong"],

assetId: window.localStorage["AssetId"],

groupId: window.localStorage["GroupId"],

serviceId: window.localStorage["ServiceId"],

range: theSettings.RequestRange

}

},

change: function (e) {

var data = this.data();

},

schema: {

data: function (response) {

storage.persistServicesCollection(response.Collection);

return response.Collection;

}

});

return browseDataSource;

}

HTML:

<div data-role="view" data-layout="child" data-title="Service Overview" data-show="app.browseView.show" id="serviceDetailsView">

<ul data-role="listview" id="serviceDetailsListview" data-bind="source: browseSource, click: itemClick" data-template="templateServiceDetails" ></ul>

<script type="text/x-kendo-template" id="templateServiceDetails">

<div class="product">

<a data-role="detailbutton" data-style="detaildisclose"></a>

#if (Image != null){#

<img class="pullImage" src='#: Image.ImageUrl#' />

#}else{#

<img class="pullImage" src='images/marker.png' />

#}#

<h3>${Address} </h3>

<p>Range: ${Range} km</p>

<p>Status: ${Status}</p>

<p>Created: ${DateCreated}</p>

</script>

</div>

It seems to work (as in I am getting the expected result), however, I am not sure if this is the correct implementation? The idea is to refresh the view from the remote source onShow?

Is there a better way to design? Am I missing something?

Thanks in advance
Luke

MVVM

answered on 09 Apr 2014

2 answers

97 views

Adding Toolbar to Kendo Grid Causes IE8 Scrollbar Flash

When using the Toolbar method, IE8 flashes the browser vertical scrollbar for a brief moment after the grid is loaded the first time. Without the Toolbar method, the scrollbar is not flashed. Is this a browser/javascript issue, or a Kendo issue?

@(Html.Kendo().Grid<HelpController.AdministrationHelpIndexGridViewModel>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(h => h.Id)

.Visible(false);

columns.Bound(h => h.Name)

.Width(400);

columns.Bound(h => h.Description)

.Width(400);

columns.Bound(h => h.Id)

.Width(500)

.ClientTemplate(Html.ActionLink("#=LinkText#", "ClickThrough", "Help", new { Id = "#=Id#", area = "" }, new { target = "_blank" }).ToHtmlString());

columns.Bound(h => h.DisplayOrder)

.Width(50);

columns.Command(command => { command.Edit(); command.Destroy(); })

.Width(200);

})

.HtmlAttributes(new { style = "width: 1550px;" })

.ToolBar(toolbar => toolbar.Template("<a class=\"k-button k-button-icontext\"><span class=\"k-icon k-i-plus\"></span>Add a help link</a>"))

.Editable(editable => editable.Mode(GridEditMode.InLine))

.Events(events => events.Edit("onEdit"))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Events(events => events.Error("error_handler"))

.Model(model => model.Id(h => h.Id))

.Read(read => read.Action("Index_Read", "Help", new { area = "Administration" }))

.Update(update => update.Action("Index_Update", "Help", new { area = "Administration" }))

.Destroy(update => update.Action("Index_Destroy", "Help", new { area = "Administration" }))

.Events(events => events.RequestEnd("onRequestEnd")))

)

Grid

answered on 08 Apr 2014

1 answer

283 views

Display Chart Legend outside of plot area / Graph?

Hi,

Please see my chart attached. It is very long so I have made it's parent container overflow for scroll, however I need a way to identify to the user what each trend line is.

I can't seem to find the css class for the legend, I would like to absolutely position it outside of the graph perhaps. My other option would be to somehow attach some text to the end portion of the each trendline, but I'm not sure how this would be done. I could not figure out how to attach a note to the very last element in a series either.

Any help with any of these issues would be greatly appreciated!

Thanks!

Charts

answered on 08 Apr 2014

1 answer

163 views

Changing SeriesDefaults Options

Hi,

Is it not possible to set the seriesDefaults options via the chart.options syntax?

I wish to be able to change multiple chart options after initialisation prior to refreshing the datasource, and many function correctly such as:

chart.options.legend.labels.color = "blue";

chart.dataSource.read(data);

However setting anything related to seriesDefaults has not effect:

chart.options.seriechart.options.seriesDefaults.markers.visible = true;

chart.options.seriesDefaults.markers.size = 30;

chart.options.seriesDefaults.markers.border.width = 5;

chart.dataSource.read(data);

Is it not possible to globally change series options such as label visibility? I wish to able to changed these options globally rather than refresh the datasouce and loop through each chartSeries setting options individually.

I have tried the chart.refresh() and chart.redraw() methods after the dataSource is refreshed.

Any help would be appreciated.

Charts

answered on 08 Apr 2014

3 answers

455 views

Not displaying json data

I have a scheduler that I am trying to displaying some events on. I have created a JSBin that shows what I am trying to do. The actual datasource has a transport defined that hits my webservice but I replaced the transport with the data that is actually returned and got the same results.

There should be some events displaying. Admittedly, this is my first scheduler. I started with copy/paste from the demos and tweaked from there. I am at a complete blank as to why those events are not showing up. The best I can think is that there must be a deserialization issue like maybe with the date format or something but that is, of course, a guess.

Any help would be greatly appreciated!

Scheduler

answered on 08 Apr 2014

1 answer

121 views

Kendo Editor in grid edit popup

Is it possible to use the kendo Editor widget for editing a field in the grid popup? Tried without success to figure this out.

Thanks,
Gary

Templates

answered on 08 Apr 2014

13 answers

142 views

VirtualViewSize feature

So I was excited when I saw references to this on the forums, as It's been something I've wanted for a while now (pagination for local data). Unfortunately I've run into issues getting this working on an existing app.

Please correct me if I'm wrong but all I should need to do is add the property to the listview declaration and have the full results as the data property of the datasource no?

The result I'm getting it all the <LI>s are stacked on top of each other. (Yes i'm using the latest Kendo files)

Heres the HTML snippet of my view

<div id="items-view" data-role="view" data-title="Blocks & Items" data-layout="default-layout" data-init="app.items.init" data-show="app.items.showView">

<ul data-role="listview" data-style="inset" data-type="group">

<li>

<ul class="ul-content">

</ul>

</li>

</ul>

</div>

Heres the javascript for it:

var data = app.items.filterLimit(1000, app.items.data);

$("#items-view ul.ul-content").kendoMobileListView({

dataSource: new kendo.data.DataSource({

data: data

}),

template: "<li>#: name #</li>",

endlessScroll: true,

virtualViewSize: 50

});

data variable is a giant json array of items. somewhere in the 500 count range. It's correct, It's the same data i was using previous (looping over and manually appending LI's)

Is there another step that I am missing perhaps? Or am I crazy and this should be working? I'll attach a screenshot of what it's doing....

General Discussions

answered on 08 Apr 2014

4 answers

570 views

Can't get total from datasource

I've been struggling with this all day, and I can't believe it's this hard to get the total number of records returned in a datasource! Very frustrating... I've read the documentation over and over and nothing seems to work for me. I've got a json response that is structured like this:

{ records: [], totalRecordCount: 20, queryRecordCount: 20 }

Here's my dataSource code:

return new kendo.data.DataSource({

transport: {

read: {

type: "POST",

data: request,

cache: false,

url: ServiceUri + "/Associates",

dataType: "json"

}

},

serverPaging: false,

pageSize: 25,

schema: {

data: "records",

total: "totalRecordCount",

model: {

fields: {

Id: { type: "number" },

Name: { type: "string" },

Sex: { type: "string" },

Race: { type: "string" },

Height: { type: "string" },

Weight: { type: "string" },

Age: { type: "number" },

DOB: { type: "date" },

LastChanged: { type: "date", field: "IdentifierDate" }

}

},

});

So when I want to get the total I pass a function to this dataSource (i.e. callback) and return it in the requestEnd event, like so:

requestEnd: function(e) {

callback(e);

},

I put this after the schema block in the dataSource, although I don't think it should matter...? This event never fires, or if it does I cannot break inside of it in Chrome. So I tried using the change event in a similar manner, that never fires either. Here's a complete function attempting to get the dataSource and retrieve the total (normally I would not include the events in the dataSource and then bind them again after the dataSource, but for brevity sake...):

GetAssociates: function (id, pgSize, callback) {

var request = {

"SearchParameters": {

ID: id

}

};

return new kendo.data.DataSource({

transport: {

read: {

type: "POST",

data: request,

cache: false,

url: ServiceUri + "/Associates",

dataType: "json"

}

},

serverPaging: false,

pageSize: pgSize,

schema: {

data: "records",

total: "totalRecordCount",

model: {

fields: {

Id: { type: "number" },

Name: {type: "string" },

Sex: {type: "string" },

Race: {type: "string" },

Height: {type: "string" },

Weight: {type: "string" },

Age: {type: "number" },

DOB: {type: "date" }

}

},

requestEnd: function(e) {

callback(e);

},

change: function(e) {

callback(e);

}

}).bind('change', callback).bind('requestEnd', callback);

}

I just want to do a dataSource.total() and find out if there's anything in my dataSource, and I CANNOT. It always returns 0! And I can see that my response is not zero, so why does it always say zero for the total?? I believe I'm following standard async methods to make sure the response has completed, so I'm stumped and completely frustrated, once again.

I know I sound pretty whiny in this message, but it's just been a long day. I sure would appreciate any help!

Thanks,

Eddie

Data Source

answered on 08 Apr 2014