Questions on Kendo UI for jQuery Forum

1 answer

96 views

Kendo UI with Visual Studio 2008

Dear Support Team,

I have a asp.net web project with Visual Studio 2008. Right now I want to use Kendo Grid without using MVC from that project. Is possible to get sample project?

Thanks & Regards,

General Discussions

answered on 20 Feb 2014

2 answers

52 views

Selectable behavior not working for current date in week and month view

Hello,

I encountered an issue with Selectable behavior within Scheduler control, the same issue can be seen here:
http://demos.telerik.com/kendo-ui/web/scheduler/selection.html

When the scheduler is in Week mode, clicking a cell from current day will not produce selection.

When the scheduler is in Month mode, clicking the cell for current day will not produce selection in Chrome, while in IE 9 the behavior is even stranger if you click any cell in the second column (today is Moday) it will produce a selection into same row but first column.

Could you provide a hint how this can be fixed. This is quite inconvenient for our customers.

Thank you,
Vasile

Scheduler

answered on 20 Feb 2014

1 answer

142 views

Fluid (bootstarp layout) and columns size

Hello
Is there any way to configure (js or css) grid columns to not have too small size when resizing window for smaller layout? Currently I have 1 column without set width to fill gap. Other columns has defined size. When I'm resizing window this column is resized to 0 so for small screens it is not visible. The perfect option would be to have min-width for each column to be never less than some value. But I don't know if this sis possible.

Kind Regards
Marcin

Grid

answered on 20 Feb 2014

1 answer

472 views

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

133 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

158 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

693 views

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

478 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

123 views

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

142 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