or
10 answers
200 views
Hi guys,
I developing a website using tile effect to achieve a kinda of win8-like style.
I followed the example on kendo effect page and my tiles works pretty well on chrome..
the issue is that on other browser, when the tile slides to show its "back", the front is still visible...
I checked my code with the one from kendo and it seems the same...
this is my generalized javascript function to append a new tile
while this is my css
and this is the effect
I attached an image to show this behavior.
Thanks to all
I developing a website using tile effect to achieve a kinda of win8-like style.
I followed the example on kendo effect page and my tiles works pretty well on chrome..
the issue is that on other browser, when the tile slides to show its "back", the front is still visible...
I checked my code with the one from kendo and it seems the same...
this is my generalized javascript function to append a new tile
var rawDiv = $("<div>").append( $("<div>").attr("id", idDiv).addClass("boxSlider " + other class).append ( $("<span>").addClass("cover"), $("<span>").addClass("description") ) ) return rawDiv.html();.boxSlider { display: inline-table; margin: 5px; overflow: hidden; position: relative;} .boxSlider .cover { width: 100%; height: 100%; line-height: 100px; position: absolute; text-align: center; display: block; color: #fff; font-weight: bold; font-size: 18px; } .boxSlider .cover .bsFooter { width: 100%; font-size: 14px; line-height: 15px; bottom: 10px; margin: 0; position: absolute; text-transform: uppercase; font-weight: normal; } .boxSlider .description { display: none; width: 100%; height: 100%; position: absolute; font-size: 12px; color: #fff; overflow-y: auto; } .boxSlider .description span { display: block; } .boxSlider .description p { margin-left: 10px; max-width: 280px; min-width: 240px; float: left; }BoxSliderAnimation: function () { $(".boxSlider").hover( function (e) { var div = $(e.currentTarget); kendo.fx(div.find(".description").css("display", "block")).tile("left", div.find(".cover")).play(); }, function (e) { var div = $(e.currentTarget); kendo.fx(div.find(".description")).tile("left", div.find(".cover")).reverse(); }); },Thanks to all
Gaetano
Top achievements
Rank 1
Rank 1
answered
on
08 Feb 2013
2 answers
146 views
I have noticed a strange (and frustrating) behavior with the NumericTextBox when used to edit rows in a modal window. When clicking inside it, the focus alternates between the textbox and the modal window. With each click, the cursor looks like it remains inside the box, but you can see the highlighting around the edges of the modal showing it's focus turning on and off. The frustrating result is that if it happens to be focused on the modal when you hit the back button trying to erase text, you navigate back in the browser. I have repeated this problem in both Chrome 24 and IE 10. However, it does not appear to occur without the modal being used.
Any idea on how I can fix this?
Thanks!
Any idea on how I can fix this?
Thanks!
Georgi Krustev
Telerik team
answered
on
08 Feb 2013
1 answer
82 views
[{"CompanyId":20,"CompanyName":"Walmart","CompanyContacts":[{"CompanyId":20,"FirstName":"Bob","LastName":"Green","Email":"bob@test.com"
,"Phone":"1234567","IsActive":false}]}]
This isn't doing it for me
schema: {
model: {
id:"CompanyId",
fields: {
CompanyContactId: { type: "number", editable: false, nullable: false },
FirstName: { type: "string", validation: { required: true } },
LastName: { type: "string", validation: { required: true } },
Email: { type: "string", validation: { required: true } },
Phone: { type: "string", validation: { required: true } },
IsActive: { type: "boolean" },
}
}
}
,"Phone":"1234567","IsActive":false}]}]
This isn't doing it for me
schema: {
model: {
id:"CompanyId",
fields: {
CompanyContactId: { type: "number", editable: false, nullable: false },
FirstName: { type: "string", validation: { required: true } },
LastName: { type: "string", validation: { required: true } },
Email: { type: "string", validation: { required: true } },
Phone: { type: "string", validation: { required: true } },
IsActive: { type: "boolean" },
}
}
}
Alexander Valchev
Telerik team
answered
on
08 Feb 2013
2 answers
100 views
Hi guys,
I've had numerous discussions with the folks at Telerik, and even though I really do love the look and feel of kendo UI, I have some serious concerns with the usability of the framework, and how it forces us into things we shouldn't be doing.
I just opened a ticket with them again to bring up the topic again, but would like to post it here as well, just to see what the community thinks about this: maybe you guys have solutions? Or maybe you feel that Telerik should try and reconsider some of their decisions?
Please post to this topic - I'd be very happy to read what others think about my concerns.
This is a copy of the ticket:
---
... I'm still convinced that you have something seriously wrong in your framework.
I'm trying my best to work with the framework, but some of the choices you made, simply took away functionality of jQuery, especially when it comes to extensibilty and chaining.
Let me give you another example, in an effort so you can understand the types of issues we run into with you.
Screenshot: http://awesomescreenshot.com/06awicub9
What you see here, is how all of our "objects" (parties, domain names, countries, whatever object you can imagine: EVERYTHING is object ;-) ) are being displayed; you'll see that there are tabs at the top.
The tabs being displayed here are coming from meta data (for a party, we want to display his general details, have a tab where we can manage his privileges, relations with external software, balances, notes, technical info, SEO information, and a tab containing audit trail of changes to the object).
All these tabs are initiated through meta data which holds the tab name, and the method to call on the server. This means, that each tab is remotely fetching his data from the server.
So, when I click the "privileges" tab on that page, it actually LOADS the page that he needs to display:
Screenshot: http://awesomescreenshot.com/0c1widi92
As you can see, the HTML being loaded contains other widgets.
Let's see how the combobox is being initialised...
When we send the privileges tab html back to the browser, we're actually only sending the following bit of HTML back to the client:
Now, how does that "magically" change into a kendoCombobox widget?
Well - we want to keep our footprint as low as possible. So, when the page is being loaded, we have one major javascript file which is minimised, and which uses a jQuery pluging called "livequery". You can read more about this plugin at http://docs.jquery.com/Plugins/livequery, but to summarise, it allows us to define how new elements need to be treated when they are created in the dom. By created, you must read: ALL elements that exist in the dom when the code is being called, but also all elements that are being added to the DOM, by an ajax call as in our example for instance, and that fit the criteria.
This is the bit of code that we have in place for a comboboxwidget now:
In short, this tells the livequery plugin to select all items that have the class "fx-widget-relatedobject", and turn it into a kendoUI combobox.
This works like a charm to be honest :-)
Now here is the problem we run into.
Go back to the screenshot at http://awesomescreenshot.com/0c1widi92.
As you will understand from the screenshot: that first combo, we want to listen to the "change" event, so that when that change event is being triggered, we can retrieve the methods for the selected class, and display them at the bottom left part of the screen.
When we used to use jQueryUI for instance, this was really easy. An input element converted into a jQueryUI combobox for instance, would still trigger the change() event of the underlying input element. You - for reasons I still, after so many discussions, do not understand, have chosen not to do this.
The added javascript code that we need for this tab contents, is being sent back together with the HTML, but in stead of doing this:
we needed to find another way to add this to the element.
The major problem I'm having here is that for this particular bit of code, I feel that I should not know that this is an element that will be converted into a kendoui combobox, so I want to avoid the use of
at this point. Unfortunately, you're forcing me into this anyway, so I am breaking my MVC here (this is business logic, and I don't want to need to care about what widget this will finally be converted into...)
Secondly, and this is even more difficult: I do not know - when my added javascript is being executed - whether the input element has already been converted into the kendocombobox. So if my code is being executed before the livequery plugin executes the initialisation of the kendoComboBox,
So, I had to come up with a solution, and I have a very dirty one.
In my livequery plugin, I have added a tiny bit of code to trigger a custom event ("fx_init") (you can see that above). Meaning that whenever an input is converted into a kendoui combobox, this event is being triggered.
My added javascript being returned by the ajax call, has been updated to do this:
What I do here, is listen to the fx_init event which is being triggered by the livequery plugin, and immediately call it myself as well. We need this, as we can not predict whether the livequery code gets executed before this bit of code or vice versa. To ensure we don't execute the code twice, we save a boolean on the element to make sure we evaluate that te event listener already exists...
I'm not saying that your widgets are bad, but I sincerely hope that with this example I can illustrate you once more that even though you might have had your reasons, you're forcing us to increase our codebase, and our footprint, which makes coding a lot more difficult.
Add to the fact that I'm losing my strict MVC pattern (by requiring me to know that this is a kendoComboBox in my business javascript logic...), I feel that your framework may not be what we need.
I've had many discussions on the topic, and unfortunately, most of the time, I have been blocked by you guys. I'm used better from Telerik to be honest, so I hope that this time someone may actually see my point,and understand why it is so important to be compatible with jQuery, and follow the proper jQuery extension / plugin authoring guidelines, because if you don't, you are in fact increasing our codebase, and we really want to avoid this at all times.
I've had numerous discussions with the folks at Telerik, and even though I really do love the look and feel of kendo UI, I have some serious concerns with the usability of the framework, and how it forces us into things we shouldn't be doing.
I just opened a ticket with them again to bring up the topic again, but would like to post it here as well, just to see what the community thinks about this: maybe you guys have solutions? Or maybe you feel that Telerik should try and reconsider some of their decisions?
Please post to this topic - I'd be very happy to read what others think about my concerns.
This is a copy of the ticket:
---
... I'm still convinced that you have something seriously wrong in your framework.
I'm trying my best to work with the framework, but some of the choices you made, simply took away functionality of jQuery, especially when it comes to extensibilty and chaining.
Let me give you another example, in an effort so you can understand the types of issues we run into with you.
Screenshot: http://awesomescreenshot.com/06awicub9
What you see here, is how all of our "objects" (parties, domain names, countries, whatever object you can imagine: EVERYTHING is object ;-) ) are being displayed; you'll see that there are tabs at the top.
The tabs being displayed here are coming from meta data (for a party, we want to display his general details, have a tab where we can manage his privileges, relations with external software, balances, notes, technical info, SEO information, and a tab containing audit trail of changes to the object).
All these tabs are initiated through meta data which holds the tab name, and the method to call on the server. This means, that each tab is remotely fetching his data from the server.
So, when I click the "privileges" tab on that page, it actually LOADS the page that he needs to display:
Screenshot: http://awesomescreenshot.com/0c1widi92
As you can see, the HTML being loaded contains other widgets.
Let's see how the combobox is being initialised...
When we send the privileges tab html back to the browser, we're actually only sending the following bit of HTML back to the client:
<inputclass="fx-wg-relatedobject" name="privileges_class"
id="privileges_class" data-relatedclass="metaClassConfig" data-childclass="metaClassConfig" data-textfield="l" data-valuefield="v" style="width: 300px;" value="" data-translatedvalue="" />Now, how does that "magically" change into a kendoCombobox widget?
Well - we want to keep our footprint as low as possible. So, when the page is being loaded, we have one major javascript file which is minimised, and which uses a jQuery pluging called "livequery". You can read more about this plugin at http://docs.jquery.com/Plugins/livequery, but to summarise, it allows us to define how new elements need to be treated when they are created in the dom. By created, you must read: ALL elements that exist in the dom when the code is being called, but also all elements that are being added to the DOM, by an ajax call as in our example for instance, and that fit the criteria.
This is the bit of code that we have in place for a comboboxwidget now:
$('.fx-wg-relatedobject').livequery(function() { $(this) .removeClass('fx-wg-relatedobject') .kendoComboBox({ autoBind: false, dataSource: { type: "json", serverFiltering: true, transport: { read: { url: $(this).attr("data-json-url") , dataType: "json" } } }, dataTextField: $(this).attr("data-textfield"), dataValueField: $(this).attr("data-valuefield"), filter: "contains", text: $(this).attr("data-translatedvalue"), value: $(this).val() }) .trigger('fx_init'); });In short, this tells the livequery plugin to select all items that have the class "fx-widget-relatedobject", and turn it into a kendoUI combobox.
This works like a charm to be honest :-)
Now here is the problem we run into.
Go back to the screenshot at http://awesomescreenshot.com/0c1widi92.
As you will understand from the screenshot: that first combo, we want to listen to the "change" event, so that when that change event is being triggered, we can retrieve the methods for the selected class, and display them at the bottom left part of the screen.
When we used to use jQueryUI for instance, this was really easy. An input element converted into a jQueryUI combobox for instance, would still trigger the change() event of the underlying input element. You - for reasons I still, after so many discussions, do not understand, have chosen not to do this.
The added javascript code that we need for this tab contents, is being sent back together with the HTML, but in stead of doing this:
$("#privileges_class").change(function(e) { // code here to trigger ajax and fetch methds for the selected class...});we needed to find another way to add this to the element.
The major problem I'm having here is that for this particular bit of code, I feel that I should not know that this is an element that will be converted into a kendoui combobox, so I want to avoid the use of
$("#privileges_class").data("kendoComboBox");Secondly, and this is even more difficult: I do not know - when my added javascript is being executed - whether the input element has already been converted into the kendocombobox. So if my code is being executed before the livequery plugin executes the initialisation of the kendoComboBox,
$("#privileges_class").data("kendoComboBox"); will in fact return undefined.
So, I had to come up with a solution, and I have a very dirty one.
In my livequery plugin, I have added a tiny bit of code to trigger a custom event ("fx_init") (you can see that above). Meaning that whenever an input is converted into a kendoui combobox, this event is being triggered.
My added javascript being returned by the ajax call, has been updated to do this:
$('#').bind("fx_init", function(e) { if($(this).data("kendoComboBox") && !$(this).data("custom_event_handler_added")) { // The element has been converted into a kendoComboBox, and we have not yet added the custom event handler, so let's do it now... // first let's make sure this bit of code is not being called twice... $(this).data("custom_event_handler_added", true); // secondly let's add the event listener and bind it to the change event.. var classCombo = $(this).data("kendoComboBox"); classCombo.bind("change", function(e) { //code goes here } ); } }).trigger("fx_init");What I do here, is listen to the fx_init event which is being triggered by the livequery plugin, and immediately call it myself as well. We need this, as we can not predict whether the livequery code gets executed before this bit of code or vice versa. To ensure we don't execute the code twice, we save a boolean on the element to make sure we evaluate that te event listener already exists...
I'm not saying that your widgets are bad, but I sincerely hope that with this example I can illustrate you once more that even though you might have had your reasons, you're forcing us to increase our codebase, and our footprint, which makes coding a lot more difficult.
Add to the fact that I'm losing my strict MVC pattern (by requiring me to know that this is a kendoComboBox in my business javascript logic...), I feel that your framework may not be what we need.
I've had many discussions on the topic, and unfortunately, most of the time, I have been blocked by you guys. I'm used better from Telerik to be honest, so I hope that this time someone may actually see my point,and understand why it is so important to be compatible with jQuery, and follow the proper jQuery extension / plugin authoring guidelines, because if you don't, you are in fact increasing our codebase, and we really want to avoid this at all times.
David
Top achievements
Rank 1
Rank 1
answered
on
08 Feb 2013
3 answers
94 views
Hi,
I'm using IE9 in compaitablity mode. and Kendo UI Web v2012.3.1114.
When I use try undo an existing underlined word, I get the following error:
Line: 24588
Error: Unable to get value of the property '1': object is null or undefined
It seems the issue is with the following line in Kendo.web.js:
I'm using IE9 in compaitablity mode. and Kendo UI Web v2012.3.1114.
When I use try undo an existing underlined word, I get the following error:
Line: 24588
Error: Unable to get value of the property '1': object is null or undefined
It seems the issue is with the following line in Kendo.web.js:
<FONT color="#0000ff" size="1" face="Consolas"><FONT color="#0000ff" size="1"face="Consolas"><FONT color="#0000ff" size="1" face="Consolas">var property = trim(match[1].toLowerCase()),<BR> value = trim(match[2]);<BR></FONT></FONT></FONT>This is fixed by checking for != null first, I assume this is a bug?
property = trim(match[1].toLowerCase()),
value = trim(match[2]);
Dimo
Telerik team
answered
on
08 Feb 2013
1 answer
86 views
Hi ,
I have Employee Datasource as below
var obj = [
{
"Id": "1",
"Name": "Ambica",
"addresses": [
{
"City": "Bangalore",
"State": "Karnataka"
},
{
"City": "Mysore",
"State": "Karnataka"
}
]
},
{
"Id": "2",
"Name": "Manu",
"addresses": [
{
"City": "Bangalore",
"State": "Karnataka"
},
{
"City": "Mysore",
"State": "Karnataka"
}
]
}
];
var EmployeeDS = new kendo.data.DataSource({
data: obj
});
here my requirement is get employee record whose name is "Ambica" and city is "bangalore".
so how can i filter my EmployeeDS??
Have written filter as below but its not filtering (Only one level is filtering)
EmployeeDS.filter([{
"logic": "and",
filters: [{ field: "Name", operator: "contains", value: "Ambica" },
{ field: "addresses.City", operator: "equal", value: "Bangalore" }
]
}]);
I have Employee Datasource as below
var obj = [
{
"Id": "1",
"Name": "Ambica",
"addresses": [
{
"City": "Bangalore",
"State": "Karnataka"
},
{
"City": "Mysore",
"State": "Karnataka"
}
]
},
{
"Id": "2",
"Name": "Manu",
"addresses": [
{
"City": "Bangalore",
"State": "Karnataka"
},
{
"City": "Mysore",
"State": "Karnataka"
}
]
}
];
var EmployeeDS = new kendo.data.DataSource({
data: obj
});
here my requirement is get employee record whose name is "Ambica" and city is "bangalore".
so how can i filter my EmployeeDS??
Have written filter as below but its not filtering (Only one level is filtering)
EmployeeDS.filter([{
"logic": "and",
filters: [{ field: "Name", operator: "contains", value: "Ambica" },
{ field: "addresses.City", operator: "equal", value: "Bangalore" }
]
}]);
Rosen
Telerik team
answered
on
08 Feb 2013
3 answers
261 views
I'm having issues trying to get require up and running with Kendo mobile. My setup looks like so
in my default.html
in my main.js
have tried different ways to load these scripts and I still keep getting Uncaught TypeError: Cannot read property 'mobile' of undefined
Edit: One thing I find odd is that I can go to the console on Chrome and drill down to kendo.mobile.Application just fine, as you can see in the page.png file I uploaded.
in my default.html
<script type="text/javascript" data-main="Scripts/main.js" src="Scripts/libs/require.js"></script>in my main.js
(function(){ requirejs.config( { baseUrl: 'Scripts/libs', paths: { plugins: '../app' } } ); // Start main app logic requirejs(['jquery-1.9.0.min', 'kendo.mobile.min'], function($,kendo){ var app = new kendo.mobile.Application(document.body, { platform: 'ios' }); });})();have tried different ways to load these scripts and I still keep getting Uncaught TypeError: Cannot read property 'mobile' of undefined
Edit: One thing I find odd is that I can go to the console on Chrome and drill down to kendo.mobile.Application just fine, as you can see in the page.png file I uploaded.
Atanas Korchev
Telerik team
answered
on
08 Feb 2013
3 answers
235 views
Hi Telerik,
I'm having a really hard time trying to figure out what icons are available in Kendo UI Mobile. I was able to get a list of class names by looking through the unminified stylesheet, but I noticed a lot of hex values were missing.
Attached is a screenshot I put together of a reference page, as you can see there are a lot of character codes without matching class names.
My question is can I create custom classes to enable the use of these unassigned character codes? Is there a chance of the font driving these images changing during an upgrade, or will new entries only be added to the font file?
Thanks,
Adam
I'm having a really hard time trying to figure out what icons are available in Kendo UI Mobile. I was able to get a list of class names by looking through the unminified stylesheet, but I noticed a lot of hex values were missing.
Attached is a screenshot I put together of a reference page, as you can see there are a lot of character codes without matching class names.
My question is can I create custom classes to enable the use of these unassigned character codes? Is there a chance of the font driving these images changing during an upgrade, or will new entries only be added to the font file?
Thanks,
Adam
Christopher Lee
Top achievements
Rank 1
Rank 1
answered
on
07 Feb 2013
1 answer
195 views
I've been looking through the APIs to see if there's a documented method for binding the sort functions built into the header easily to a select dropdown? We want to hide the TH elements (using CSS) and only sort using a dropdown. Ideas?
Iliana Dyankova
Telerik team
answered
on
07 Feb 2013
2 answers
431 views
I am having difficulty trying to figure out how to convert our server side grid to ajax grid due to some road blocks. We are upgrading our grid from the older Telerik MVC extensions grid to the new Kendo UI grid and I have run into a couple of issues with converting some conditional statements to be usable within the ClientTemplate. Can anyone assists on the correct way to convert the following line of code to be compatible with ClientTemplate?
I was able to do
To get true or false returned from the method call, but I cannot figure out how to place the result returned into a conditional if-else statement to determine which html should display based on the condition as shown in the original code.
columns.Template(@<text> @if(String.IsNullOrEmpty(Model.DownloadURL(item.DocumentId,item.Name, item.ExtUrl))) { } else { <a href="@Model.DownloadURL(item.DocumentId,item.Name,item.ExtUrl)" title="Click to download"> }</text>).Title("Download")I was able to do
columns.Bound(p=>p.DocumentId).ClientTemplate(String.IsNullOrEmpty(@Model.DownloadURL("#=DocumentId#","#=Name#","#=ExtURL#)).ToString()).Title("Download")
