Questions on Kendo UI for jQuery Forum

1 answer

503 views

[Solved] Kendo UI Datasource FIeld with Array

I am having an issue with getting the values of an array within the kendo ui datasource object. I have searched and tried many things to fix, but have not found a solution in 3 weeks. Basically I want to get the values of an array named 'base64img' that is assigned as a field in the Kendo UI datasource, but I have been unable to get access to the data of the array value.

Here are all my stats: (if there are errors in response, please ignore as I modified for security purposes) XML Response -

<?xml version="1.0" encoding="UTF-8"?><soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/"><soapenv:Body><retrieveIncidentResponse xmlns="http://lal.lala.com/lala/messages/"><incidentStructure><geoLoc>LALA1</geoLoc><eventName>PARTY</eventName><incidentStatus>OPEN</incidentStatus><incidentCompltnDate>2012-01-02</incidentCompltnDate>incidentStructure><imageURI>IMAG0001.jpg</imageURI><imageURI>IMAG0002.jpg</imageURI><imageURI>IMAG0003.jpg</imageURI><imageURI>IMAG0004.jpg</imageURI><imageURI>IMAG0005.jpg</imageURI><imageBase64>/9j/4AAQSkZJRgABAQAAAQABAAD</imageBase64><imageBase64>/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkM</imageBase64><imageBase64>EQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJC</imageeBase64><imageBase64>IeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eH</imageBase64>

Kendo DataSource Code:

var parser = new DOMParser();
var xmlDoc = parser.parseFromString(soapXMLResponse, "application/xml");
var dsIncPictures = new kendo.data.DataSource({
error: function (e)
{
console.log("ds error: " + e.status);
},
data: xmlDoc,
schema:
{
type: "xml",
data: "soapenv:Envelope/soapenv:Body/retrieveIncidentResponse",
model:
{
fields:
{
imageURI: "imageURI",
imageBase64: "imageBase64"
},
hasChildren: true
}
},
pageSize: 50
});

My attempts to get to the values:
/*$drt.globalEditIncWPics.fetch(function()
{
$drt.globalEditIncWPics._data(0).imageBase64(0).val;
$drt.globalEditIncWPics.get("imageURI[0]");
var field = $drt.globalEditIncWPics.get("imageURI[0]").imageURI[0].length;
console.log($drt.globalEditIncWPics.get().imageURI(0));
var field = $drt.globalEditIncWPics.at(0);
console.log("VALUE: '" + field.text + "'");
soapRequest.append(bind.soapRequestMessageFields(field.FieldName, field.value));
});*/
/*$drt.globalEditIncWPics.fetch();
for (var idx = 0;idx<=$drt.globalEditIncWPics.length;idx++)
{
$drt.globalEditIncWPics.data[0].imageBase64[0].value;

}*/

This is the results of the object Google developer tools:

0down vote favorite

I am having an issue with getting the values of an array within the kendo ui datasource object. I have searched and tried many things to fix, but have not found a solution in 3 weeks. Basically I want to get the values of an array named 'base64img' that is assigned as a field in the Kendo UI datasource, but I have been unable to get access to the data of the array value. Here are all my stats: (if there are errors in response, please ignore as I modified for security purposes) XML Response -

<?xml version="1.0" encoding="UTF-8"?><soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/"><soapenv:Body><retrieveIncidentResponse xmlns="http://lal.lala.com/lala/messages/"><incidentStructure><geoLoc>LALA1</geoLoc><eventName>PARTY</eventName><incidentStatus>OPEN</incidentStatus><incidentCompltnDate>2012-01-02</incidentCompltnDate>incidentStructure><imageURI>IMAG0001.jpg</imageURI><imageURI>IMAG0002.jpg</imageURI><imageURI>IMAG0003.jpg</imageURI><imageURI>IMAG0004.jpg</imageURI><imageURI>IMAG0005.jpg</imageURI><imageBase64>/9j/4AAQSkZJRgABAQAAAQABAAD</imageBase64><imageBase64>/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkM</imageBase64><imageBase64>EQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJC</imageeBase64><imageBase64>IeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eH</imageBase64>

Kendo DataSource Code:

var parser = new DOMParser();
var xmlDoc = parser.parseFromString(soapXMLResponse, "application/xml");
var dsIncPictures = new kendo.data.DataSource({
    error: function (e)
    {
        console.log("ds error: " + e.status);
    },
        data: xmlDoc,
        schema:
        {
        type: "xml",
        data: "soapenv:Envelope/soapenv:Body/retrieveIncidentResponse",
        model:
            {
            fields:
            {
            imageURI: "imageURI",
            imageBase64: "imageBase64"
            },
        hasChildren: true
        }
        },
    pageSize: 50
    });

My attempts to get to the values:
/*$drt.globalEditIncWPics.fetch(function()
        {
            $drt.globalEditIncWPics._data(0).imageBase64(0).val;
            $drt.globalEditIncWPics.get("imageURI[0]");
            var field = $drt.globalEditIncWPics.get("imageURI[0]").imageURI[0].length;
            console.log($drt.globalEditIncWPics.get().imageURI(0));
            var field = $drt.globalEditIncWPics.at(0);
            console.log("VALUE: '" + field.text + "'");
            soapRequest.append(bind.soapRequestMessageFields(field.FieldName, field.value));
        });*/
        /*$drt.globalEditIncWPics.fetch();
        for (var idx = 0;idx<=$drt.globalEditIncWPics.length;idx++)
        {
            $drt.globalEditIncWPics.data[0].imageBase64[0].value;

        }*/

This is the results of the object Google developer tools: Nevermind I was told that my reputation wasn't high enough to post picture. pasting code from developer tool (nevermind it takes up too much space): basically _prestineData has two arrays one called imageBase64 and imageURI in the 0|1 array spot and the values are shown as #text in each child array spot (0,1,2,3, etc).

0down vote favorite

I am having an issue with getting the values of an array within the kendo ui datasource object. I have searched and tried many things to fix, but have not found a solution in 3 weeks. Basically I want to get the values of an array named 'base64img' that is assigned as a field in the Kendo UI datasource, but I have been unable to get access to the data of the array value. Here are all my stats: (if there are errors in response, please ignore as I modified for security purposes) XML Response -

<?xml version="1.0" encoding="UTF-8"?><soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/"><soapenv:Body><retrieveIncidentResponse xmlns="http://lal.lala.com/lala/messages/"><incidentStructure><geoLoc>LALA1</geoLoc><eventName>PARTY</eventName><incidentStatus>OPEN</incidentStatus><incidentCompltnDate>2012-01-02</incidentCompltnDate>incidentStructure><imageURI>IMAG0001.jpg</imageURI><imageURI>IMAG0002.jpg</imageURI><imageURI>IMAG0003.jpg</imageURI><imageURI>IMAG0004.jpg</imageURI><imageURI>IMAG0005.jpg</imageURI><imageBase64>/9j/4AAQSkZJRgABAQAAAQABAAD</imageBase64><imageBase64>/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkM</imageBase64><imageBase64>EQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJC</imageeBase64><imageBase64>IeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eH</imageBase64>

Kendo DataSource Code:

var parser = new DOMParser();
var xmlDoc = parser.parseFromString(soapXMLResponse, "application/xml");
var dsIncPictures = new kendo.data.DataSource({
    error: function (e)
    {
        console.log("ds error: " + e.status);
    },
        data: xmlDoc,
        schema:
        {
        type: "xml",
        data: "soapenv:Envelope/soapenv:Body/retrieveIncidentResponse",
        model:
            {
            fields:
            {
            imageURI: "imageURI",
            imageBase64: "imageBase64"
            },
        hasChildren: true
        }
        },
    pageSize: 50
    });

My attempts to get to the values:
/*$drt.globalEditIncWPics.fetch(function()
        {
            $drt.globalEditIncWPics._data(0).imageBase64(0).val;
            $drt.globalEditIncWPics.get("imageURI[0]");
            var field = $drt.globalEditIncWPics.get("imageURI[0]").imageURI[0].length;
            console.log($drt.globalEditIncWPics.get().imageURI(0));
            var field = $drt.globalEditIncWPics.at(0);
            console.log("VALUE: '" + field.text + "'");
            soapRequest.append(bind.soapRequestMessageFields(field.FieldName, field.value));
        });*/
        /*$drt.globalEditIncWPics.fetch();
        for (var idx = 0;idx<=$drt.globalEditIncWPics.length;idx++)
        {
            $drt.globalEditIncWPics.data[0].imageBase64[0].value;

        }*/

This is the results of the object Google developer tools: Nevermind I was told that my reputation wasn't high enough to post picture. pasting code from developer tool (nevermind it takes up too much space): basically _prestineData has two arrays one called imageBase64 and imageURI in the 0|1 array spot and the values are shown as #text in each child array spot (0,1,2,3, etc).

Data Source

answered on 20 Feb 2014

3 answers

153 views

Bug in kendo.Observable?

It looks like method "one" (or "bind" with last argument true) in kendo.Observable doesn't work as expected if you try to bind several events at the same time.
Short example is at:
http://jsfiddle.net/737D2/

Expected result is 4 alerts in following order:
- "b"
- "Before a"
- "a"
- "After a"

Actual result is:
- "b"
- "Before a"
- "b"
- "b"
- "After a"

Is this a real bug or is it intended behavior?

In the source code I'm looking at now (Kendo UI Web v2013.3.1119), the bug is at \src\js\kendo.core.js in lines 90-126 where the method "bind" of the class
"Observable" is defined. More specifically, most probably lines 113-119 have to be patched. The bug is related to "closures".
Relevant code is:

for (idx = 0, length = eventNames.length; idx < length; idx++) {
eventName = eventNames[idx];

handler = handlersIsFunction ? handlers : handlers[eventName];

if (handler) {
if (one) {
original = handler;
handler = function () {
that.unbind(eventName, handler);
original.apply(that, arguments);
};
}

if (one) {
handler = (function (original, localEventName) {
var newHandler = function () {
that.unbind(localEventName, newHandler);
original.apply(that, arguments);
};
return newHandler;
})(handler, eventName);
}

events = that._events[eventName] = that._events[eventName] || [];
events.push(handler);
}
}

I think proper fix should be something like this (I didn't test it):

if (one) {
handler = (function (original, localEventName) {
var newHandler = function () {
that.unbind(localEventName, newHandler);
original.apply(that, arguments);
};
return newHandler;
})(handler, eventName);
}

Note that in this case "original", "localEventName" and "newHandler" are captured from the local scope and thus will not be affected by further iteration through for cycle.

General Discussions

answered on 20 Feb 2014

1 answer

177 views

Reset grid page on document load

Hi,

I have a grid with command buttons on each row, when I click a command button i link to another page use the querystring/Viewbag to remember the page number until I come back to the page with the grid.

When I return to the page with the grid I can see that I am indeed using the correct page number so in document ready function I use:

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

grid.dataSource.page(@ViewBag.Page);

But it just displays page 1 irrespective of the page I have stored in @ViewBag.Page

Is there some way that I can force the grid or data source to display the page I want it to when the document loads, after that the page will be set from the pager controls on the grid.

Many thanks in advance

Grid

answered on 20 Feb 2014

2 answers

727 views

[Solved] Populating a template with data pulled using an ajax call

hi there,

I'm a newbie in using kendo ui. and I'm having problems with populating a template using data from an ajax call.

here is my view

<div id="computerTab" class="container">
    <div id="computerDetailsSection"></div>
</div>

<script type="text/x-kendo-template" id="myTemplate">
    <div>
        
        <dl>
        #for (var i=0,len=Sections.length; i<len; i++){#
            #if(Sections[i].Fields.length>0)#
            #{#
                <dt>${ Sections[i].Title }</dt>
                
                #for(var j=0, l=Sections[i].Fields.length; j<l; j++){#
                    <dd>${ Sections[i].Fields[j].Name }</dd>
                #}#
            #}#
        # } #
    </dl>

    </div>
</script>

here is my script

<script>
    function getComputerData() {
        var result;
        $.ajax({
            url: 'myurl',
            type: 'GET',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                console.log('success');
                result = data;
            },
            error: function () {
                console.log('Error');
            }
        });
        return result;
    }

    var ajaxData = getComputerData();
    var scriptTemplate = kendo.template($("#myTemplate").html());
    $("#computerDetailsSection").html(scriptTemplate(ajaxData));

here is a sample of the data that i get from my ajax call
Sections: [
             { Fields: [], Title: "Computer", Order: 1, init: "readMode", alt: "editMode hidden" },
             {
                 Fields: [
                        { Order: 1, Name: "Company-owned Location", Value: null },
                        { Order: 2, Name: "Country", Value: null },
                        { Order: 3, Name: "State", Value: null },
                        { Order: 4, Name: "Site", Value: null },
                        { Order: 5, Name: "Address Line 1", Value: null },
                        { Order: 6, Name: "Address Line 2", Value: null },
                        { Order: 7, Name: "Building", Value: null },
                        { Order: 8, Name: "Floor", Value: null },
                        { Order: 9, Name: "City", Value: null },
                        { Order: 10, Name: "Zip", Value: null },
                        { Order: 11, Name: "Room", Value: null },
                        { Order: 12, Name: "Where can you be found?", Value: null }
                 ],
                 Title: "Location", Order: 5, init: "readMode", alt: "editMode hidden"
             }]
but when i run this in my browser i always get this exception JavaScript runtime error: Object expected

what am i doing wrong?

thanks!

Templates

answered on 20 Feb 2014

2 answers

519 views

Help with changing background image within app

I currently have 4-5 views in my app, I use a flat scheme, and I use same background image which I set in CSS:

.km-flat .km-view .km-content {
background-image: url(../styles/images/background11.png);
background-size: cover;
background-repeat: no-repeat;
}

I want to have a function where a user can choose another background image. I've implemented a listview, where I get the item the user selects and then I implement a switch case as follows.

switch(text1)
{
case "1":
$(".km-flat .km-view .km-content").css('background-image',"url('./styles/images/background11.png')");
break;
case "2":
$(".km-flat .km-view .km-content").css('background-image',"url('./styles/images/background12.png')");
break;
case "3":
$(".km-flat .km-view .km-content").css('background-image',"url('./styles/images/background13.png')");
break;
case "4":
$(".km-flat .km-view .km-content").css('background-image',"url('./styles/images/ background14.png')");
break;
}

However I am not getting the desired results.Sometimes the image only switches for 1-2 view instead of all views. I also get an ugly screen flash when I navigate between views. It's as if every time I pick a new view, the new background image keeps being reset/updated which results in the screen flash

Can someone help me resolve these bugs?

General Discussions

answered on 20 Feb 2014

4 answers

154 views

[Solved] Zoomable view scale

I just started using the zoomable view to display an image. It works great but I have one major complaint. It always starts with the full size image (most of it is off the screen) and you have to "zoom out" to see the whole image. This is counterintuitive, how can i make it start "zoomed out" so the user only has to zoom in if they wish?

General Discussions

answered on 20 Feb 2014

2 answers

167 views

Stacked column chart where group is a property

Please see this jsbin:
http://jsbin.com/kizuy/2/edit

My data is in the form:
[{"name":"General","monthEnd":"2013-12-31T00:00:00","balance":50.00},
{"name":"Special","monthEnd":"2013-12-31T00:00:00","balance":120.00},
{"name":"Savings","monthEnd":"2013-12-31T00:00:00","balance":20.00},
{"name":"General","monthEnd":"2014-01-31T00:00:00","balance":100.00},
{"name":"Special","monthEnd":"2014-01-31T00:00:00","balance":120.00},
{"name":"Savings","monthEnd":"2014-01-31T00:00:00","balance":50.00}]

I would like a stacked bar chart that shows the months on the x axis, and stacked columns for the balance, where each portion of the total column is based on the name field. The end user controls the name, so I can't define the stacked groups statically. The current JSBin shows the max balance value for each date (which I know is the default aggregation), rather than a stack of the total.

I have ensured that the data source contains the same number of data points for each group and date. Most of the examples have data in a different structure (values are all together, separate from the categories).

Is there any way to achieve the desired stacked column chart?

Charts

answered on 19 Feb 2014

6 answers

666 views

[Solved] Button CSS (text-decoration: underline)

I have an example page at the following URL that has the Kendo CSS files placed after my main CSS file but yet the Kendo CSS text-decoration: none in the k-button style is being overriden by my main CSS file. Shouldn't the Kendo's CSS rules override my main CSS rules since they are placed after the main CSS file in the header?

http://example.rengr.co

General Discussions

answered on 19 Feb 2014

1 answer

154 views

Kendo UI mobile scrollview and Dataviz chart problem.

Hi Kendo team!

We are using Kendo scrollview to switch between views. On one page, there is a HTML table with table rows (tr). The scenario is, when we click on a row, It appends another table row beneath it with Kendo chart.
The problem is, If we resize the page, while the chart is still open, it disturbs the scrolling directions. It becomes free to move in any direction.
Here is the problem video:

http://screencast.com/t/zrk8Jm3CD

Regards.

ScrollView (Mobile)