Questions on Kendo UI for jQuery Forum

4 answers

244 views

Hello,

Let me preface this question with the fact that we are very new to List Views and Kendo UI in general. We are developing our project with MVC and using the client side (non-server side wrapper) approach to the Kendo UI List Views. We pass JSON down to the view and render the List View with no problems. We can add list items fine as well. The only issue is when we try to update/delete a record we are not properly returning JSON back to our controller server side. I believe the issue is in our ParameterMap code:

I have tested to ensure that the JSON data in parameter map is valid for the record updated and picks up the change.

$(document).ready(function () {
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: 'Read',
dataType: 'json'
},
destroy: {
url: 'Destroy',
dataType: 'json'
},
create: {
url: 'Create',
dataType: 'json'
},
update: {
url: 'Update',
dataType: 'json'
},
parameterMap: function (data, operation) {
if (operation == "update") {
return kendo.stringify(data); //what to return here?
}
}
},
schema: {
data: 'Data',
model: {
id: 'LoanNumber',
fields: {
LoanNumber: 'LoanNumber',
PrimaryCifNumber: 'PrimaryCifNumber',
GrossLoanAmount: 'GrossLoanAmount',
Opit: 'Opit',
RefinanceAmount: 'RefinanceAmount',
LoanLeaseType: 'LoanLeaseType',
RepaymentType: 'RepaymentType',
LoanLeaseTermMonths: 'LoanLeaseTermMonths',
RepaymentFrequency: 'RepaymentFrequency',
PreApproval: 'PreApproval',
CollateralType: 'CollateralType'
}
}
}
});
var listView = $("#LineofCreditsListView").kendoListView({
selectable: true,
navigatable: true,
editable: true,
dataSource: dataSource,
template: kendo.template($("#template").html()),
editTemplate: kendo.template($("#editTemplate").html()),
}).data("kendoListView");

Our controller/Action Method for update is actually reached when committing the update but nothing is in the parameter request:

public void Update(JsonResult request)
{
//update DB
}

My question is - what is the standard way of passing in JSON to an action method for update? We want to stay away from the server side wrapper in using Kendo UI. We basically want to just pass JSON back and forth between the client and server. If you have a sample project that we could view that demonstrates a client side approach that would be great.

Thanks,
Justin

ListView

answered on 07 Oct 2013

3 answers

1.0K+ views

[Solved] Problem with input type date in iOS

Hi

In my application I have a view that has a date type input, the view has an associated field model and is associated by binding to a model property. Code:

<div id="selectMenu" data-role="view" data-title="Emp-Suc" data-model="selectMenu_model">

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

<li>

<label>

Fecha Proceso

<input type="date" data-bind="value: processDate"/>

</label>

</li>

<li>

<i></i><a data-role="button" data-bind="click:submit" style="float: right;" data-icon="details" >Continuar</a>

</li>

</ul>

</div>

This is the model:

var selectMenu_model = new kendo.observable({

company: null,

branch: null,

processDate: "",

companies: function(){

dataConfigurationHierarchical.set("method","GetCompanies");

dataConfigurationHierarchical.set("params", { login: kendo.stringify(userModel.get("login"))});

return dataConfigurationHierarchical.getSource();

},

branches: function(){

dataConfigurationHierarchical.set("method","GetBranches");

dataConfigurationHierarchical.set("params", { login: kendo.stringify(userModel.get("login"))});

return dataConfigurationHierarchical.getSource();

},

submit: function(){

var cp = $("#company").data("kendoDropDownList").value();

var br = $("#branch").data("kendoDropDownList").value();

var pd = selectMenu_model.get("processDate");

//console.log("Compañia: " + cp + " Sucursal: " + br);

if(cp !== '' && br !== '' && pd !== ''){

app.navigate("views/menu.html");

}

},

});

The problem is when I want to get the value of the date field, I have clear that the documentation says that you get with model.get ("property") in my case would use selectMenu_model.get ("processDate") or this.get("processDate"). It is assumed that when you change the date changes the value in the model. I tried in the browser and it works fine, I can get the value, I tried it on Android 4.0 ICS and also worked well but I test in Safari iOS 5.1 and when I make the date change, the model do not change is that the value is null, as initialized. Forget the methods, that me is working well (companies, branches, submit) ..

I appreciate a response.

General Discussions

answered on 07 Oct 2013

2 answers

174 views

[Solved] How to add Twitter Bootstrap badge to Text off PanelBar?

Hello,

I would like to add a Twitter Bootstrap badge to Text off PanelBar? I tried this, but it didn't work:

01.@(Html.Kendo().PanelBar()

02. .Name("NavigationBar")

03. .Items(panelBar =>

04. {

05. panelBar.Add().Text(@LayoutResource.Actions)

06. .Items(item =>

07. {

08. item.Add().Content("<a href=\"#\"><span class=\"badge pull-right\">42</span>Home</a>");

09. });

10. }

11. )

12. )

I'll be grateful for help. In atachments is a screen with this what I mean.

Damian

PanelBar

answered on 07 Oct 2013

1 answer

294 views

Update Pie chart when Kendo Grid changes

I have a simple Kendo grid with inline editing capabilities that I want to tie to a Pie chart.
Basically, when I update the value of a certain row[column] in the grid, I want the Pie chart
to reflect the change and redraw immediately. How can I do that?

The data for the grid is saved/added to a List<ProductViewModel> which has Name and Price properties.

Charts

answered on 07 Oct 2013

3 answers

131 views

[Solved] Tab does not select when page local dataUrlField data is specified.

The example below illustrates a case in which tabs do not select when the dataUrlField is specified as a page local href such as '#content1'.
It seems like this case should work since the select event fires and the correct element is passed in. It would be ideal if there was a more reliable way to obtain access to the data element to which a tab is bound.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<link href="kendo.common.min.css" rel="stylesheet" />

<link href="kendo.default.min.css" rel="stylesheet" />

<script src="jquery.min.js"></script>

<script src="kendo.all.min.js"></script>

<script>

$(function () {

var data = [{ Name: 'Tab 1', Url: '#content1' }, { Name: 'Tab 2', Url: '#content2' }];

$("#tabstrip").kendoTabStrip({

dataTextField: "Name",

dataUrlField: "Url",

dataSource: data,

select: function (el) {

//would be nice to have a reference to the data source data item here rather than relying on the item index.

var itemIndex = $(el.item).index();

$('.tabContent').hide();

$('#content' + itemIndex).show();

}

});

getSelectedTabIndex = function () {

return $("#tabstrip").data("kendoTabStrip").select().index();

}

$('#showSelectedTabIndex').click(function () {

//always returns -1

alert(getSelectedTabIndex());

});

</script>

</head>

<body>

1.) Click a tab <br />

2.) Click the Show Selected Tab Index button.<br />

<br />

The tab is not visually selected and the value returned for the selected index is -1.

<br /><br />

<button id="showSelectedTabIndex">Show Selected Tab Index</button>

<div id="tabstrip"></div>

<div id="content0" class="tabContent" style="display:none;">Content 1</div>

<div id="content1" class="tabContent" style="display:none;">Content 2</div>

</body>

</html>

TabStrip

answered on 07 Oct 2013

12 answers

278 views

swipe issue in ios 7

In ios7, when I swipe left to right it navigates to the previous page. This is breaking my single page app. What is the correct way to handle this navigation when using kendo mobile and ios7 safari?

Are there any guidelines or workarounds?

Application

answered on 07 Oct 2013

5 answers

472 views

[Solved] Kendo datasource custom filter operator issue

Hi,

I have an issue regarding a custom filter operator that doesn't accept string value.
I have a grid and I want to filter the grid's datasource on multiple fields using 'or' logic, using a text input.

I've prepared a jsfiddle: http://jsfiddle.net/angheca001/6BC26/4/
If i pass a numeric value into the input it works fine but the problem is when i put a string value in the input:
I get a 'ReferenceError' telling me that the actual value of the input is undefined (not the variable but the actual value)
Example:
- i put '1' into the input field, it filters fine and shows the row containing '123' in the targets field
- i put 'a' and it says 'ReferenceError: a is not defined'

Thanks,
Catalin

Data Source

answered on 07 Oct 2013

6 answers

332 views

Request for a demo using CRUD Master-Detail, MVC,Razor and Entities

Hi!

I am struggling to get a master-detail fully working (and I m not succeding...unfortunately)

The site has lots of demos but I cannot find one that covers Ajax KendoGrid Master-Detail CRUD in both using MVC + Entities Framework + Razor.

I would appreciate it if you upload such a demo or point me somewhere that something like that exists.

Thanx in advance

Grid

answered on 07 Oct 2013

1 answer

69 views

Are Kendo DataSources able to handle data response sizes that differ from PageSize?

We have noticed that dataSources can drop rows in a few scenarios. After parsing the data from the server while it's inserting stuff into the dataSource._ranges[] array you can notice that not all of the rows that were received by dataSource:parse() and dataSource:data() are available in the ranges.

If the data response size is less than the pageSize() value then the grid has problems scrolling and paging, and upon scrolling, the dataSource() will continually request (page 1) and (page 2) over an over again.

If the data response size is larger than the pageSize() it might work, but we are unsure. We have also noticed that if the data response size is 2x the pageSize() then we are more likely to have an issue with data finding it's way in the ranges.

The server is aggregating data from several services and it's hard to predict the number of records that will be returned.

Should kendo support server responses that have more or less data than the page size suggests?

Data Source

answered on 07 Oct 2013

8 answers

1.6K+ views

[Solved] Hierarchical data source and treeview.

Hello!

I have following data strucure: there are proejcts which has some items, these items can have other items as childs and as parents
accordingly.
--project1:
    --item1
            --item3
                  --item4
    --item2
--project2:
   //...

EntityResource.query(function (entities)

{

     //Entities are loaded dynamically when project selected.

//form data and append to tree

treeview.append(..., projectNode);

}

Entities is a simple array of Resource objects (I use REST functionality from AngularJS), and some of them has circular references to each other,
say I have some EntityDto which has Children property which is array of child entities, and there is also Parent property which points to parent entity.

EntityDto has following properties:
$id: "1"
Children: Array[2]
DtoKey: "EntityId=77"
EntityId: 77
Name: "file10.2"
Parent: null

So I decided to use existing functionality like hierarchical data source:

EntityResource.query(function (entities)

{

var localDataSource = new

kendo.data.HierarchicalDataSource({ data: entities});

     localDataSource .fetch();

treeview.append(localDataSource ,projectNode);

}

And of course it doesn't work... I guess I have to specify schema and model, but I didn't find any example that is similiar to my case.
I need to get somethin like this:

var hierarchialEntities = [ {

EntityName: "Parent1",

items: [

{ EntityName: "Entity1", class: '.entity-node', isEntity: true },

{ EntityName: "Entity2", class: '.entity-node', isEntity: true },

{ EntityName: "Entity3", class: '.entity-node', isEntity: true,

items: [{ EntityName: "Entity7", class: '.entity-node', isEntity: true }]

}

]

}, {

EntityName: "Parent2",

items: [

{ EntityName: "Entity4", class: '.entity-node', isEntity: true},

{ EntityName: "Entity5", class: '.entity-node', isEntity: true},

{ EntityName: "Entity6", class: '.entity-node', isEntity: true }

]

}

];

treeview.append(hierarchialEntities,projectNode); //works as expected!!!

Can anybody explain, what I'm doing wrong? Or point to useful example or source code.

Thanks in advance.

UPDATE.
I will a little bit reformulate the question: is there a way in kendo-ui to get hierarchialEntities (see above) from array of EntitiesDto (see above)?
I supposed that HierarchicalDataSource can do that automatically, provide array of EntitiesDto and retrive hierarchialEntities...

Hierarchical Data Source

answered on 07 Oct 2013