Questions on Kendo UI for jQuery Forum

7 answers

748 views

kendo.web.min.js and kendo.dataviz.min.js conflicts in pageable Grid.

Hi,
The problem occurs when I add the <script src="../../../js/kendo.dataviz.min.js"></script> to the \examples\web\grid\index.html example. Then I refresh the IE window, a JS error "Microsoft JScript runtime error: Object doesn't support this action" occurs. If I change the "pagable:true" in the \examples\web\grid\index.html to "pagable:false", the JS error disappears. You can see the details in the attached image.
I have no idea why this happens. Can you give me a solution to fix it?

Any clue and suggestion is appreciated. thank you.

Grid

answered on 05 Mar 2014

4 answers

292 views

GeoJSON MultiPoint Not Displaying

I can not seem to get a GeoJSON layer with MultiPoint data to display. My map code looks like this (using the ASP.NET MVC wrapper):

@(Html.Kendo().Map()

.Name("map")

.Center(39.50, -98.35)

.Zoom(3)

.Layers(x =>

{

x.Add().Type(MapLayerType.Tile).UrlTemplateId("http://tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png");

x.Add().Type(MapLayerType.Shape)

.Style(y => y.Fill(z => z.Color("#000000").Opacity(1)))

.DataSource(y => y.GeoJson().Read(z => z.Action(MVC.MyController.Map())));

})

.Events(events => events

.ShapeCreated("onShapeCreated")

)

<script>

function onShapeCreated(e) {

alert('shape!');

}

</script>

My action code looks like (using JSON.NET Linq):

public virtual ActionResult Map()

{

List<Tuple<double, double>> coordinates = new List<Tuple<double,double>>(){

new Tuple<double, double>(39.50, -98.35),

new Tuple<double, double>(30.268107, -97.744821)

};

JObject featureCollection = new JObject(

new JProperty("type", "FeatureCollection"),

new JProperty("features", new JArray(

new JObject(

new JProperty("type", "Feature"),

new JProperty("properties", new JObject()),

new JProperty("geometry", new JObject(

new JProperty("type", "MultiPoint"),

new JProperty("coordinates", coordinates.Select(c => new JArray(c.Item1, c.Item2)).ToArray())

))

)

))

);

ContentResult result = new ContentResult();

result.Content = featureCollection.ToString();

result.ContentType = "application/json";

return result;

}

I have verified that the action gets called and that it generates the following GeoJSON file:

{

"type": "FeatureCollection",

"features": [

{

"type": "Feature",

"properties": {},

"geometry": {

"type": "MultiPoint",

"coordinates": [

[

39.5,

-98.35

],

[

30.268107,

-97.744821

]

}

]

}

None of the points are shown on the map. The alert in onShapeCreated also doesn't get called, which makes me think there's something wrong with the GeoJSON - but it looks good to me based on the specification. What am I missing?

Thanks,

Dave

Map

answered on 05 Mar 2014

1 answer

512 views

Get changed / Updated value of drop down in the grid

I want to get the updated / changed value of the drop down, when user change it while editing in console.log.

<script>

$(document).ready(function () {

$("#grid").kendoGrid({

dataSource: {

data: itemData(50),

pageSize: 12,

change: function(e) {

var item = e.items[0];

console.log(item.get("gridActionPlan.gridActionPlanID"));

}

},

height: 475,

groupable: true,

navigatable: true,

sortable: true,

filterable: true,

resizable: true,

columnMenu: true,

pageable: true,

toolbar: ["save", "cancel"],

columns: [

{ field: "gridActionPlanID", values: actionPlanValues, title: "Action Plan", width: 200 },

{ field: "gridNewRetailSP", title: "New Retail SP", width: 120 },

{ field: "gridPercentEffectedStock", title: "% of Effected Stock", width: 150 },

{ field: "gridSales", title: "Sales", width: 150 },

{ field: "gridNetImpact", title: "Net Impact", width: 150 }],

editable: true

});

function itemData(count) {

var data = [];

for (var i = 0; i < count; i++) {

data.push({

gridActionPlanID : 0,

gridActionPlan : {

gridActionPlanID : 0,

gridActionPlanName : "[Select Action Plan]"

},

gridNewRetailSP : 0,

gridPercentEffectedStock : 0,

gridSales : 0,

gridNetImpact : 0

});

}

return data;

}

var actionPlanValues = [{

"value": 0,

"text": "[Select Action Plan]"

},{

"value": 1,

"text": "SP Adjustment / Display"

},{

"value": 2,

"text": "Clearances"

},{

"value": 3,

"text": "Return to Supplier"

},{

"value": 4,

"text": "Inter-Store Transfer"

},{

"value": 5,

"text": "Seasonal Import or Local"

},{

"value": 6,

"text": "Bar Code Problem"

},{

"value": 7,

"text": "Waste"

},{

"value": 8,

"text": "Stock Problem"

},{

"value": 9,

"text": "Display Piece"

},{

"value": 10,

"text": "Color / Size / Range"

}];

</script>

Grid

answered on 05 Mar 2014

3 answers

605 views

Series Label Template

I'm trying to apply a template to the chart serias label... Currently when I chose to make the series lable visible it displays the value exactly as saved in the database. For instance if the value in the database is 0.621 then the value at the top of the column displays 0.621; however, on the tooltips I have added formatting that works and in this case I've asked the tooltip to round to two decimal places so in the tooltip it displays: 0.62 and the value 0.663 would round to 0.67. I want to be able to apply the same format to the label on the series... hopefully the code below makes sense.. I can dummy it up without the model references if necessary... by the way the "thetemplateformat" is just a variable on the view... It works correctly for the tooltip but has no apparent affect on the series... Thanks..

series.Column(s => s.rate1_1).Name(Model.Rate01Lbl).Color(Model.Rate01Clr).Labels(l => l.Visible(Model.ShowChartValue_yn).Template(thetemplateformat));

Charts

answered on 04 Mar 2014

1 answer

82 views

What is your guide line for responsive image in list view?

Hi,

We would like to do Instagram-like interface and have problem incorporating images with Listview. We found out that ListView doesn't displayed correctly if we do not specify height of the image. However, we cannot set image height for every devices. Please advice.

ListView (Mobile)

answered on 04 Mar 2014

1 answer

183 views

Is it possible to achieve Instagram's grid using ListView?

Hi,

I would like to make Instagram's grid-like interface. Is it possible to do so using ListView?

I have tried incorporating Endless Scroll and Pull to Refresh. But the ListView has problem making it into grid interface.

This is a piece of CSS that I am using:
ul#product-list > li {Width:50%; float:left;}

ListView (Mobile)

answered on 04 Mar 2014

1 answer

58 views

BUG - IE10+ selection performance fix

All - we just had ran into an issue where the performance of row selection was painful in IE10+. Looking on the forums, we saw that others have had issues with this and that it was "better" in the latest release. The cause is apparently's IE's slow handling of the CSS ":not" selector.

We had to find a fix and believe we have traced it down to a problem in Kendo's code. Basically, if you have a grid and you do NOT use Grouping or Footers, the code thinks you do and thus appends extra ":not" selectors to the CSS queries. The fix for this assuming you DO NOT use grouping or footers is to set these templates to "". The problem is Kendo does a !== "" check and if you don't define them and leave them undefined, it assumes you do have them.

Here is our code fix:

// Push the column info
columnInfo.push(
{
// OMIT
groupFooterTemplate: "",
footerTemplate: ""
});

The offending code in Kendo is Line #26619 inside of _hasFooters

if (cols[j].footerTemplate !== "" || cols[j].groupFooterTemplate !== "") {
return true;
}

Hopefully this helps some.

Grid

answered on 04 Mar 2014

4 answers

730 views

Web API + OData - PATCH request 400 error

I have a KendoUI DataSource linked up to a WebApi 2 OData controller and am having problems with update operations. I can create and delete just fine.

When I make the call to sync the datasource to the server after making any updates I get a 400 error:

{

"odata.error":{

"code":"","message":{

"lang":"en-US","value":"The request is invalid."

},"innererror":{

"message":"patch : Invalid JSON. A token was not recognized in the JSON content.\r\n","type":"","stacktrace":""

}

Debugging in Visual Studio shows that the patch function is being passed the Id but not the Company object. Firebug shows that the PATCH request looks like this when I change the title of "Test Company" to "Test Company test" and click save:

models=%7B%22Id%22%3A1026%2C%22Title%22%3A%22Test+Company+test%22%7D

I have a hunch there is something wonky about this that the server doesn't understand.

The model is simple and I left the controller as whatever VS generated for me:

Model:

01.public class Company {

02. public Company() { }

03.

04. public Company(Company company) {

05. this.Id = company.Id;

06. this.Title = company.Title;

07. this.Projects = company.Projects;

08. }

09.

10. public int Id { get; set; }

11. public string Title { get; set; }

12.

13. public virtual ICollection<Project> Projects { get; set; }

14.}

Controller:

001.public class CompanyController : ODataController

002.{

003. private ApplicationDbContext db = new ApplicationDbContext();

004.

005. // GET odata/Company

006. [Queryable]

007. public IQueryable<Company> GetCompany()

008. {

009. return db.Companies;

010. }

011.

012. // GET odata/Company(5)

013. [Queryable]

014. public SingleResult<Company> GetCompany([FromODataUri] int key)

015. {

016. return SingleResult.Create(db.Companies.Where(company => company.Id == key));

017. }

018.

019. // PUT odata/Company(5)

020. public async Task<IHttpActionResult> Put([FromODataUri] int key, Company company)

021. {

022. if (!ModelState.IsValid)

023. {

024. return BadRequest(ModelState);

025. }

026.

027. if (key != company.Id)

028. {

029. return BadRequest();

030. }

031.

032. db.Entry(company).State = EntityState.Modified;

033.

034. try

035. {

036. await db.SaveChangesAsync();

037. }

038. catch (DbUpdateConcurrencyException)

039. {

040. if (!CompanyExists(key))

041. {

042. return NotFound();

043. }

044. else

045. {

046. throw;

047. }

048. }

049.

050. return Updated(company);

051. }

052.

053. // POST odata/Company

054. public async Task<IHttpActionResult> Post(Company company)

055. {

056. if (!ModelState.IsValid)

057. {

058. return BadRequest(ModelState);

059. }

060.

061. db.Companies.Add(company);

062. await db.SaveChangesAsync();

063.

064. return Created(company);

065. }

066.

067. // PATCH odata/Company(5)

068. [AcceptVerbs("PATCH", "MERGE")]

069. public async Task<IHttpActionResult> Patch([FromODataUri] int key, Delta<Company> patch)

070. {

071. if (!ModelState.IsValid)

072. {

073. return BadRequest(ModelState);

074. }

075.

076. Company company = await db.Companies.FindAsync(key);

077. if (company == null)

078. {

079. return NotFound();

080. }

081.

082. patch.Patch(company);

083.

084. try

085. {

086. await db.SaveChangesAsync();

087. }

088. catch (DbUpdateConcurrencyException)

089. {

090. if (!CompanyExists(key))

091. {

092. return NotFound();

093. }

094. else

095. {

096. throw;

097. }

098. }

099.

100. return Updated(company);

101. }

102.

103. // DELETE odata/Company(5)

104. public async Task<IHttpActionResult> Delete([FromODataUri] int key)

105. {

106. Company company = await db.Companies.FindAsync(key);

107. if (company == null)

108. {

109. return NotFound();

110. }

111.

112. db.Companies.Remove(company);

113. await db.SaveChangesAsync();

114.

115. return StatusCode(HttpStatusCode.NoContent);

116. }

117.

118. // GET odata/Company(5)/Projects

119. [Queryable]

120. public IQueryable<Project> GetProjects([FromODataUri] int key)

121. {

122. return db.Companies.Where(m => m.Id == key).SelectMany(m => m.Projects);

123. }

124.

125. protected override void Dispose(bool disposing)

126. {

127. if (disposing)

128. {

129. db.Dispose();

130. }

131. base.Dispose(disposing);

132. }

133.

134. private bool CompanyExists(int key)

135. {

136. return db.Companies.Count(e => e.Id == key) > 0;

137. }

138.}

Finally, the KendoUI, HTML/Javascript is this:

001.<h2>Company List</h2>

002.

003.<div id="company-data">

004. <div class="col-md-3 col-sm-5 col-xs-5">

005. <div id="company-list" style="padding: 0px; height: 500px; overflow: auto" data-role="listview" data-template="list-template" data-bind="source: companies, events: {change: OnSelect}" data-selectable="true"></div>

006. <div>

007. <button class="btn btn-success btn-sm" id="btn-add-company"><span class="glyphicon glyphicon-plus"></span> Add</button>

008. <button class="btn btn-danger btn-sm" id="btn-delete-company" data-bind="visible: hasSelection, click: deleteSelection"><span class="glyphicon glyphicon-remove"></span> Delete</button>

009. <button class="btn btn-default btn-sm" id="btn-clear-company" data-bind="visible: hasSelection, click: clearSelection"><span class="glyphicon glyphicon-ban-circle"></span> Clear</button>

010. <button class="btn btn-primary btn-sm btn-block" id="btn-save" data-bind="visible: hasChanges, click: saveChanges"><span class="glyphicon glyphicon-cloud-upload"></span> Save All</button>

011. </div>

012. </div>

013. <div class="col-md-9 col-sm-7 col-xs-7" data-bind="visible: hasSelection">

014. <label for="company-title">Title:</label><br />

015. <input id="company-title" data-bind="value: selectedItem.Title" ><br />

016. </div>

017.</div>

018.

019.<script type="text/x-kendo-template" id="list-template">

020. <div class="company" style="cursor: pointer">

021. <span data-bind="text: Title"></span>

022. </div>

023.</script>

024.

025.<script>

026. $(function () {

027. var firstSync = true;

028. var companyVM = new kendo.observable({

029. // Data Source.

030. companies: new kendo.data.DataSource({

031. type: 'odata',

032. transport: {

033. create: {

034. url: '/odata/Company',

035. dataType: 'json',

036. type: 'POST'

037. },

038. read: {

039. url: '/odata/Company',

040. dataType: 'json'

041. },

042. update: {

043. url: function (data) {

044. return '/odata/Company(' + data.Id + ')';

045. },

046. dataType: 'json',

047. type: 'PATCH'

048. },

049. destroy: {

050. url: function (data) {

051. return '/odata/Company(' + data.Id + ')';

052. },

053. dataType: 'json',

054. type: 'DELETE'

055. },

056. parameterMap: function (options, operation) {

057. if (operation !== "read" && options) {

058. console.log(operation + '*: ' + kendo.stringify(options));

059. return {

060. models: kendo.stringify(options)

061. };

062. }

063. console.log(operation + ': ' + kendo.stringify(options));

064. return options;

065. }

066. },

067. schema: {

068. data: function (data) {

069. return data['value'];

070. },

071. total: function (data) {

072. return data['odata.count'];

073. },

074. model: {

075. id: 'Id',

076. fields: {

077. Title: { type: 'string' }

078. }

079. }

080. },

081. change: function () {

082. // We don't want to fire the first time the data loads because that counts as changed.

083. if (!firstSync)

084. companyVM.set('hasChanges', true);

085. else

086. firstSync = false;

087. }

088. }),

089.

090. // Properties.

091. selectedItem: null,

092. hasSelection: function () {

093. return this.get('selectedItem') != null;

094. },

095. hasChanges: false,

096.

097. // Functions.

098. clearSelection: function() {

099. this.set('selectedItem', null);

100. $('#company-list').getKendoListView().clearSelection();

101. },

102. saveChanges: function() {

103. this.companies.sync();

104. this.set('hasChanges', false);

105. },

106. deleteSelection: function () {

107. if (confirm('Warning, deletion is permanent! Are you sure you wish to delete this item?')) {

108. this.companies.remove(this.selectedItem);

109. this.set('hasChanges', true);

110. this.clearSelection();

111. }

112. },

113.

114. // Events.

115. OnSelect: function (e) {

116. var list = $(e.sender.element).getKendoListView();

117. var row = list.select();

118. var item = list.dataSource.getByUid(row.data('uid'));

119.

120. this.set('selectedItem', item);

121. }

122. });

123.

124. kendo.bind($('#company-data'), companyVM);

125. });

126.</script>

Data Source

answered on 04 Mar 2014

3 answers

565 views

MVVM binding for Grid Selected row

Hi ,

I have a grid which is binded to list<objects> lets say "List<employee> "

Now I want to have a property in viewmodel like "SelectedEmployee"

How can i bind or configure this?
If i select a row in html page it should fill selected employee?

Thanks,
Mahesh Gupta

Grid

answered on 04 Mar 2014

1 answer

239 views

Arrow key paging is not working kendoGrid but numeric paging is working properly.

When we add some record, its arrow key (<< < > >>) paging is not working properly. But Number paging is (1,2,3,4,5)working properly.
How to make it correct? Can you please help me as soon as possible.

Function to show data.

var diagnosticDataSource = null;
var template = kendo.template($("#diagnosticRowTemplate").html());

var diagnosticGrid;

diagnosticDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/ControllerName/Action",
dataType: "json",
}
},
pageSize: 10
});

function ShowDiagnostics() {
diagnosticDataSource.read();
var columns = [
{ title: "DiagnosticBuilderID", field: "DiagnosticBuilderID", hidden: true, type: "number", filterable: false },
{ title: "Template Name", field: "TemplateName", hidden: false, type: "string", filterable: false },
{ title: "Target", field: "Target", hidden: false, type: "string", filterable: false },
{ title: "No. of Questions", field: "NumberOfQuestions", hidden: false, type: "number", filterable: false },
{ title: "Action", field: "", hidden: false, type: "string", filterable: false }

];

diagnosticGrid = $("#tblDiagnostics").kendoGridAcademy({
columns: columns,
dataSource: diagnosticDataSource,
rowTemplate: kendo.template($("#diagnosticRowTemplate").html()),
filterable: true,
pageable: true,
serverPaging: true,
serverFiltering: true,
serverSorting: true
});
$(diagnosticGrid).refresh();
}

Grid

answered on 04 Mar 2014