Questions on Kendo UI for jQuery Forum

2 answers

150 views

hello please excuse my English :)

I have a grid in which I want to send a value to another asp page and take the data from that page.

I have a button of the grid in a form from which I make a redirect to the asp page and from there take the value creating html objects in a container I put the value which has a field that I have next to the grid in asp page tome that data and do the update of the value in a table.

My problem is that when I make shipments only works if I make the example with the first field and makes the update in the table but if I do the same with the second field of the grid no longer works.
the same goes for the second forward.




      <script src="datoss.asp"></script>

<div id="domSelection" style="width:620px; height:300px"></div>
 
                       <script>
                  $(document).ready(function() {
                    $("#domSelection").kendoGrid({
                        dataSource: {
                            data: FuncionDellenado3()
                            
                        },
                        selectable: "multiple",
                        pageable: true,
                        scrollable: true,
                        navigatable: true,
                       columns: [
                           { field: "FirstName", title: "productos", format: "{0:c}", type:"String",editable: false, width: "150px" },
                            { field: "City", title: "cantidad", editable:true, type:"Number", validation: { min: 1, required: true },width: "150px" },
                            {field: "BirthDate", title: "fecha de Entrega",type:"String",editable:true,width:"150px"},
                            { field: "favoritos", title: "favoritos", editable:true, type:"String",width: "150px" },
                            {field: "boton", template: "#=  '<form id=\"form3\" method=\"post\" action=\"activauno.asp\"><input type=\"submit\"id=\"boton3\" class=\"boton3\" value=\"3\"/></form>' #", title: "favorito", width: "100px",type:"String", editable:false },                          
                            { field: "añadir", template: "#= '<input type=IMAGE SRC=\"add.gif\"\id=\"añadir\" value=\"CODE\" />' #", title: "añadir", width: "210px",type:"String", editable:false }],
                            editable: true
                    });
                        });
            </script>
 <script>
     
             $(document).ready(function(){  
$('.boton3').click(function() {
             var x=document.getElementById("boton3").value;
              
             var sourcegrid = $('#domSelection').data('kendoGrid');       
             
            sourcegrid.select().each(function () {
             
               var dataItem = sourcegrid.dataItem($(this));
                var column = dataItem.favoritos;
                    var nomb = dataItem.FirstName;
                fi = document.getElementById('form3');
  
            contenedor = document.createElement('div'); 
            contenedor.id = 'div1'; 
            fi.appendChild(contenedor); 
   
            ele = document.createElement('input'); 
            ele.type = 'text'; 
            ele.value = column; 
            ele.name = 'favo'; 
            ele.id = 'campo';
            contenedor.appendChild(ele); 
                 
                ele = document.createElement('input'); 
            ele.type = 'text'; 
            ele.value = nomb;
            ele.name = 'nomb'; 
            ele.id = 'campo2';
            contenedor.appendChild(ele); 
                 
                     });
                     
            });
                     
    });
    </script>

and my code asp

<%

Dim clientes, nombre2, nombre, material

nombre2 = Request("nomb")

response.write(nombre2)

nombre = Request("favo")

response.write(nombre)

nombre2=Replace(nombre2,"Ñ","?")

%>

please help!

regards.

Grid

answered on 14 May 2012

1 answer

239 views

Problem with combining dataviz and fx.min.js

Hi,

I am now working on a project that displaying charts for my client.

The page works great on computer, but when I tested it on iPad, the problem occurs as follow:

- Since I have to add the drop down list with scolller on my page, I checked this page here and it says I need to include kendo.fx.min.js.
- I also have a structure like below, where "fix_width" is set to a fix width and set to "overflow: scroll", and "chart" is for drawing a column chart. Therefore, if the chart's width is larger than "fix_width", I can still check the rest part by scrolling on iPad. But since I include kendo.fx.min.js and after I scroll the chart on iPad, the rest part of the chart doesn't display completely, unless I select one of the data column (which I know all the data are there but just some columns are not displaying). If I remove kendo.fx.min.js, the chart works fine but the drop down list can't scroll any more.

Are there any solution about this?

Thanks a lot in advance!

<div id="fix_width">

<div id="chart"></div>

</div

Charts

answered on 14 May 2012

0 answers

113 views

Mobile Listview control custom template

i want bind the data to listview through pagemethods, but it is not binding.
1. can i use pagementhod for lisview databinding ?

Please check the code and give me the suggestions......

<div data-role="view" id="listview-templates" data-title="ListView" data-init="mobileListViewTemplatesInit">
<ul id="custom-listview">
</ul>
</div>

function mobileListViewTemplatesInit() {
PageMethods.GetEventTrainees(function (response) {
groupedData = response.split("#");
});
$("#custom-listview").kendoMobileListView({
dataSource: kendo.data.DataSource.create({ data: groupedData }),
template: $("#customListViewTemplate").html()
});
}

ScrollView (Mobile)

asked on 14 May 2012

5 answers

180 views

Clickable ListView?

Hi,

I have the following scenario:
- Data is bound to a ListView
- When the user clicks on an item in the ListView, he/she should be redirected to a new view (page)

The problem is that the click event is fired each time I scroll up or down in the ListView.

How do I implement a ListView that allows you to scroll up or down, and upon click redirects the user to a new view?

//Marcus

ListView

answered on 14 May 2012

0 answers

61 views

Kendo UI web and touchenabled desktop

Hi all,

when i went through Kendo UI web,i found that it helps us in enabling the touch enabled desktop environment.I found it confusing here that when it tells about the touch features,it is a native feature of the Operating system.I do not understand how it helps in touch enabled desktop environment.

General Discussions

asked on 14 May 2012

1 answer

625 views

Chart Background

Hi there,

Let me know how to change chart background?

General Discussions

answered on 14 May 2012

2 answers

110 views

Chart DataSource reverting to original

I have code that updates the datasource of a chart and it works fine. I also have code that changes the chart from a column to bar to line. That also works, but any time the .refresh() method is called on the chart, it reverts the datasource to the original data source.

Was wondering if this is a bug, or a feature change.

Testing steps:
Change the "Select parking area filter" from 0 to 4. Notice the chart refreshes with values of 5 (n+1).
Change the "Chart type" from column to bar. Notice the data source reverts back to original.

The fiddles below are identical except for the kendo.all.min.js included.

2012.1.322 - Broken
http://jsfiddle.net/CdpgZ/3/

2011.3.1129 - Works
http://jsfiddle.net/YbrgL/1/

Thank you

Jon

Charts

answered on 14 May 2012

0 answers

117 views

Virtual Scrolling Issue

Hi,
I'm using a kendo UI grid. I have enabled the Server pagination and virtual pagination. I have implemented read and update behaviors for the grid. Now my issue is when I'm scrolling down using the scroll bar (virtual pagination), server side get method is executed and loaded the data accordingly. but when i go to the client side and debug the code, i could find the data source is not updated accordingly.Still it has the old data. In the other words, it has the data which is loaded first time the grid is loaded. so i could not populate that data in my separate partial edit view.

my second issue is i could not implement the server sorting still. can you just provide me code sample for both client side and server side coding for this. what I just tried out was,
in the client side i enabled the sorting as
------
serverSorting: true,
allowUnsort: true,
------
sortable: true,
------

in the server side,
[HttpPost]
public JsonResult GetAll(int skip, int take, List<GridSort> sort)
{
-------
}

but always, I'm getting the null values for the field and dir properties of the GridSort item.
what is the code for the client side for the above implementation?

Can please help me on these above 2 issues?

Niluka

Grid

asked on 14 May 2012

1 answer

183 views

Grid alignment problem

Here's a description of my problem. Could it have something to do with the styles that you ship with the grid?

I have a wrapper DIV with the following CSS properties:

height: auto !important;
margin: 0 auto -125px;
min-height: 100%;

Inside that DIV, I have two other DIVs. The first one is a menu aligned to the left side of the page with the following CSS properties:

float: left;
width: 160px;

To the right of the menu should appear the page content. It's another DIV. If I just type some content into it (some static text), all is well (i.e., it appears to the right of the menu and spans the rest of the screen). If, however, I allow the Kendo grid to populate it, it clobbers the menu, and either takes up the whole screen (if I don't use any CSS properties) and even extends below the menu (even though it contains only one row of data), or it appears as a tiny little area to the right of the menu, depending on what I set "display" as.

This DIV appears just fine in IE (i.e., it appears to the right of the menu and takes up the remainder of the screen space, regardless of browser width--the grid columns resize as I resize the browser). How do I get this to work in Chrome, too?

Grid

answered on 14 May 2012

1 answer

1.0K+ views

Adding to kendogrid datasource causes "is not defined" error

Hi,

I am trying to add a row to my grid but it isn't happening. I keep getting this error:




Uncaught ReferenceError: FirstName is not defined
(anonymous function)
Widget.extend._rowsHtmlkendo.web.js:18870
Widget.extend.refreshkendo.web.js:19055
e.extend.proxy.gjquery.min.js:2
Class.extend.triggerkendo.web.js:133
Observable.extend._processkendo.web.js:5628
Observable.extend._changekendo.web.js:5584
e.extend.proxy.gjquery.min.js:2
Class.extend.triggerkendo.web.js:133
Observable.extend.splicekendo.web.js:3920
Observable.extend.insertkendo.web.js:5394
Observable.extend.addkendo.web.js:5377
(anonymous function)1:367
f.Callbacks.njquery.min.js:2
f.Callbacks.o.fireWithjquery.min.js:2
e.extend.readyjquery.min.js:2
c.addEventListener.B



I've traced it down to this annonymous function - rowTemplate


(function(data) {
var o,e=kendo.htmlEncode;with(data){o='<tr data-uid="'+(uid)+'"><td>'+(e(FirstName))+'</td><td>'+(e(LastName))+'</td></tr>';}return o;
})



Here's my html file...Looks like a scoping issue? I can't figure out why this is happening???


<html>
<head>
    <script src="http://localhost:8000/kendo/js/jquery.min.js"></script>
    <script src="http://localhost:8000/kendo/js/kendo.web.min.js"></script>
    <link href="http://localhost:8000/kendo/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://localhost:8000/kendo/styles/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
  
<div id="grid"></div>
  
<script> 
$(document).ready(function(){
    $("#grid").kendoGrid({
        columns:[
            {
                field: "FirstName",
                title: "First Name"
            },
            {
                field: "LastName",
                title: "Last Name"
        }],
        dataSource: {
            data: [
                {
                    FirstName: "Joe",
                    LastName: "Smith"
                },
                {
                    FirstName: "Jane",
                    LastName: "Smith"
            }]
        }
    });
  
  
    var grid = $("#grid").data("kendoGrid");
    grid.dataSource.add([{
        FirstName: "Bobby",
        LastName: "Loo"      
    }]);
      
});
</script>
  
</body>
</html>

Grid

answered on 14 May 2012