or
3 answers
151 views
Hi,
First of all I would like to mark that I'm quite fresh in the kendo UI stuff.
My employer asked me to write a mobile application using kendo UI. Because there is no data binding Topics I decided to write my post here.
So the problem is that autocomplete input does not get the data from webservice some how. I'm not shure if I wrote databinding correct.
Could someone help me? I'll be greateful for any help with that.
// THIS IS JAVASCRIPT
$("#tbProducer").kendoAutoComplete({
minLength: 1,
filter: "contains",
placeholder: "Wpisz producenta...",
dataSource: {
//type: "xml",
transport: {
read: {
type: "POST",
url: "http://mobileservice.cenpol.pl:81/CenpolMobileService.svc/GetProducers",
dataType: "xml",
processData: false,
data: xmlstring
}
},
schema:
{
data: "Alias",
model:
{
fields:
{
Alias: { type: "string" },
ContactDataID: { type: "number" },
ID: { type: "number" },
Suggested: { type: "number" }
}
}
},
serverFiltering: false
}
});
// THIS IS WEB FORM
<!DOCTYPE html>
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div data-role="view" data-layout="overview-layout" id="vSearcher">
<p>
<label>Wprowadź dane do wyszukiwania</label>
<br />
<br />
<label>Producent:<br /><input type="text" id="tbProducer" class="k-input" autocomplete="on"/></label><br />
<label>Opis materiału:<br /><input type="text" id="tbMaterialDesc" class="k-input"/></label><br />
<label>Numer katalogowy:<br /><input type="text" id="tbCatalogNo" class="k-input"/></label><br />
</p>
<p style="text-align:center;">
<button id="btSearch" class="km-button" style="font-size:14px;">
<img src="img/search-32.png" width="24" height="24" style="align-content:center; align-self:center; vertical-align:central; margin: 0 15px 0 0"/>Szukaj
</button>
</p>
</div>
<div data-role="view" data-layout="overview-layout" id="vResults">
Wyniki
</div>
<div data-role="view" data-layout="overview-layout" id="vAboutUs">
O nas
</div>
<div data-role="layout" data-id="overview-layout">
<header data-role="header">
<div data-role="navbar">Cenpol Mobile © 2013</div>
</header>
<footer data-role="footer">
<div data-role="tabstrip">
<a href="#vSearcher"><img src="img/search-32.png" width="24" height="24" /><br /><label>Wyszukiwarka</label></a>
<a href="#vResults"><img src="img/result-32.png" width="24" height="24" /><br /><label>Wyniki</label></a>
<a href="#vAboutUs"><img src="img/about-32.png" width="24" height="24" /><br /><label>O nas</label></a>
</div>
</footer>
</div>
<style scoped>
.k-input {
padding: 0 10% 0 0;
width: 90%;
}
</style>
<script>
var app = new kendo.mobile.Application(document.body,
{
transition: 'slide',
platform:'android'
});
$("#tbProducer").kendoAutoComplete({
minLength: 1,
filter: "contains",
placeholder: "Wpisz producenta...",
dataSource: {
//type: "xml",
transport: {
read: {
type: "POST",
url: "http://mobileservice.cenpol.pl:81/CenpolMobileService.svc/GetProducers",
dataType: "xml",
processData: false,
data: xmlstring
}
},
schema:
{
data: "Alias",
model:
{
fields:
{
Alias: { type: "string" },
ContactDataID: { type: "number" },
ID: { type: "number" },
Suggested: { type: "number" }
}
}
},
serverFiltering: false
}
});
</script>
</body>
///////////////////////////////////////////////////////////////////////////////////////
The attachment is the response I get from the webservice.
The webservice is the WCF webservice. I use basichttpbinding because it is appropriate for Windows Phone App. I read it is OK for Kendo to get data from XML services (not only Json).
Thank you for your help. Any asnwer will be appreciated.
Best regards,
Paul
First of all I would like to mark that I'm quite fresh in the kendo UI stuff.
My employer asked me to write a mobile application using kendo UI. Because there is no data binding Topics I decided to write my post here.
So the problem is that autocomplete input does not get the data from webservice some how. I'm not shure if I wrote databinding correct.
Could someone help me? I'll be greateful for any help with that.
// THIS IS JAVASCRIPT
$("#tbProducer").kendoAutoComplete({
minLength: 1,
filter: "contains",
placeholder: "Wpisz producenta...",
dataSource: {
//type: "xml",
transport: {
read: {
type: "POST",
url: "http://mobileservice.cenpol.pl:81/CenpolMobileService.svc/GetProducers",
dataType: "xml",
processData: false,
data: xmlstring
}
},
schema:
{
data: "Alias",
model:
{
fields:
{
Alias: { type: "string" },
ContactDataID: { type: "number" },
ID: { type: "number" },
Suggested: { type: "number" }
}
}
},
serverFiltering: false
}
});
// THIS IS WEB FORM
<!DOCTYPE html>
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div data-role="view" data-layout="overview-layout" id="vSearcher">
<p>
<label>Wprowadź dane do wyszukiwania</label>
<br />
<br />
<label>Producent:<br /><input type="text" id="tbProducer" class="k-input" autocomplete="on"/></label><br />
<label>Opis materiału:<br /><input type="text" id="tbMaterialDesc" class="k-input"/></label><br />
<label>Numer katalogowy:<br /><input type="text" id="tbCatalogNo" class="k-input"/></label><br />
</p>
<p style="text-align:center;">
<button id="btSearch" class="km-button" style="font-size:14px;">
<img src="img/search-32.png" width="24" height="24" style="align-content:center; align-self:center; vertical-align:central; margin: 0 15px 0 0"/>Szukaj
</button>
</p>
</div>
<div data-role="view" data-layout="overview-layout" id="vResults">
Wyniki
</div>
<div data-role="view" data-layout="overview-layout" id="vAboutUs">
O nas
</div>
<div data-role="layout" data-id="overview-layout">
<header data-role="header">
<div data-role="navbar">Cenpol Mobile © 2013</div>
</header>
<footer data-role="footer">
<div data-role="tabstrip">
<a href="#vSearcher"><img src="img/search-32.png" width="24" height="24" /><br /><label>Wyszukiwarka</label></a>
<a href="#vResults"><img src="img/result-32.png" width="24" height="24" /><br /><label>Wyniki</label></a>
<a href="#vAboutUs"><img src="img/about-32.png" width="24" height="24" /><br /><label>O nas</label></a>
</div>
</footer>
</div>
<style scoped>
.k-input {
padding: 0 10% 0 0;
width: 90%;
}
</style>
<script>
var app = new kendo.mobile.Application(document.body,
{
transition: 'slide',
platform:'android'
});
$("#tbProducer").kendoAutoComplete({
minLength: 1,
filter: "contains",
placeholder: "Wpisz producenta...",
dataSource: {
//type: "xml",
transport: {
read: {
type: "POST",
url: "http://mobileservice.cenpol.pl:81/CenpolMobileService.svc/GetProducers",
dataType: "xml",
processData: false,
data: xmlstring
}
},
schema:
{
data: "Alias",
model:
{
fields:
{
Alias: { type: "string" },
ContactDataID: { type: "number" },
ID: { type: "number" },
Suggested: { type: "number" }
}
}
},
serverFiltering: false
}
});
</script>
</body>
///////////////////////////////////////////////////////////////////////////////////////
The attachment is the response I get from the webservice.
The webservice is the WCF webservice. I use basichttpbinding because it is appropriate for Windows Phone App. I read it is OK for Kendo to get data from XML services (not only Json).
Thank you for your help. Any asnwer will be appreciated.
Best regards,
Paul
Alexander Valchev
Telerik team
answered
on
09 Jul 2013
3 answers
78 views
Hi,
I' trying to upgrade kendo from version 2012.2.913 to 2013.1.514 and i've noticed that the template used to generate the column menu has changed from :
to
The suppression of the label in the template makes my little snippet of jsscript to mal function: this script is used to skin the checkbox displayed in the column menu:
and the we use the 'sprite trick' to skin the checkbox:
So i've 2 questions, please:
First, i'm curious to know why the label has been deleted, is it a wrong way to use checkbox ?
Then i would want to know if there is an other way to skin the checkbox of the column menu or to provide the template to use to build them ?
Thanks,
Cedric
I' trying to upgrade kendo from version 2012.2.913 to 2013.1.514 and i've noticed that the template used to generate the column menu has changed from :
'<li><label><input type="checkbox" data-#=ns#field="#=columns[col].field#" data-#=ns#index="#=columns[col].index#"/>#=columns[col].title#</label></li>'+'<li><input type="checkbox" data-#=ns#field="#=columns[col].field#" data-#=ns#index="#=columns[col].index#"/>#=columns[col].title#</li>'// First put the label BEFORE the input
var chkIdCounter = 1;
$("label > input[type='checkbox']").each(function () {
$(this).attr("id", "labeledCheckBox" + chkIdCounter);
$(this).parent().attr("for", "labeledCheckBox" + chkIdCounter++);
$(this).insertBefore($(this).parent().parent().find($(this).parent()));});/* then hide the input and display a sprite in place */
input[type="checkbox"]{ position: absolute; display: none;}input[type="checkbox"]:checked ~ label::before{ background-position: 0 -20px;}/* skin-specific sprite */input[type="checkbox"] ~ label::before{ background-image: url('itesoft/radios.png');}So i've 2 questions, please:
First, i'm curious to know why the label has been deleted, is it a wrong way to use checkbox ?
Then i would want to know if there is an other way to skin the checkbox of the column menu or to provide the template to use to build them ?
Thanks,
Cedric
1 answer
125 views
Hi,
I have a grid that can be altered through calls to a webservice as users adjust things on a page.
To do this I initially did the following
var grid = $("#grid").data("kendoGrid");
var dataSource = new kendo.data.DataSource({ data: CategoryPlanList, pageSize: 15 });
grid.setDataSource(dataSource);
Which updated my data perfectly, however I also needed to update columns whilst doing this, after some reading around I found a post saying I would have to remove and re-initialize the grid if I wish to do this, so I do:
I have a grid that can be altered through calls to a webservice as users adjust things on a page.
To do this I initially did the following
var grid = $("#grid").data("kendoGrid");
var dataSource = new kendo.data.DataSource({ data: CategoryPlanList, pageSize: 15 });
grid.setDataSource(dataSource);
Which updated my data perfectly, however I also needed to update columns whilst doing this, after some reading around I found a post saying I would have to remove and re-initialize the grid if I wish to do this, so I do:
grid.destroy();
$("#grid").empty();
and then re-create the grid using the same code that I used to initialize the grid in the first place, however this appears to have the issue that when the data is reloading the reordable facility on the grid ceases to function.
Does anyone know of a way where I can re-load a grid with new data and a new set of columns without the re-odering isue?
Thanks
Craig
Petur Subev
Telerik team
answered
on
09 Jul 2013
1 answer
3.5K+ views
Hello,
I would like to use ClientTemplate in a Grid column. I want to create html link in one of those column. I am not sure how declare and pass a variable of the Model that I am passing into the grid. I am trying to pass the variable ID and the name for the link as variable. model => model.IDString contains the id that is being passed to link and name of the link is represented in model => model.ViewImage.
Here is the piece of code I am using.
<div id="SearchResultGrid">
@(Html.Kendo().Grid(Model)
.Name("ExampleGrid")
.Columns(columns =>
{
columns.Bound(model => model.IDString).Title("ID");
columns.Bound(model => model.ViewImage).Title("View Image").ClientTemplate(model =>(
"<a href='/Example/ExampleDocument.aspx?Id=" + model.IDString + "' >" + model.ViewImage + "</a>")
);
})
.Pageable()
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.ServerOperation(false)
.Sort(sort =>
{
sort.Add(model => model.Created).Descending();
})
)
.BindTo(Model)
.Reorderable(reorder => reorder.Columns(true))
)
</div>
Can you give me an example of how declare the variable for this action link.
Following line works well for a server action
columns.Template(model =>(
"<a href='/Provider/ProviderCorrespondenceDocument.aspx?CorrespondenceId=" + model.IDString + "' >" + model.ViewImage + "</a>")
);
I would like to use ClientTemplate in a Grid column. I want to create html link in one of those column. I am not sure how declare and pass a variable of the Model that I am passing into the grid. I am trying to pass the variable ID and the name for the link as variable. model => model.IDString contains the id that is being passed to link and name of the link is represented in model => model.ViewImage.
Here is the piece of code I am using.
<div id="SearchResultGrid">
@(Html.Kendo().Grid(Model)
.Name("ExampleGrid")
.Columns(columns =>
{
columns.Bound(model => model.IDString).Title("ID");
columns.Bound(model => model.ViewImage).Title("View Image").ClientTemplate(model =>(
"<a href='/Example/ExampleDocument.aspx?Id=" + model.IDString + "' >" + model.ViewImage + "</a>")
);
})
.Pageable()
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.ServerOperation(false)
.Sort(sort =>
{
sort.Add(model => model.Created).Descending();
})
)
.BindTo(Model)
.Reorderable(reorder => reorder.Columns(true))
)
</div>
Can you give me an example of how declare the variable for this action link.
Following line works well for a server action
columns.Template(model =>(
"<a href='/Provider/ProviderCorrespondenceDocument.aspx?CorrespondenceId=" + model.IDString + "' >" + model.ViewImage + "</a>")
);
3 answers
136 views
Hi
I am trying to render a series that has 2 points for a given interval (e.g. category axis times at 00:00:00). My Kendo implementation seems to "step" the line even though the value is for the same interval.
I've attached a sample excel sample which renders my desired result, and my Kendo implementation. Is this possible - can you please provide a sample.
Thanks
Kieren
I am trying to render a series that has 2 points for a given interval (e.g. category axis times at 00:00:00). My Kendo implementation seems to "step" the line even though the value is for the same interval.
I've attached a sample excel sample which renders my desired result, and my Kendo implementation. Is this possible - can you please provide a sample.
Thanks
Kieren
$("#chart").kendoChart({ title: { text: "Units sold" }, seriesDefaults: { width: 2, markers: { visible: false, }, overlay: { gradient: null } }, series: [{ type: "area", transitions: false, width: 2, data: [ 230, 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 0, 10 ] }, { type: "line", transitions: false, width: 2, data: [ 250, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 250, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 250, null, 0 ], missingValues: "interpolate" }], valueAxis: { labels: { visible: true }, line: { visible: false } }, categoryAxis: { baseUnit: "hours", baseUnitStep: 1, majorGridLines: { visible: false }, labels: { visible: true, //format: "{0}", skip: 12, step: 24, rotation: 0, format: 'dd MM yyyy' }, categories: [new Date('06/20/2013 00:00'), new Date('06/20/2013 00:00'), new Date('06/20/2013 01:00'), new Date('06/20/2013 02:00'), new Date('06/20/2013 03:00'), new Date('06/20/2013 04:00'), new Date('06/20/2013 05:00'),new Date('06/20/2013 06:00'), new Date('06/20/2013 07:00'), new Date('06/20/2013 08:00'), new Date('06/20/2013 09:00'), new Date('06/20/2013 10:00'), new Date('06/20/2013 11:00'), new Date('06/20/2013 12:00'),new Date('06/20/2013 13:00'), new Date('06/20/2013 14:00'), new Date('06/20/2013 15:00'), new Date('06/20/2013 16:00'), new Date('06/20/2013 17:00'), new Date('06/20/2013 18:00'), new Date('06/20/2013 19:00'),new Date('06/20/2013 20:00'), new Date('06/20/2013 21:00'), new Date('06/20/2013 22:00'), new Date('06/20/2013 23:00'), new Date('06/21/2013 00:00'), new Date('06/21/2013 00:00'),new Date('06/21/2013 01:00'), new Date('06/21/2013 02:00'), new Date('06/21/2013 03:00'), new Date('06/21/2013 04:00'), new Date('06/21/2013 05:00'),new Date('06/21/2013 06:00'), new Date('06/21/2013 07:00'), new Date('06/21/2013 08:00'), new Date('06/21/2013 09:00'), new Date('06/21/2013 10:00'), new Date('06/21/2013 11:00'), new Date('06/21/2013 12:00'),new Date('06/21/2013 13:00'), new Date('06/21/2013 14:00'), new Date('06/21/2013 15:00'), new Date('06/21/2013 16:00'), new Date('06/21/2013 17:00'), new Date('06/21/2013 18:00'), new Date('06/21/2013 19:00'),new Date('06/21/2013 20:00'), new Date('06/21/2013 21:00'), new Date('06/21/2013 22:00'), new Date('06/21/2013 23:00'), new Date('06/22/2013 00:00'), new Date('06/22/2013 00:00'),new Date('06/22/2013 01:00'), ], majorTickType: "none" } });
Iliana Dyankova
Telerik team
answered
on
08 Jul 2013
1 answer
445 views
I am trying to implement server side filtering using the Kendo UI Grid and ASP .NET Web API RC. It works fine with one column, but when the user filters on a second column issues occur. The values for the second column seem to be included in the array of values for column one. How can I parse this on the server?
I am including the JSON format of the data being passed to the server because it is easier to read. Normally I have to pass the values in the query string. If the JSON format could be used that would be better (so let me know if anyone knows how):
{"take":10,"skip":0,"page":1,"pageSize":10,"filter":{"filters":[{"field":"Column1","operator":"eq","value":"val1"},{"field":"Column1","operator":"eq","value":"val2"},{"logic":"or","filters":[{"field":"Column2","operator":"eq","value":5},{"field":"Column2","operator":"eq","value":1}]}],"logic":"and"},"group":[]}
Here are the c# objects for the mapping that I found online that currently only works with one column. PageListArguments is the object that is used as the input parameter for the Get function of the Web API Controller.
public class GridFilter
{
public string Field { get; set; }
public string Operator { get; set; }
public string Value { get; set; }
}
public class GridFilters
{
public List<GridFilter> Filters { get; set; }
public string Logic { get; set; }
}
public class GridSort
{
public string Field { get; set; }
public string Dir { get; set; }
}
public class PageListArguments
{
public int Take { get; set; }
public int Skip { get; set; }
public int Page { get; set; }
public int PageSize { get; set; }
public string Group { get; set; }
public List<GridSort> Sort { get; set; }
public GridFilters Filter { get; set; }
}
Everything parses fine except for the filter when more than one column is used.
I am including the JSON format of the data being passed to the server because it is easier to read. Normally I have to pass the values in the query string. If the JSON format could be used that would be better (so let me know if anyone knows how):
{"take":10,"skip":0,"page":1,"pageSize":10,"filter":{"filters":[{"field":"Column1","operator":"eq","value":"val1"},{"field":"Column1","operator":"eq","value":"val2"},{"logic":"or","filters":[{"field":"Column2","operator":"eq","value":5},{"field":"Column2","operator":"eq","value":1}]}],"logic":"and"},"group":[]}
Here are the c# objects for the mapping that I found online that currently only works with one column. PageListArguments is the object that is used as the input parameter for the Get function of the Web API Controller.
public class GridFilter
{
public string Field { get; set; }
public string Operator { get; set; }
public string Value { get; set; }
}
public class GridFilters
{
public List<GridFilter> Filters { get; set; }
public string Logic { get; set; }
}
public class GridSort
{
public string Field { get; set; }
public string Dir { get; set; }
}
public class PageListArguments
{
public int Take { get; set; }
public int Skip { get; set; }
public int Page { get; set; }
public int PageSize { get; set; }
public string Group { get; set; }
public List<GridSort> Sort { get; set; }
public GridFilters Filter { get; set; }
}
Everything parses fine except for the filter when more than one column is used.
2 answers
75 views
Hi,
I created a new mvc 4 web application project. I then compiled and ran the project.
Then I went to the logon page and clicked on the username textbox. All is well.
I then stopped the project, went to the telerik menu and chose convert to kendo.
I then ran the project again and went to the login page and clicked on the username textbox.
This time:
Unhandled exception at line 1234, column 5 in /Scripts/jquery.validate.js0x800a138f Microsoft JScript runtime error: Unable to get value of the property 'call': object is null or undefined
Very easy to reproduce, very hard to understand what's going on.
Please help ... Ed
I created a new mvc 4 web application project. I then compiled and ran the project.
Then I went to the logon page and clicked on the username textbox. All is well.
I then stopped the project, went to the telerik menu and chose convert to kendo.
I then ran the project again and went to the login page and clicked on the username textbox.
This time:
Unhandled exception at line 1234, column 5 in /Scripts/jquery.validate.js0x800a138f Microsoft JScript runtime error: Unable to get value of the property 'call': object is null or undefined
Very easy to reproduce, very hard to understand what's going on.
Please help ... Ed
Randy Hompesch
Top achievements
Rank 1
Rank 1
answered
on
08 Jul 2013
7 answers
2.3K+ views
Site had a popup window which was an iframe to a partner page.
That partner page has a "close" link which closes the popup window.
I instead loaded the url into a kendo window (clearly, looks way better)...but now the close doesn't work.
Is there some way to hook into it such that it'll close the kendo window?
**NOTE**
I do not have the ability to change the content in the iframe
That partner page has a "close" link which closes the popup window.
I instead loaded the url into a kendo window (clearly, looks way better)...but now the close doesn't work.
Is there some way to hook into it such that it'll close the kendo window?
**NOTE**
I do not have the ability to change the content in the iframe
Dimo
Telerik team
answered
on
08 Jul 2013
3 answers
153 views
kendo ui grid in editable mode can't validate the input value when I cut the value from the textbox and then paste it into the textbox again,and I find the demo for it has the same problem,so I think my code is OK, it's a bug,who can help me to fix it???
Kiril Nikolov
Telerik team
answered
on
08 Jul 2013
1 answer
445 views
I have a treeview with databound to remote data from database. What I need is to set the image (icon) for the leaf nodes. The leaf nodes are of two different types; based on their type I need to set the icon before the text of the leaf node. I can easily set the image for parent nodes by setting the css for ".k-treeview .k-plus" and ".k-treeview .k-minus", but I do not know how to do it for leaf nodes based on their type. I do not see any example of how to do that in the treeview demo either. It has one section that shows how to set the leaf node image, but the tree nodes are hard coded in the view with their image url hardcoded. I need something that has remote data binding and the treeview created dynamically. Any information on that will be highly appreciated. Thanks.
Iliana Dyankova
Telerik team
answered
on
08 Jul 2013
