Questions on Kendo UI for jQuery Forum

8 answers

1.1K+ views

am I doing something wrong or is it a Pageable bug

Hello everyone,

First of all ! let me tell you how much I LOVE this tool :) I just started playing around with the kendo and getting ready to integrate it into my projects.

However, I was following the tutorial "Get Rolling With Kendo UI And PHP – Part 1" by the brilliant Burke Holland.

You can see the outcome here. The problem is, I assigned the pageSize to hold 3 records per page. However the pagination links don't appear unless you click on one of the column (sortable : true) then the paginations link appear for that session only (so if you refresh the pagination links will disappear and will show only the first 3 records) then you'll have to sort by clicking on 'name' or 'price columns to make them appear.

the Javascript is as the following:

<script>

$(function() {

$("#grid").kendoGrid({

dataSource:

{

transport:

{

read: "mod/basket_list.php"

},

schema:

{

data: "data"

},

pageSize: 8

},

columns: [

{

field : 'name',

title: 'NAME'

},

{

field : 'price',

title : 'THE PRICE'

}

],

scrollable:false,

sortable: true,

pageable: true,

navigatable: false,

groupable: true

});

</script>

can you guide me through fixing this :)

Thanks

Grid

answered on 24 Feb 2012

1 answer

156 views

Autocomplete cannot get working with XML file

HI,
I am playing around with Kendo UI Widgets and am hoping to get them working with my API but cannot find any examples using XML, most use JSON OR ODATA and so I am therefore struggling to get the below working after trying many different variations. Am I missing something? Can The datasource be XML?

I hope when I get this working all other widgets etc will be easy for me to suss out. Can anyone help get me started?

<div class="search">

<input id="autoComplete" name="txtQuickSearch" type="text" value="product search" onclick="this.value='';" onblur="if(this.value=='')this.value='product search';" class="search_field" />

</form>

</div>

<script>

$(document).ready(function() {

$("#autoComplete").kendoAutoComplete({

minLength: 3,

dataTextField: "productName", // XML property name to use

dataSource: new kendo.data.DataSource({

type: "xml", // specifies data protocol

pageSize: 10, // limits result set

// data: "/products/product/productName",

transport: {

read: "http://api.mytesting.com/xml/products/products.xml",

},

schema: {

type: "xml",

data: "/products/product",

model: {

fields: {

productName: "productName"

}

})

              //below doesnt work

            /*  minLength: 3,

              //dataTextField: "ProductName",

              separator: ", ",

              dataSource: {

                  type: "xml",

                  serverFiltering: true,

                  serverPaging: true,

                  pageSize: 20,

                  

                  transport: {

                      read: "products.xml"

                  }

              }*/

          });

      });

AutoComplete

answered on 24 Feb 2012

5 answers

184 views

Making a section scrollable

Hi,

So I wanted to make a special view for tablets. Where we have a large photo on one side and information on the other. Well the photo would not need to scroll because it would fill the space. But the information would need to scroll. I like the ui's scrolling effects. Is there a way to tell a DIV that it's scrollable. I did set the div to a fixed height and overflow hidden or scroll. Which works but does not have the ui's scroll bar or the smoothness that the ui has. Plus I really don't know overflow hidden would even scroll on different devices, I know it does not work on desktops unless you can click and hold then move mouse down.

Please help.

Application

answered on 24 Feb 2012

8 answers

374 views

Widget Destroy methods

Hi, I was wondering why you do not have destroy methods for the widgets.Controls like the grid do apply multiple extra divs to the body and it is a pain when developing a 'single page app' to try and keep the dom tidy when rendering different views.

Thanks

Grid

answered on 24 Feb 2012

2 answers

126 views

suitable editor for coding the Kendo UI

Can anyone tell me about suitable editor for developing webpage with Kendo UI framework.

Thanks in advance

General Discussions

answered on 24 Feb 2012

4 answers

643 views

Help with assigning a data table to a grid

Greetings,

I am brand new to Kendo and seek a little help. I have looked over the demos and some of the code others have posted in the forums and I am still stumped, because I am new to MVC, jSON, and Kendo.

If i could get some simple code to get started with, I think I could finish it on my own.

Can someone provide a basic example of a project that takes a dataset or data table from a web service or wcf, and binds the datable to a grid? We need to see this in MVC 3 with Razor.

I would be VERY grateful, as we are evaluating Kendo for use on a large project.

Thanks

Data Source

answered on 23 Feb 2012

0 answers

105 views

Kendo UI Web demos in IE8

Hello,
I cannot seem to get most of the demos working in IE8. I am not in the compatibility mode so it should have worked in the standards mode. Please find my screenshots attached for all the information you may need.

Thanks.

General Discussions

asked on 23 Feb 2012

1 answer

430 views

Hide Columns

Hello all!

My app has 12 grids that are nearly identical in structure, often appearing on the same page. However, half have one extra column.

Since hey are so similar I have extracted their initialization into a single function.

$.each($(".kendoGrid"), function () {

loadJobGrid('#' + $(this).attr('id'));

})

But now I need to conditionally hide that one column.

In order of preference I'd like to know how to

Hide columns after a grid is created. (and will this be a problem after events like datasource refresh, or paging?)
Or ... Modify the the columns: [ ... ] section to conditionally add a field.

Thanks all!

Grid

answered on 23 Feb 2012

2 answers

623 views

Window is not centered the first time opened

Hello all, Using the below code, I open, (and reopen) a window. I cannot get the first instance to be centered.

$(".jobLocationLink").live('click', function () {

currentJobId = $(this).data("id");

var parentGrid = $(this).data("parentGrid");

var title = $(this).attr("title");

var href = "../ModalWindows/JobLocationNotes.aspx?jobId=" + currentJobId;

var myWin = $("#jobLocationWindow")

if (!myWin.data("kendoWindow")) {

// window not yet initialized

myWin.kendoWindow({

content: href,

center: true,

title: "Job Location History",

iframe: true,

width: "800px",

height: "400px",

scrollable: false

});

}

else {

// reopening window

myWin.data("kendoWindow")

.refresh(href) // request the URL via AJAX

.open() // open the window

.center();

}

});

Thanks!

Window

answered on 23 Feb 2012

4 answers

1.1K+ views

Nothing is selected DropDownList but value is not blank

Hi,

I have a DropDownList using a server-side paging and when I have nothing selected, the control still return a value.

.text() return blank (ok)
.value() return something even if I didn't select anything yet. Very strange default behavior.
Any idea?

<script type="text/javascript">

function logSelected() {
var dropdownlist = $("#dropDownList").data("kendoDropDownList");
var txt = dropdownlist.text();
var val = dropdownlist.value();
     kendoConsole.log('[Selected Value:'+val+']'+' [Text:'+txt+']');
     }

    $(document).ready(function() {

$("#dropDownList").kendoDropDownList({
            autoBind: false,
            dataTextField: "SalesrepName",
            dataValueField: "SalesrepId",
            change: function(){
    },
   filter: "contains",
minLength: 1,
template: $("#scriptTemplate").html(),
columns: [{field:"SalesrepId",title:"Salesrep"},
                      {field:"SalesrepName",title:"Salesrep Name"}],
            dataSource: new kendo.data.DataSource({
                type: "odata",
                serverFiltering: true,
                serverPaging: true,
                pageSize: 20,
                transport: {
                    read: "csp/mediapool/public/dt.common.odata.RequestServer.cls?$select=SalesrepId,SalesrepName&$tablename=dt_common_ui_samples_data.Salesrep&$orderby=SalesrepName"
                }
            })
        });
});
</script>

DropDownList

answered on 23 Feb 2012