Questions on Kendo UI for jQuery Forum

0 answers

164 views

Hi folks,

This is my first doubt on Kendo UI Forum, and I will appreciate all you guys help!

I tried to populate a DataSource based on a XML File. If this DataSource is used with a Grid, it works well, therefore I can´t use It again with a form.

I also got an error executing my code...

Here is my complete source code:

HTML

<form id="frmPedido" method="post" action="" data-bind="source: pedidos">

<ul>

<li><label for="pedido">Pedido:</label><input type="text" id="pedido" data-bind="value: pedido" class="k-input" /></li>

<li><label for="nomecontato">Seu Nome:</label><input type="text" id="nomecontato" data-bind="value: nomecontato" class="k-input" /></li>

<li><label for="telcontato">Seu Telefone:</label><input type="text" id="telcontato" data-bind="value: telcontato" class="k-input" /><label for="celcontato">Seu Celular:</label><input type="text" id="celcontato" data-bind="value: celcontato" class="k-input" /></li>

<li><label for="nomedaigreja">Nome da Igreja:</label><input type="text" id="nomedaigreja" data-bind="value: nomedaigreja" class="k-input" /></li>

<li><label for="qtdmembros">Qtd. Membros:</label><input type="text" id="qtdmembros" data-bind="value: qtdmembros" class="k-input" /></li>

<li><label for="email">Seu Email:</label><input type="text" id="email" data-bind="value: email" class="k-input" /></li>

<li><label for="cnpj">CNPJ da Igreja:</label><input type="text" id="cnpj" data-bind="value: cnpj" class="k-input" /></li>

<li><label for="nomepastor">Nome do Pastor:</label><input type="text" id="nomepastor" data-bind="value: nomepastor" class="k-input" /></li>

<li><label for="rgpastor">RG do Pastor:</label><input type="text" id="rgpastor" data-bind="value: rgpastor" class="k-input" /></li>

<li><label for="cpfpastor">CPF do Pastor:</label><input type="text" id="cpfpastor" data-bind="value: cpfpastor" class="k-input" /></li>

<li><label for="icep">CEP:</label><input type="text" id="icep" data-bind="value: icep" class="k-input" /></li>

<li><label for="iendereco">Endereço:</label><input type="text" id="iendereco" data-bind="value: iendereco" class="k-input" /><label for="inumero">Número:</label><input type="text" id="inumero" data-bind="value: inumero" class="k-input" /></li>

<li><label for="icomplemento">Complemento:</label><input type="text" id="icomplemento" data-bind="value: icomplemento" class="k-input" /><label for="ibairro">Bairro:</label><input type="text" id="ibairro" data-bind="value: ibairro" class="k-input" /></li>

<li><label for="icidade">Cidade:</label><input type="text" id="icidade" data-bind="value: icidade" class="k-input" /><label for="iestado">Estado:</label><input type="text" id="iestado" data-bind="value: iestado" class="k-input" /></li>

<li><input type="button" id="btnEnviar" value="Enviar" class="k-button"></li>

</ul>

</form>

XML File

<?xml version="1.0" encoding="utf-8"?>

<compra>

<info>

<pedido>100001323</pedido>

<valorpedido>353.99</valorpedido>

<valorboleto>140</valorboleto>

<nomedaigreja>PRIMEIRA IGREJA DO BRASIL</nomedaigreja>

<cnpj>00.000.000/0000-00</cnpj>

<icep>13800-000</icep>

<iendereco>AVENIDA DOS CASTELOS NEGROS</iendereco>

<inumero>981</inumero>

<icomplemento>CASA</icomplemento>

<ibairro>CENTRO</ibairro>

<icidade>MOJI MIRIM</icidade>

<iestado>SP</iestado>

<email>diego.srs@gmail.com</email>

<emailigreja>contato@soareseneves.com.br</emailigreja>

<nomecontato>DOUGLAS SOARES</nomecontato>

<telcontato>1938628680</telcontato>

<celcontato>1899633617</celcontato>

<teligreja>1899859794</teligreja>

<software>6</software>

<qtla>1</qtla>

<banco>0</banco>

<datadeposito>14-06-2012</datadeposito>

<suporte>4</suporte>

<nomepastor>DIEGO SOARES</nomepastor>

<rgpastor>453010507</rgpastor>

<cpfpastor>34852052816</cpfpastor>

<boleto>100001323</boleto>

<sedex>22</sedex>

<formapagto>2</formapagto>

<tipopagto>1</tipopagto>

<cep>69970-000</cep>

<aoscuidados>FRANCISCO SOARES</aoscuidados>

<endereco>RUA DAS OSTRAS</endereco>

<numero>172</numero>

<complemento>APTO 130</complemento>

<bairro>CENTRO</bairro>

<cidade>MOJI MIRIM</cidade>

<estado>SP</estado>

<qtdmembros>500</qtdmembros>

<obs>BOM PROGRAMA</obs>

<parcelas>3</parcelas>

<valorparcelas>116.70</valorparcelas>

<afiliado>0</afiliado>

</info>

</compra>

Kendo UI JavaScript

<script type="text/javascript">

$(function() {

var pedidoSource = new kendo.data.DataSource({

transport: {

read: "xml/100001323.xml"

},

schema: {

type: "xml",

data: "/compra/info",

model: {

id: "pedido/text()",

fields: {

pedido: "pedido/text()",

nomedaigreja: "nomedaigreja/text()",

cnpj: "cnpj/text()",

icep: "icep/text()",

iendereco: "iendereco/text()",

inumero: "inumero/text()",

icomplemento: "icomplemento/text()",

ibairro: "ibairro/text()",

icidade: "icidade/text()",

iestado: "iestado/text()",

email: "email/text()",

nomecontado: "nomecontato/text()",

telcontato: "telcontato/text()",

celcontato: "celcontato/text()",

datadeposito: "datadeposito/text()",

nomepastor: "nomepastor/text()",

rgpastor: "rgpastor/text()",

cpfpastor: "cpfpastor/text()",

qtdmembros: "qtdmembros/text()"

}

});

pedidoSource.read();

var viewModel = kendo.observable({

pedidos: pedidoSource

});

kendo.bind($("form"), viewModel);

});

</script>

Thanks!

Data Source

asked on 14 Jun 2012

5 answers

356 views

Grid binding column order

If I specify my grid headers like this:

data-columns='[{"field": "pdrID", "title":"PdrID"},

{"field": "rotationName", "title":"Rotation"},

{"field": "siteCapacityID", "title":"CapacityID"},

{"field": "ruleID", "title":"RuleID"},

{"field": "userID", "title":"UserID"},

{"field": "name", "title":"Student"},

{"field": "location", "title":"Site"},

{"field": "statusDesc", "title":"Status"},

{"field": "pref", "title":"Pref"},

{"field": "campusName", "title":"Campus"},

{"field": "startDate", "title":"Start"},

{"field": "endDate", "title":"End"}

]'

I would expect that since I'm telling it which field to match up, that I could control the order that the data item displays in. However it seems to render the columns based on the JSON property order instead.

So lets say the above is the correct order the json is coming down in, if I swapped the first two header items, theyd render swapped, but the data would bind as it did before, so the pdrs would be in the rotations column and visa versa.

MVVM

answered on 14 Jun 2012

1 answer

214 views

Client operation mode?

I'm trying to get the Kendo Grid operating in the 'client operation mode', as in the Telerik Extensions for ASP.Net. This is where the grid makes only one request to the server, retrieves all the data, then performs all operations (paging, sorting, filtering and grouping) client-side. Does anyone know if this mode of operation supported in the Kendo Grid? Many thanks in advance.

Grid

answered on 14 Jun 2012

2 answers

438 views

Kendo AutoComplete - AspNet WebService

I have been struggling to bind an AutoComplete datasource to an AspNet web service throughout the day. But the web service is not called at all. The error routine shows "Internal Server Error" alert.

Both the web page and the web service are in a folder named "AutoComplete" under the root directory.
Could anybody please help me?

Client-Side Code:

<script type="text/javascript">
var _rootUrl = '<%=string.Format("{0}{1}/", Request.Url.GetLeftPart(UriPartial.Authority), HttpRuntime.AppDomainAppVirtualPath)%>';
</script>

<script type = "text/javascript">

$(document).ready(function ()
{
$("#TxtName").kendoAutoComplete(
{
change: function (e)
{
alert(e);
onChange(e);
},
minLength: 1,
dataTextField: "Name",
filter: "contains",
dataSource: new kendo.data.DataSource(
{
type: "json",
transport:
{
read:
{
type: "POST",
url: _rootUrl + "AutoComplete/WebService2.asmx/GetEmployeesNames",
contentType: 'application/json; charset=utf-8',
datatype: "json",
data: function ()
{
alert($("#TxtName").data("kendoAutoComplete").value());
return
{
Param: $("#TxtName").data("kendoAutoComplete").value()
}
} // data
}, //read
parameterMap: function (options)
{
alert(options);
return JSON.stringify(options);
} // parameterMap
}, // transport
serverFiltering: true,
serverSorting: true,
pageSize: 10,
schema:
{
data: "d"
},
error: function(e)
{
var xhr = e[0];
var statusCode = e[1];
var errorThrown = e[2];

alert(xhr);
alert(statusCode);
alert(errorThrown);
}
})
})
});

</script>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID = "TxtName" runat = "server" />
</div>
</form>
</body>

Web Service:
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService2 : System.Web.Services.WebService
{
public class Employee
{
private int _Id;
private string _Name;
public int Id
{
get { return _Id; }
set { _Id = value; }
}
public string Name
{
get { return _Name; }
set { _Name = value; }
}
public Employee() { }
public Employee(int Id, string Name)
{
this.Id = Id; this.Name = Name;
}
}

public WebService2() { }

[ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
[WebMethod]
public List<Employee> GetEmployeesNames(string Param)
{
string StrConnectionString = ConfigurationManager.ConnectionStrings["ConnectionStringEmployeesNormalized2"].ConnectionString;
SqlConnection SqlConnection1 = new SqlConnection(StrConnectionString);
SqlCommand SqlCommand1 = new SqlCommand("SELECT Id, Name FROM dbo.Employees Where Name Like '" + Param.Trim() + "%'", SqlConnection1);

DataTable DataTable1 = new DataTable();
SqlDataAdapter SqlDataAdapter1 = new SqlDataAdapter(SqlCommand1);
SqlDataAdapter1.Fill(DataTable1);

List<Employee> List1 = new List<Employee>();
foreach (DataRow DataRow1 in DataTable1.Rows)
{
List1.Add(new Employee(Convert.ToInt32(DataRow1["Id"]), Convert.ToString(DataRow1["Name"])));
}

return List1;
}
}

AutoComplete

answered on 14 Jun 2012

2 answers

218 views

How would you hide a column?

MVVM binding, json has 10 columns, I only need to show 5 of those...

I've tried "visible" or "width" on the header bindings with no success...can it be done?

Grid

answered on 14 Jun 2012

2 answers

139 views

Virtual Grid Without paging

Hi.

We are looking at Kendo UI for our new web offering.
We have grids in our system which can easily contain 100K rows or more.
We do not want paging. We want to be able to scroll across all rows without interruption.

I modified the basic grid example to generate 100K rows and set the page size to 100K.
The grid took around 4 minutes to load and then was unresponsive to user interaction.

Is there a way to specify a true virtual mode so that the data source size becomes unimportant?

Take care,

Ken Rubin

Grid

answered on 14 Jun 2012

2 answers

141 views

[Solved] Simple array binding?

What am I doing wrong here...? syntax problem perhaps? It's properly 3 times, but the name only shows up twice, and it's not binding the children to the proper area.
http://jsfiddle.net/stevescotthome/NsSks/3/

Seems straight forward?

MVVM

answered on 14 Jun 2012

1 answer

161 views

Grid animation

Hi

is there any animation that can be applied to the row-template of the grid when rendering the rows from search keypress scernario.

the desired effect would be a staggered row render type effect

or any animation of anykind that can be applied to the grid rendering on the page - (NOT loading animation)

thanks in advance

Richard J

Grid

answered on 14 Jun 2012

0 answers

65 views

Two Grids effecting each other when sorting

Hi All
I have two grids on one page. If I try to sort the first grid, die cloumn on the second grid are disappearing. If if then sort a cloumn one the second grid teh data are back again. grid obj ids are different. DataSorce variables are diffrent. So this is a strange effect.

How can I configure each grid, so that they are not effecting each other when sorting ?

With kind reagrds
Gerd

Grid

asked on 14 Jun 2012

1 answer

590 views

On Render Event

I have a list view that I have created. I would like to trigger an event when an item in the list view is double clicked.

To do this, I have the following template:

<script id="uxMyTemplate" type="text/x-kendo-tmpl">

<div class="cwcs_listItem" data-id="${ID}">

<h2>${Name}</h2>

<p>

${Description}

</p>

</div>

</script>

And the following function to register the event:

function _setItemDoubleClickEvent() {

var items = $(".cwcs_listItem");

items.dblclick(function() { alert("Double Click!"); });

}

Unfortunately this doesnt do me any good before the data has been retrieved and the template rendered in the list view.
My question is: Is there an event I can register for which will be called when a kendo control has finished rendering a template?

General Discussions

answered on 14 Jun 2012