Questions on Kendo UI for jQuery Forum

4 answers

775 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

594 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

261 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

3 answers

350 views

Drag-and-drop inside Window

Hello,

When draggable element is inside Window widget, then it drags before the window for first 3 times only. Starting from 4th drag-and-drop operation, it drags behind the Window widget. Have a look at the sample code:

<body>

<div id="windowTest" >

<div id="divToDrag" style="width:50px;height:50px;background:yellow;" ></div>

</div>

<script>

$(document).ready(function () {

$("#windowTest").kendoWindow({

width: "200px",

height: "100px"

});

$("#divToDrag").kendoDraggable({

hint: function (element) {

return element.clone();

}

});

</script>

</body>

The problem cause is the following: the dragging element z-index is 10010, but the Window z-index increases from 10003 by 2 every time the drag started. So, for the first drag-and-drop operations, the Window z-index is 10005, 10007, 1009. For the 4th drag-and-drop the z-index became 10011, and the dragging element drags behind the Window.

Can you please suggest me how to fix this problem?

Thanks,
Sergey

Drag and Drop

answered on 04 Mar 2014

4 answers

200 views

[Solved] KendoUI Mobile and desktop browsers

Hi,

Will KendoUI Mobile widgets work on webkit desktop browsers ? It would be more easier to debug a KendoUI mobile application if it works on these browsers (I tried a simple application with Google Chrome but the UI doesn't work at all).

Cordially,
Kakone.

General Discussions

answered on 04 Mar 2014

1 answer

306 views

Angular - Kendo treeview checkbox change event firing multiple times

http://stackoverflow.com/questions/22156602/angular-kendo-treeview-checkbox-change-event-firing-multiple-times

I am trying to implement the checkbox change event using angular but seeing the event firing multiple times when a checkbox is clicked.I have created a plnkr for this, please help. Ideally it should be fired only once.

$scope.treeOptions = {
checkboxes: {
checkChildren: true
},
dataBound: function(e) {
$scope.attachChangeEvent(e);

}

};Event change code: $scope.attachChangeEvent = function(e) {

var dataSource = e.sender.dataSource;
// issue : change event is getting called multiple times for every click on checkbox
dataSource.bind("change", function(e) {
var selectedNodes = 0;

var checkedNodes = [];

$scope.checkedNodeIds(dataSource.view(), checkedNodes);

for (var i = 0; i < checkedNodes.length; i++) {
var nd = checkedNodes[i];
if (nd.checked) {
selectedNodes++;
}
}
// check the console - this is called multiple times for one checkbox click
console.log(selectedNodes);
});
};

Hierarchical Data Source

answered on 04 Mar 2014

7 answers

256 views

Scroller view and endless scrolling on the same page

We've problem putting scroller view and endless scrolling on the same page. The last item of the endless list seems to be hidden beneath the viewport. The problem seems to be solved when we remove the scroller view.

Is there anyway to put Scroller view and endless scrolling on the same page. Thanks

ListView (Mobile)

answered on 04 Mar 2014

1 answer

182 views

PanelBar TypeScript append, insertAfter, insertBefore argument types correct?

The description for append, insertAfter and insertBefore I believe are not defined correctly in the TypeScript definition file.

For example, for append(item, referenceItem ) as defined here:
http://docs.telerik.com/kendo-ui/api/web/panelbar#methods-append

can be JSON or a string (text, url, etc.)

However, the TypeScript definition defines both as strings.

Do these interfaces need to be expanded to accept JSON object directly?

Also the referenceItem parameters says that it can be omitted, but the interface does not indicate that with a '?'.

PanelBar

answered on 04 Mar 2014

1 answer

89 views

Kendo Grid HTML Paging not working

Hello,

Kendo grid paging stops working for 1000 records or more.

Can somebody help?

Thanks!

Grid

answered on 04 Mar 2014

4 answers

1.1K+ views

Kendo Grid - Editable vs Non Editable Columns

I'd like to know if there is a way to easily visibly distinguish editable columns from non-editable columns.

The scenario that I have is that there is a Kendo grid on a page with five columns. Only one of the columns is editable. The other four columns display read-only data that is either preloaded into the data source on page initialization or calculated based on the value that the user enters into the editable column. The grid is using batch editing.

At present, it isn't obvious which fields on the grid are editable vs not editable. Only by clicking each cell can the user determine which cells can be edited. I would like to provide a visual means to indicate which columns are editable vs not editable. One option that I had tried is specifying a background color for non-editable fields via the "style" config option for each column. However, this option isn't viable because it overrides the row highlighting color. Any suggestions on how to visibly distinguish editable vs non-editable columns?

Grid

answered on 03 Mar 2014