Questions on Kendo UI for jQuery Forum

1 answer

89 views

Is it possible to pen an url when event is clicked?

Dear All;
I want to route my users to an url contains more detail related to my clicked event. I think we cannot set it when we configure the event. Is there anyway to solve it?

Scheduler

answered on 24 Dec 2014

1 answer

920 views

[Solved] show/hide optionalLable on run time

Hi,

How can i enable/disable the optional label according to changes that occurs in the view model?

my dropDownList looks like this:

<input id="children" data-bind="kendoDropDownList: { optionLabel: optionLabel, dataTextField: 'text', dataValueField: 'value', data: children, value: selectedChild, change: onChangeChild }" />

the optionLabel is bound to observable objects that contains an empty string- which means null, or to other string.
but the kendoDropDownList doesn't change when this value changes in the model.

is there any option to sent an observable value for the optionLabel?

thanks!

DropDownList

answered on 24 Dec 2014

1 answer

726 views

How can the user select transparent color with kendo color picker?

Hi kendo Team:
Is there any way to tell kendo color picker that the color I want to select is transparent color? I've tried to set 'transparent' or clear the input box, but it doesn't work.

Kind regards,
Oscar.

ColorPicker

answered on 24 Dec 2014

4 answers

189 views

Grid Bound to Remote XML w/ Server Paging/Sorting/Filtering

We're looking to convert our existing grids to KendoUI grids and I'm working on a proof of concept example. We need to be able to support grids that have data provided by a function that returns XML, and that have server side paging, sorting and filtering. I've already got the code up and running to create the grid using the XML returned from my function, but I'm having some trouble locating resources on how to set up the server paging/sorting/filtering.

Here's my grid setup code:

01.var xmlDataRemote = new kendo.data.DataSource({

02. serverPaging: true,

03. serverFiltering: true,

04. serverSorting: true,

05. pageSize: 20,

06. transport: {

07. read: { url: "/Controller.cfc?method=getData }

08. },

09. schema: {

10. type: "xml",

11. data: "/Items/Item",

12. total: ???,

13. model: {

14. id: "ID",

15. fields: {

16. Name: "Name/text()",

17. Status: "Status/text()",

18. Type: "Type/text()"

19. }

20. }

21. }

22. });

23.

24. $("#grid").kendoGrid({

25. dataSource: xmlDataRemote,

26. pageable: true,

27. columns: [

28. { title: "Name", field: "Name" },

29. { title: "Status", field: "Status" },

30. { title: "Type", field: "Type" }

31. ]

32. });

Here's some example XML:

<Items>

<Item>

<ID>1</ID>

<Name>First Item Name</Name>

<Status>Active</Status>

<Type>Online</Type>

</Item>

<Item>

<ID>2</ID>

<Name>Second Item Name</Name>

<Status>Inactive</Status>

<Type>External</Type>

</Item>

<TotalRows>22</TotalRows>

</Items>

As I mentioned, we already use another library for grids that support server-side paging/filtering/sorting, and our backend is Coldfusion. Here's an example of an existing function to get XML data for a grid:

001.<cffunction name="getData" access="remote" returnType="xml" output="true">

002. <cfargument name="pagenum" required="no" type="numeric" default=0 />

003. <cfargument name="pagesize" required="no" type="numeric" default=20 />

004. <cfargument name="sortdatafield" required="no" type="string" default =""/>

005. <cfargument name="sortorder" required="no" type="string" default ="asc" />

006. <cfargument name="filterscount" required="no" type="numeric" default ="0" />

007.

008. 

009. <cfset start = (((ARGUMENTS.PageNum + 1) * ARGUMENTS.PageSize) - ARGUMENTS.PageSize + 1)/>

010. <cfset end = (ARGUMENTS.PageNum + 1) * ARGUMENTS.PageSize/>

011.

012. <cfquery datasource="#APPLICATION.DSN#" name="get_items">

013. WITH items AS (

014. SELECT TOP 100 PERCENT row_number() OVER (

015. ORDER BY

016. <cfswitch expression="#ARGUMENTS.sortdatafield#">

017. <cfcase value="Name">Name #ARGUMENTS.sortorder#</cfcase>

018. <cfcase value="Status">Status #ARGUMENTS.sortorder#</cfcase>

019. <cfcase value="Type">Type #ARGUMENTS.sortorder#</cfcase>

020. <cfdefaultcase>Name ASC</cfdefaultcase>

021. </cfswitch>

022. ) as row,

023. count(*) over() as 'Total_Rows',

024. Name, Status, Type

025. FROM

026. (SELECT I.Name, I.Status, I.Type

027. FROM tbl_items as I

028. WHERE Account_ID = 1234

029. 

030. <cfif ARGUMENTS.filterscount GT 0>

031. <cfloop from='1' to='#ARGUMENTS.filterscount#' index="filterIndex">

032. <cfset filterDataField = ARGUMENTS['filterdatafield' & (filterIndex - 1)] />

033. <cfset filterCondition = ARGUMENTS['filtercondition' & (filterIndex - 1)] />

034. <cfset filterValue = ARGUMENTS['filtervalue' & (filterIndex - 1)] />

035.

036. <cfif ARGUMENTS['filterdatafield' & (filterIndex - 2)] NEQ filterDataField or filterIndex EQ 1>

037. AND (

038. <cfelse>

039. <cfif ARGUMENTS['filteroperator' & (filterIndex -1)] EQ 0> AND <cfelse> OR </cfif>

040. </cfif>

041.

042. <cfswitch expression="#filterDataField#">

043. <cfcase value="Name">I.Name</cfcase>

044. </cfswitch>

045.

046. <cfswitch expression="#filterCondition#">

047. <cfcase value="CONTAINS"> LIKE <cfqueryparam value="%#filterValue#%" /></cfcase>

048. <cfcase value="CONTAINS_CASE_SENSITIVE"> COLLATE Latin1_General_CS_AS LIKE <cfqueryparam value="%#filterValue#%" /></cfcase>

049. <cfcase value="DOES_NOT_CONTAIN"> NOT LIKE <cfqueryparam value="%#filterValue#%" /></cfcase>

050. <cfcase value="DOES_NOT_CONTAIN_CASE_SENSITIVE"> COLLATE Latin1_General_CS_AS NOT LIKE <cfqueryparam value="%#filterValue#%" /></cfcase>

051. <cfcase value="EQUAL"> = <cfqueryparam value="#filterValue#" /></cfcase>

052. <cfcase value="EQUAL_CASE_SENSITIVE"> COLLATE Latin1_General_CS_AS = <cfqueryparam value="#filterValue#" /></cfcase>

053. <cfcase value="NOT_EQUAL"> <> <cfqueryparam value="#filterValue#" /></cfcase>

054. <cfcase value="GREATER_THAN"> > <cfqueryparam value="#filterValue#" /></cfcase>

055. <cfcase value="LESS_THAN"> < <cfqueryparam value="#filterValue#" /></cfcase>

056. <cfcase value="GREATER_THAN_OR_EQUAL"> >= <cfqueryparam value="#filterValue#" /></cfcase>

057. <cfcase value="LESS_THAN_OR_EQUAL"> <= <cfqueryparam value="#filterValue#" /></cfcase>

058. <cfcase value="STARTS_WITH"> LIKE <cfqueryparam value="#filterValue#%" /></cfcase>

059. <cfcase value="STARTS_WITH_CASE_SENSITIVE"> COLLATE Latin1_General_CS_AS LIKE <cfqueryparam value="#filterValue#%" /></cfcase>

060. <cfcase value="ENDS_WITH"> LIKE <cfqueryparam value="%#filterValue#" /></cfcase>

061. <cfcase value="ENDS_WITH_CASE_SENSITIVE"> COLLATE Latin1_General_CS_AS LIKE <cfqueryparam value="%#filterValue#" /></cfcase>

062. <cfcase value="NULL"> IS NULL </cfcase>

063. <cfcase value="NOT_NULL"> IS NOT NULL </cfcase>

064. <cfcase value="EMPTY"> = '' </cfcase>

065. <cfcase value="NOT_EMPTY"> <> '' </cfcase>

066. </cfswitch>

067.

068. <cfif ARGUMENTS['filterdatafield' & (filterIndex)] NEQ filterDataField or filterIndex EQ ARGUMENTS.filterscount>

069. )

070. </cfif>

071. </cfloop>

072. </cfif>) as innerselect

073. 

074. ORDER BY

075. <cfswitch expression="#ARGUMENTS.sortdatafield#">

076. <cfcase value="Name">Name #ARGUMENTS.sortorder#</cfcase>

077. <cfcase value="Status">Status #ARGUMENTS.sortorder#</cfcase>

078. <cfcase value="Type">Type #ARGUMENTS.sortorder#</cfcase>

079. <cfdefaultcase>Name ASC</cfdefaultcase>

080. </cfswitch>

081. )

082. 

083. SELECT *

084. FROM items

085. WHERE row BETWEEN <cfqueryparam cfsqltype="cf_sql_integer" value="#start#" /> AND <cfqueryparam cfsqltype="cf_sql_integer" value="#end#" />

086. ORDER BY row ASC

087. </cfquery>

088.

089. <cfxml variable="return">

090. <cfif get_items.RecordCount EQ 0>

091. <Items>

092. <Item />

093. <TotalRows>0</TotalRows>

094. </Items>

095. <cfelse>

096. <Items>

097. <cfoutput query="get_items">

098. <Item>

099. <ID>#get_items.ID#</ID>

100. <Name>#get_items.Name#</Name>

101. <Status>get_items.Status)#</Status>

102. <Type>#get_items.Type#</Type>

103. </Item>

104. </cfoutput>

105. <TotalRows>#Total_Rows#</TotalRows>

106. </Items>

107. </cfif>

108. </cfxml>

109.

110. <cfreturn return />

111.</cffunction>

As you can see, we pass in 5 arguments which control the page number, page size, which column/field to sort and in what order, and filter information.

For the Kendo grid, I know I need to set the total for the datasource schema, but I'm not sure how to get that value out of my XML. I'm also not sure what information I need to pass into my function that will tell it which page to get next or how to sort/filter the data. I appreciate any help you can provide.

Grid

answered on 24 Dec 2014

1 answer

51 views

low performance in IE10 related to Kendo CSS

We have noticed low performance in IE10 related to the kendo css file (i.e. IE hangs for about 10 seconds). Please advise on how to resolve this issue.

Thanks!

General Discussions

answered on 24 Dec 2014

9 answers

516 views

Sample .NET Webservice for Async

Does anyone have a sample for writing the Async handlers for the upload control using webservices in .net?

I'll be your best friend.

Upload

answered on 23 Dec 2014

1 answer

131 views

Spinning wheel on iOS 8.1 devices

Hi there;

I have the following view:

<div data-role="view" data-title="Skunkworks" data-model="Calculator">

<input style="width:9em;font-size:.9em" data-align="right" id="cboNavGradeSpec2" data-role="dropdownlist" data-bind="source:data, value:currentGradeSpec" data-text-field="gradespecname" data-value-field="gradespec"/>

<ul data-role="listview" data-bind="source: data" data-template="template"></ul>

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

#=gradespecname#

</script>

</div>

This works fine in the simulator and on my physical Android devices. When I run it on a physical iOS device running 8.1, though, all I get is the spinning wheel. The widgets never populate with data. Any ideas where I should look?

Thanks,
Jason

Data Source

answered on 23 Dec 2014

4 answers

173 views

Today Hour Lines Not Showing Up in Scheduler Inside TabStrip

Hello,

I have a scheduler instantiated inside a bootstrap column, nested inside a kendo tabstrip container. Everything looks good, except that only today's view does not show any lines for the day. Also, when I switch to the week view, every day but today is showing up with the correct tr borders.

I tried using the refresh code, including adding a delay to refresh after the tab is activated; but no luck. Here is my code:

var loadAppointments = function()

{

$("#schedule-appointments-scheduler").kendoScheduler();

}

var loadContent = function()

{

var vm = ViewModelManager.getViewModel();

loadAppointments();

$("#schedule-main-content-container").kendoTabStrip({

animation: {

open: {

effects: "fadeIn"

}

},

activate: function(e)

{

var scheduler = $("#schedule-appointments-scheduler").data("kendoScheduler");

_.delay(function() {

//scheduler.view(scheduler.view().name);

scheduler.refresh();

}, 200);

}

});

}

The first Screenshot is today's date, and the second is tomorrow. Any help would be greatly appreciated.

Regards,
Matt

Scheduler

answered on 23 Dec 2014

1 answer

271 views

Hide top toolbar

I'd like to hide the top toolbar that allows you to create, rotate, and undo but keep my shape toolbar. See attached for details.

Thanks,
Rich

Diagram

answered on 23 Dec 2014

1 answer

357 views

Creating Custom Column Filter in MVC without AJAX Request

I would like to create a custom column filter and specify the values in my view. All of the examples I have found make reference to a javascript function, which then calls backs to the controller. Rather than calling back to the controller, I would like to pass those values directly into the view. Perhaps there is a simple way of doing this, but I have not found it. Ideally, if I could just define in my view a dropdown box which would be used as the filter, that would be perfect, but that does not seem possible.

It seems that Kendo.Mvc.UI.Fluent.GridBoundColumnFilterableBuilder.UI(System.Func<System.Object,System.Object>) would be the best way to achieve this...

Do you have any examples of this in use? I don't understand how the javascript function specifies the id of the column filter to modify.

It seems I could pass in a JavaScript function (although ideally I would be able to do this in razor), which would create a kendo drop down box to use as a filter.

Thanks in advance!

Grid

answered on 23 Dec 2014