Questions on Kendo UI for jQuery Forum

1 answer

126 views

Is it possible to make html.listboxfor dragable?

Hi there,

I have two html.listboxfor, and need to swap data between them. Is there any way to make them draggable so that the user can drag and drop items in these two lists. Any help is much appreciated. Thanks.

Drag and Drop

answered on 08 May 2014

1 answer

91 views

The culture of "ja-JP" can't display AM and PM

Hello,

When I change the culture to "ja-JP" ( kendo.culture("ja-JP") ),
its AM and PM didn't be shown. (The first image. )

But I think that it works well with others. (The second image)

Does this a bug or any configure I need to set?

Thanks for your help,
Ming

Scheduler

answered on 08 May 2014

2 answers

103 views

Grid can't work well with sortable?

Check out the example: http://jsbin.com/yagihuwe/1/edit

When the following code was commented:

$('#grid tbody').kendoSortable({

axis:"y",

change : function(e){

var data = $('#grid').data('kendoGrid').dataItem(e.item);

}

});

Change the selection of the grid row, then the name at grid bottom will be updated automatically, but when we enable the above code, and select different rows, the name just don't change. It seemed that the event was stopped by sortable widget. Any suggestions?

Grid

answered on 08 May 2014

1 answer

77 views

kendo mobile grid - column template

Hello,

here's what I am trying to achieve:

I have a mobile web app using a kendo grid on a page.
One of the columns has a template something like : "<a href='##' onclick='someViewmodel.rowClicked(#:someValue#);'''

When the hyperlink is clicked the app is supposed to navigate to a specific mobile view. Instead of doing this it navigates to the home page.
Normally when I trigger anything from a mobile grid I have to do an e.preventDefault() in order to stop unwanted behaviour and then everything works as expected.

In this case however I cannot do that as I do not have the event. If I try to use an mvvm binding inside the template, it does not work as it looks the mvvm bindings happen before the template is rendered. So if I try to do an data-bind="click: run" then it is completely ignored.

how can I stop the default grid behaviour so that the app navigates to the right place ?

Fiddle Example

General Discussions

answered on 08 May 2014

10 answers

1.0K+ views

Using jQuery in Kendo Templates

I am trying to use a Masked Input in a Kendo Template. Can I do so, or do I need it outside of the template? How do I do this? Thanks.

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

<div class="k-edit-label">

<label for="EmpID">Employee ID</label>

</div>

<input type="text" name="EmployeeID" data-type="number" data-bind="value:EmpID" data-role="numerictextbox" />

<div class="k-edit-label">

<label for="FirstName">First Name</label>

</div>

<input type="text" class="k-input k-textbox" name="FirstName" data-bind="value:FirstName">

<div class="k-edit-label">

<label for="LastName">Last Name</label>

</div>

<input type="text" class="k-input k-textbox" name="LastName" data-bind="value:LastName">

<div class="k-edit-label">

<label for="DOB">DOB</label>

</div>

<input type="text"

name="DOB"

data-type="date"

data-bind="value:DOB"

data-role="datepicker" />

<div class="k-edit-label">

<label for="Phone">Phone</label>

</div>

<input type="text" class="k-input k-textbox" name="Phone" data-bind="value:Phone">

</input>

#<script type="text/javascript">#

# jQuery(function () {#

# $("#Phone").mask("(999) 999-9999");#

});

#<\/script>#

<div class="k-edit-label">

<label for="LocationPicker">Locations</label>

</div>

<input name="LocationPicker"

data-bind="value:LocID"

data-value-field="Value"

data-text-field="LocID"

data-source="filteredLocationDataSource"

data-role="dropdownlist" />

<!--textarea id="editor" rows="10" cols="30" data-bind="value:Comments"></textarea>

<input type="text" name="Comments" data-bind="value:Comments" />-->

<div class="k-edit-label">

<label for="Modified">Modified</label>

</div>

<input type="text"

name="Modified"

data-type="date"

data-bind="value:Modified"

data-role="datepicker" />

<div class="k-edit-label">

<label for="ModifiedBy">Modified By</label>

</div>

<input type="text" name="ModifiedBy" data-type="number" data-bind="value:ModifiedBy" data-role="numerictextbox" />

</script>

Templates

answered on 08 May 2014

1 answer

291 views

Satellite Layer (BING)

Hi,
I would like to know if it is possible to switch the bing layer in the kendoMap control to display the
satellite Images of bing.
If it is possible then how can I do it ?

Markus

Map

answered on 08 May 2014

12 answers

1.2K+ views

Object doesn't support property or method 'kendoGrid'

Tried to implement the same in ASP.NET MVC 4 Application .
Followed all steps but it keeps throwing an error "Object doesn't support property or method 'kendoGrid'". Infact even a DatePicker doesnt work.

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/ajax-binding

This is what I have included in the site.Master. The

<link href="/Content/KendoUI/kendo.common.min.css" rel="stylesheet" />
<link href="/Content/KendoUI/kendo.default.min.css" rel="stylesheet" />
<script src="/Scripts/KendoUI/jquery.min.js"></script>
<script src="/Scripts/KendoUI/kendo.web.min.js"></script>
<script src="/Scripts/KendoUI/kendo.aspnetmvc.min.js"></script>

and included the following n index.aspx
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<%: Html.Kendo().Grid<KendoUISamples.DataProviders.Product>()
.Name("grid")
.DataSource(dataSource => dataSource // Configure the grid data source
.Ajax() // Specify that ajax binding is used
.Read(read => read.Action("ProductsRead", "Home")) // Set the action method which will return the data in JSON format
)
.Columns(columns =>
{
// Create a column bound to the ProductID property
columns.Bound(product => product.ProductID);
// Create a column bound to the ProductName property
columns.Bound(product => product.ProductName);
// Create a column bound to the UnitsInStock property
columns.Bound(product => product.UnitsInStock);
})
%>
</asp:Content>

Contents of BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));

// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));

I have wasted close to a week. Please let me know what are the basic js / css files we need to include.

Grid

answered on 08 May 2014

1 answer

121 views

Add new record give error

i have drop down list in grid popup editor. It works ok for update. But when i click on Add new record it gives me error "TypeError:language is null. Error is returned due to template applied in Grid Columns to show value in grid. I want to use condition some thing like tha

columns: [

{ field: "contactId",title: "ContactId", hidden: true },

{ field: "businessName", title: "Business Name", width: 200 },

{ field: "firstName", title: "Contact Title", width: 200 },

{ field: "lastName", title: "Last Name", hidden: true },

{ field: "language", title: "Language", width: 100, editor: langDropDownEditor,template: "#if(language!=null){=language.value}#"},

{ field: "country", title: "Country", width: "100px", editor: countryDropDownEditor },

{ field: "address", title: "Address", hidden: true },

{ field: "city", title: "City", width: 100 },

{ field: "gsm", title:"GSM",hidden: true },

{ field: "email",title:"Email", hidden: true },

{ field: "isActive",title:"Active", hidden: true },

{ command: ["edit", "destroy"], title: " ", width: "160px" },

],

t
But it gives me error.
Please help me to solve this issue

Grid

answered on 08 May 2014

2 answers

153 views

Data attribute initialization

I'd like to set the following Grid property via data attribute initialization.

http://docs.telerik.com/kendo-ui/api/web/grid#configuration-pageable.messages.display

So I've added the following attribute but it doesn't seem to work.

data-pageable="messages: { display: 'Showing {0}-{1} of {2} leads' }"

Is it possible to set this property via attributes?

Grid

answered on 07 May 2014

2 answers

3.8K+ views

Grid ClientsideTemplate multiple conditions (if else if...)

Hi, can someone show me the proper syntax for multiple if else-if, else statement inside the ClientsideTemplate of the Kendo Grid?

This is a snippet from where my code is breaking (I think....)

columns.Bound(d => d.FileExtension).ClientsideTemplate(

"# if (FileExtension == true) { #" +
"<img src='pdf.png' alt='' />" +
"# } else if (FileExtension == '.docx') { #" +
"<img src='word.png' alt='' />" +
"# } else { #" +
"<div> </div>" +
"# } #"
)

The code breaks and getting errors on kendo.all.min.js file. So, I'm not even really sure if my syntax is correct to begin with... =) Thanks very much and I look forward to the response.

Romel

Grid

answered on 07 May 2014