Questions on Kendo UI for jQuery Forum

4 answers

1.2K+ views

How to re-render grid with new columns/data after fetch from dataSource

I have a grid that is metadata driven. When the data comes back from the data source (the data that comes back includes the metadata), I parse the data with the parse method. In that method, I flatten a data structure that I received to match a list of columns that we generated by the metadata.

I have set the dataSource property of the grid to the kendo datasource that I created.

I have some actions in the page that can force the datasource to fetch its data and metadata (through dataSource.fetch). The problem that I have is it seems that I can't force the grid to update its list of columns and its data at the same time unless I completely destroy the html containing the grid.

Furthermore, the grid will also trigger a fetch of the data when it is re-rendered, causing two calls to the server to do exactly the same thing.

Is there a way to force the grid to fully re-render itself while using the data that is already in the dataSource? I tried calling dataSource.data() but it returns an empty object, although there is actually some data in the dataSource (it may have to do with the cache=false in my settings)

Thanks

Grid

answered on 24 Feb 2012

0 answers

154 views

data propagation and update

I have some XML that I'd like to express to the user as a tree view. Looks like I'll have to use XSLT or something to convert it to <ul><li> format for the tree view.

But what about getting the data back out? Specifically, as the user is dragging nodes around I need to keep the original XML data in step with that. I can switch to JSON if needed.

KnockoutJS handles updating data back to the server quite well, though I've never used it with this sort of operation (tree view).

Does anyone have any suggestions or recommendations? How are other people handling this?

TreeView

asked on 24 Feb 2012

8 answers

1.2K+ 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

179 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

201 views

[Solved] 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

455 views

[Solved] 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

136 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

670 views

[Solved] 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

121 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

479 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