Questions on Kendo UI for jQuery Forum

5 answers

408 views

OK. I usually do my listviews manually (clearing and appending items from ajax results) but I really want to get endless scrolling working so i've been banging my head against the wall trying to get a very very simple example working with no success.

Here is the HTML:

<div id="test-view" data-role="view" data-title="Test" data-layout="default-layout" data-init="app.test.init" data-show="app.test.showView">

<ul id="test-list" class="ul-content" data-role="listview">

</ul>

</div>

<script type="text/x-kendo-tmpl" id="endless-scrolling-template">

<li>#: name#</li>

</script>

As you can see its a simple html view with a UL inside it. Now for my JS

(function(global) {

var app = global.app = global.app || {};

app.test = {

init: function(e) {

$("#test-view ul#test-list").kendoMobileListView({

dataSource: new kendo.data.DataSource({

type: "json",

serverPaging: true,

pageSize: 50,

transport: {

read: {

url: "http://www.somedomain.com/script.php",

dataType: "json"

}

},

schema: {

type: "json",

data: function(data) {

return data.result;

},

total: function(data) {

return data.total;

}

}),

template: $("#endless-scrolling-template").text(),

endlessScroll: true

});

},

showView: function(e) {

$("#loading-overlay").show();

app.application.showLoading();

setTimeout(function () {

$("#loading-overlay").hide();

app.application.hideLoading();

}, 2000);

e.view.scroller.reset();

}

};

})(window);

So in the init, its suppose to initialize the listview and pull from my php script which returns JSON. I know my service is serving up the data as you can do an alert in the data handler and see the object it returns, in addition im emailing myself in the service the results anytime a request is made.

Here is example output from my service:

{"result":[{"name":"Item 1"},{"name":"Item 2"},{"name":"Item 3"},{"name":"Item 4"},{"name":"Item 5"},{"name":"Item 6"},{"name":"Item 7"},{"name":"Item 8"}],"total":8}

As you can see its a simple object with a result value that is an array of objects each containing a name key.

The result I am getting is a javascript alert and then only a single item is in the listview

"TypeError: 'undefined' is not a function (evaluating 'n.getAttribute(\"data-\"+dt.ns+\"role\")')"..... yadda yadda in kendo.mobile.minjs

Any help would be most appreciated. I've gone down every google search and avenue i can think of. I've used only the data-attributes instead of the js initialization, etc. All with no success.

Thanks!

General Discussions

answered on 04 Feb 2014

1 answer

1.3K+ views

MultiSelect - data-placeholder - style

Hi,

I use the element MultiSelect like this :

<select id="MyId" data-placeholder="My text"></select>

$("#MyId").kendoMultiSelect({
        dataTextField: "Name",
        dataValueField: "Id",
        itemTemplate: "<div>#:data.Name#</div>",
        dataSource: {
            type: "json",
            serverFiltering: true,
            serverPaging: true,
            pageSize: 2,
            transport: {
                read: {
                  url: DM3_Reporting.RestServiceUrl + 'fleet',
                    type: "GET"
                }
            }
        }
    });

All work fine, but I need to change the style of the data-placeholder : "MyText".

Can you tell me how can I change this style in my css ?

Thanks in advance.

MultiSelect

answered on 04 Feb 2014

8 answers

140 views

POTENTIAL BUG: PopOver will not open when referenced from a tabstrip which is contained by a layout.

I opened a support ticket for this but figured I'd post in case any has a workaround that I can do in the mean time....

I put together this jsbin to illustrate the issue that I discovered. Essentially, I have a popover that call from a tabstrip item, which is inside a layout. The view that I'm calling also has the data-stretch set to true,so I don't know if that contributes to the issue. Seems to be 100% reproducible in this case.

JSBin

As you can see, if you tap the first tab item, a js error is thrown, scrollbar gets introduces, <BillMurray>Human sacrifice, dogs and cats living together... mass hysteria!</BillMurray>
well you get the idea.

PopOver (Mobile)

answered on 04 Feb 2014

3 answers

346 views

Hide/Show Column of Detail Grid

Hi,

I currently have a Master Grid and a Detail Grid. I am trying to show/hide columns based on user selection which is stored in the database.
For example:
Master Grid : Col1,Col2,Col3
Detail Grid: ColA,ColB,ColC,ColD,ColF
Now, i retrieve col names from the database. On DataBound event of the detail grid i have a function call which
loops thru the data and calls hideColumn() and it works for the first detail grid of the first master row.
but when expanding the second row of the master the detail grid does not hide any columns.
Please help.

var grid = $("#childgrid").data("kendoGrid");
if (grid != undefined) {
for (var i = 0; i < view.length; i++) {
var columnName = view[i]["FieldName"];
var selected = view[i]["Selected"]
if (selected == true) {
grid.showColumn(columnName);
} else {
grid.hideColumn(columnName);
}
}
}

Grid

answered on 04 Feb 2014

2 answers

106 views

Grid filters not working proper

Hi all,
I have a question about KendoGrid filtering. I have server side filtering enabled. If I use the filter on a column to choose two filters (on the same column) it does not send across the selected operator ("and" or "or"). What it sends to the server is:

{

"filters":[

{

"field":"username",

"operator":"contains",

"value":"bob"

},

{

"field":"username",

"operator":"contains",

"value":"john"

}

]

}

Is there a way to get that? It's quite important!

Thanks!

Grid

answered on 04 Feb 2014

1 answer

158 views

Line graph with SQL Data

Hello,
I have been trying to find a method to draw line graphs using data from SQL db using Kendo UI
please explain

Charts

answered on 04 Feb 2014

1 answer

78 views

Show title in grid's column filter view mobile

Hi,

The current grid's filter view on mobile displays column's field on the top part.
Is there any posibility to display the column's title instead of the field ?

Thanks,
Walid

Grid

answered on 04 Feb 2014

1 answer

118 views

Expand/Collapse icon and Pagination number not shown in Grid of IPad Safari browser

I have implemented drill down functionality in Grid but the expand/collapse and pagination number is not shown in the grid. I have attached the screen shot for more clarification. We have tested it in IOS7 IPad

Grid

answered on 04 Feb 2014

1 answer

59 views

How do I navigate user from edit form to grid row they were last viewing?

Can't find an example of how to do this. Scenario: user navigates to the third level of a hierarchal grid and clicks the Edit link, taking them to the Edit View. When complete, the requirement is to return them to the grid row they were formerly viewing. Sample project is attached. Please note, I had to delete most of the project folders, especially the scripts to get the zipped size under your 2MB upload limit.

Two more questions relevant to the same project;

1) I want to show the various levels of the hierarchical grid in different colors and also to vertically align all cells in all grids to the the top of the row. I'm sure CSS is the right way to do this, but what is the best practice for how to do it? What elements must I reference in the CSS?

2) How do I suppress a value in a cell? I have a default date that comes in as 01/01/0001 12:00 AM which for my purposes is an invalid date. When I see this value I want to suppress the display and show a null string instead.

Thanks!

Rich

Grid

answered on 03 Feb 2014

12 answers

287 views

Passing addtional parameters to Remote Read function stopped working

Just tried to upgrade from 2013.2.918 to 2013.3.1316.

Existing code for a grid update that passed additional parameters to the datasource read remote method has stopped working.

Data Source Definition Snippet..

.DataSource(ds => ds

.Ajax()

.ServerOperation(false)

.Read(r => r.Action("_List", "Employee").Data("SetEmployeeGridData"))

function SetEmployeeGridData() {

return { locationFilter: $('#locationFilter').val(),

departmentFilter: $('#departmentFilter').val(),

lastNameFilter: $('#lastNameFilter').val() };

}

public ActionResult _List([DataSourceRequest] DataSourceRequest request, string locationFilter, string departmentFilter, string lastNameFilter)

{

the refresh is triggered by something like this...

$('#EmployeeGrid').data('kendoGrid').dataSource.read();

Those filter values are being pulled from input fields. I see the Data function being called and the .val() is evaluating correctly, but the MVC action only gets null values and fiddler shows nothing being passed in the request. Maybe i missed something in my upgrade, but this code worked fine in 2013.2.918

Data Source

answered on 03 Feb 2014