Questions on Kendo UI for jQuery Forum

1 answer

537 views

Kendo Grid- Retain Insert/Update/Delete operations values in Page refresh with JSON Post Back

Hi,

I have Kendo UI Grid with Server side paging and Grid Editing.

I have few issues, Of course they are different scenarios, Finally what i want to achieve is I want to do different operations like Insert/Update/destory on grid with paging and on click of save Button they should be saved into database. Below are the issues

1. I have page size 2, For ex: I have 3 records, As my page size is 2 , It is obvious that it will be displayed in 2 grid pages. In first page i will update a record, then i will go to 2nd page and add a record. And if i come back to 1st page again, i don't see my changes what i did because it is rendering from database and binding it again.

Is there anyway that we can retain these update values , instead of that grid is being overrides by database values?
For example I have 6 records with page size 2. So in 1st page i can see 2 records .

2. Suppose if i delete 2 records, the 2nd page records are not moving to 1st page, suppose if i insert 1 record i am able to see 3 records but pagination is for 2 records, i should see only 2 records always. Any help will be appreciated.

3. I have one more issue, I am tracking the changed values and i have only Read action, I don't have Create/Update/Delete actions, I am saving the changes on button click which is out side the Grid. To track the changes I have written the pager change event and I am taking these values in Save button click. Again I would like to have retain these changes on page click, for that I am writing the code Grd Databinding event.

Here I am able to retain the Updated values but I am getting the issues in retaining the inserted and deleted records. If I keep alert in databinding event and after that if i do insert operation, the alert is coming as infinite times. for example the scenario is I will insert the new record and that will get insert fine but if I go to 2nd page and will come back to 1st page i should retain the inserted value, i.e not working, once I click on 2nd page it's keep on processing.

var created = [];

var updated = [];

var destroyed = [];

$(document).ready(function () {

var grid = $("#skillGrid").data("kendoGrid");

grid.pager.bind('change', function() {

var dataSource = $("#skillGrid").data("kendoGrid").dataSource;

var that = dataSource,

idx,

length,

data = that._flatData(that._data);

destroyed = that._destroyed;

for (idx = 0, length = data.length; idx < length; idx++) {

if (data[idx].isNew()) {

for (var i = 0; i < created.length; i++) {

if (created[i].SkillName == data[idx].SkillName) {

created.splice(i, 1);

}

created.push(data[idx]);

data[idx].set('Status', 'New');

} else if (data[idx].dirty) {

for (var j = 0; j < updated.length; j++) {

if (updated[j].SkillName == data[idx].SkillName) {

updated.splice(j, 1);

}

updated.push(data[idx]);

data[idx].set('Status', 'Dirty');

}

});

function skillGridDataBinding(e) {

var dataSource = $("#skillGrid").data("kendoGrid").dataSource;

var data = dataSource.data();

for (var i = 0; i < created.length; i++) {

dataSource.add({ SkillName: created[i].SkillName, SkillNameNew: created[i].SkillNameNew, Proficiency: created[i].Proficiency, YearsOfExp: created[i].YearsOfExp, LastUsedYear: created[i].LastUsedYear, Status: "New" });

}

for (var idx = 0; idx < data.length; idx++) {

for (var j = 0; j < updated.length; j++) {

if (updated[j].SkillName == data[idx].SkillName) {

data[idx].set('SkillName', updated[j].SkillName);

data[idx].set('SkillNameNew', updated[j].SkillNameNew);

data[idx].set('Proficiency', updated[j].Proficiency);

data[idx].set('YearsOfExp', updated[j].YearsOfExp);

data[idx].set('LastUsedYear', updated[j].LastUsedYear);

data[idx].set('Status', 'Dirty');

}

for (var k = 0; k < destroyed.length; k++) {

if (destroyed[k].SkillName == data[idx].SkillName) {

dataSource.remove(data[idx]);

}

$($(".page-button-save").click(function () {

var allRows = created.concat(updated).concat(destroyed);

var allRowsJson = JSON.stringify(allRows);

$("#@Html.IdFor(m => m.Skills)").val(allRowsJson);

}));

Your help is much appreciated..!

Thank you,
Sreeni

Grid

answered on 20 Nov 2013

1 answer

96 views

Using Window with MVVM (Clearer)

I posted this already, but I suppose I was a bit vague, so I will post this once more with more information in hopes I can get it addressed.

I have a situation where I want to display small pop up windows to edit some data in a view model that is made with KendoUI.For sake of example, the ViewModel is something like this;

{

Name: "Root",

Collection: [

{

Name: "Item1",

Price: 0.00,

Quantity: 0,

Tags: [ "tag1", "tag2", "tag3" ],

onEdit: function(e){

// open window and edit Item1

}

},

{

Name: "Item2",

Price: 0.00,

Quantity: 0,

Tags: [ "tag1", "tag2", "tag3" ],

onEdit: function(e){

// open window and edit Item2

}

]

}

What I want to do seems like it should be simple. I am rendering a template with this, and there is a button that has data-bind="click: onEdit" on it. When the user clicks this, I want to render a KendoUI Window that lets them edit that item, when they confirm it, it updates the item in the actual view model.

I have already been told to use the "grid" system, but for what I am doing I have no interest in the grid right now. I love the grid, the grid is phenomenal. But what my customer wants will not really work with the way the grid layout, even with custom skinning. I need to use the actual kendo templates.

Is this even possible?

Window

answered on 20 Nov 2013

3 answers

88 views

.validate() not working on IE7

Hi everyone,

We've been trying to use the Kendo Validator component to validate a complex data entry form, and unfortunately for this project we need support for IE7.

The validation itself works fine on specific fields, and messages pop up as normal when wrong values are entered, however a call to

$("#form").data("kendoValidator").validate()

on form submission fails with the error message "Failed". Since under IE7 there is very little information about what the error is and how to fix it, we've been wondering if anyone knows how to proceed, or if anyone has had similar experiences in the past.

Many thanks!

Validation

answered on 20 Nov 2013

2 answers

105 views

cascading dropdown list remmebering state

Is it possible to get the cascading drop down to remember its last state on a post back?

DropDownList

answered on 20 Nov 2013

2 answers

166 views

ListView + Drawer + custom template

I'm useing Drawer and ListView and want ot add pull to refresh with custom template for ListView.
This is the code:

<script type="text/x-kendo-tmpl" id="pull-to-refresh-template">

<div class="portpos">

<a href="#drawer-drafts2?id=#:p_portfelj_id#">

<span class="h3x">#:ime_portfelja#</span>

<div class="portfelj change #:trend#">

Današnja sprememba

<big>#:tadan#</big>

</div>

<div class="portfelj state">

<span class="title">Trenutna vrednost</span>

<big>#:stanje#</big> <small>EUR</small>

</div>

</a>

</div>

</script>

It produces JavaScript error, I assume beacause of hash for drawer. If I remove hash Javascript works but link bokes.

Any ideas how to overcome this?

ListView (Mobile)

answered on 20 Nov 2013

1 answer

52 views

Back Button not showing in 2013 Q2 or Q3 Beta

Hi,

The Back Button is not showing for 2013 Q2 or Q3 Beta. I have a simple test set up and the Back Button will not show unless I go back to Q1 for the
kendo.mobile.all.min.css stylesheet. If I add in the stylesheet from my Q2 or Q3 Beta download, the button does not show even though the link function is there - you just can't see it.

If I reference   <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" /> for the style sheet, the button is visible.

Can you confirm the issue?

As I mentioned before, I tried the js and css files from Q2 (v2013.2.918) and Q3 Beta (v2013.3.1030). The only thing that worked was pointing to the Q1 version of the style sheet on the CDN.

Below is my test page.

Thanks.

<!DOCTYPE HTML>
<html lang="en">
<head>
<script src="js/kendo/jquery.min.js"> </script>
<script src="js/kendo/kendo.mobile.min.js"></script>
<link href="styles/kendo/kendo.mobile.all.min.css" rel="stylesheet" />
<style>
.no-backbutton .km-back { visibility: hidden; }
</style>
</head>
<body>
<div data-role="view" id="mt-home-main-view" data-title="Movie Tickets" data-show="homeViewInit" data-layout="mt-main-layout" class="no-backbutton">
Home Page View

</div>


<div data-role="view" id="mt-about-view" data-title="About" data-layout="mt-main-layout">
<div style="padding: 15px">
This is a sample application developed for the book
Building Mobile Applications using Kendo UI Mobile and ASP.NET Web API
</div>
</div>

<div data-role="layout" data-id="mt-main-layout">
<header data-role="header">
<div data-role="navbar">
<a data-align="center" data-role="backbutton">Back</a>
<span data-role="view-title">Movie Tickets</span>
</div>
</header>
<footer data-role="footer">
<div data-role="tabstrip">
<a href="#mt-home-main-view">
<img src="images/movies.ico"
height="40" width="40" /><br />
Movies
</a>
<a href="Trailers.html">
<img src="images/trailers.ico" height="40" width="40" /><br />
Trailers
</a>
<a href="#mt-about-view" data-icon="about">
<br />
About
</a>
</div>
</footer>
</div>
<script>
var application = new kendo.mobile.Application(document.body,
{
transition: 'slide',skin:'flat'
});

console.log(application.view);

</script>
</body>
</html>

Button (Mobile)

answered on 20 Nov 2013

2 answers

619 views

Convert kendodatepicker format to .Net DateTime

The Json value of kendodatepicker that is received at .net csharp code is "\"2013-11-18T03:38:21.843Z\""What is the best and universal way to parse/convert this format to c# DateTime ?

DatePicker

answered on 20 Nov 2013

1 answer

265 views

Visible Binding on Function

i Kendo Team

we have a viewmodel with a list of child records (bound with a template). To show and hide child records we use a function like the following:

Function;
        Visible: function (e) {
            if (this.parent().parent().get("DebitorFilter") == null || this.KUNNR == null)
                return true;
            else
                return this.parent().parent().get("DebitorFilter") == this.KUNNR;
        }
Binding: "<div class="LabelDetailTemplate" data-bind="visible: Visible">"

So far it's working as expected when adding new records, but if property KUNNR changes in the parent object the visible function of the child records is not called again and the items stays hidden.
What are we doing wrong or do we have to create a property "visible" and refresh it manually when the KUNNR has changed?

Thanks in advanced and best regards
Daniel

MVVM

answered on 20 Nov 2013

5 answers

1.7K+ views

How to identify whether data source is modified or not..?

Thanks in advance..

Data Source

answered on 20 Nov 2013

11 answers

298 views

ios status bar overlay issue

My application has started to overlay the top status bar on all ios devices. As a result, keyboard entry, navigation and other features no longer work properly. I found this: http://docs.icenium.com/troubleshooting/ios7-status-bar , but my issue is not ios7 specific, and adjusting the margin causes the footer to sink below the bottom edge of the screen.

I can't remember doing anything that would specifically effect the display. Perhaps someone has encountered this previously?

General Discussions

answered on 20 Nov 2013