Questions on Kendo UI for jQuery Forum

3 answers

291 views

how to use cache inmemory and server filtering

hello,
i'm using cache inmemory and i want to customise server filtering, so taht i will populate grid with remote data on specific number of page.
for example on each 10 page.

Grid

answered on 20 Mar 2014

1 answer

253 views

Programmatically update days to display in MultiDayView

I currently have the following extended MutliDayView I'm using to hide/show days of the week. The days to show are selected from checkboxes on the page.

var customView = kendo.ui.MultiDayView.extend({

name: "customview",

calculateDateRange: function () {

var startDate = this.options.date;

var date = startDate.getDate();

var day = startDate.getDay();

var weekStart = new Date(startDate.setDate(date - day));

var weekDate = weekStart.getDate();

// Array to hold the dates that are displayed

var dates = new Array();

// Array to hold all the days of the week

var weekDays = new Array();

for (var i = 0; i < 7; i++)

{

weekDays[i] = new Date(weekStart.setDate(weekDate + i));

}

// Get Selected Days to show from checkboxes

var checkboxes = document.getElementsByName('weekday');

for (var i = 0; i < checkboxes.length; i++)

{

// Only add days checked

if (checkboxes[i].checked)

{

// DOW

var dayNumber = parseInt(checkboxes[i].value);

dates.push(weekDays[dayNumber]);

}

this._render(dates);

}

});

I have subscribed to the onClick event for checkboxes. I want to add or remove dates from the view. Here is the code

function weekDayClick(cb)

{

// Get current view

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

var currentView = scheduler.view();

// If the current view is not "My View", we can just return

if (currentView.title.toLowerCase() != "my view")

return;

// Is My View. If Checked, need to add to view; otherwise remove

var dates = currentView._dates;

var newDates = new Array();

var dow = parseInt(cb.value);

if (cb.checked)

{

// TODO: Add selected day to dates

} else

{

// Remove date from view

for (var i = 0; i < dates.length; i++)

{

if (dates[i].getDay() != dow)

newDates.push(dates[i]);

}

// Render view

currentView.render(newDates);

scheduler.view(scheduler.view(customView));

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

}

However, I cannot get this to work. The only way I can get it to work is change the view from my custom view to another one, make the checkbox changes and then select the custom view again. I have to comment out the event code when using this workaround.

Any suggestions?

Scheduler

answered on 20 Mar 2014

1 answer

1.1K+ views

How to access "DATA-" attributes in a option after converting select to a dropdownlist

How do I access "DATA-" attributes in a option after converting the select to a kendo dropdownlist?

Here is an example of my select:
<select id='connect-search-results'>
<option data-text='Text-One' data-id='Data-One' data-url='\\One'>One</option>
<option data-text='Text-Two' data-id='Data-Two' data-url='\\Two'>Two</option>
</select>

I was using:
   var $option = $('#connect-search-results option:selected');

   if ($option.length > 0) {
      var id = $option.data('id');
      var url = $option.data('url');
      var text = $option.data('text');
      ...
   }

but now that I've converted the select to a dropdownlist, the jquery calls are failing to return the data.

DropDownList

answered on 20 Mar 2014

1 answer

1.3K+ views

Rebind Dropdown list from sever datasource via javascript

I need to change the available options in a dropdownlist based on what i user has entered into a textbox on the same page. My thought was to attache to the change event on that textbox and rebind/read the kendo dropdown list.

When the page first loads everything works as expected.

When the user changes the MaxSize textbox the rebindRooms function get called and processed completely, but the GetSize function never gets called and the no ajax requests get fired.

How to I force the dropdown to rebind from the server?

.cshtml
textbox



@Html.DisplayFor(m => m.MaxSize)

dropdownlist

@(Html.Kendo().DropDownListFor(m => m.SchedulePreference.DesiredRoomId)

.DataTextField("Value").DataValueField("Key")

.DataSource(ds => ds.Read(read => read.Action("RoomDropDown_Read", "Scheduling")

.Data("GetSize"))

.ServerFiltering(true)

)

.js

<script type="text/javascript">

$(document).ready(function () {

$('#MaxSize').change(rebindRooms);

});

</script>

function rebindRooms(e) {

var el = e.currentTarget.value;

var ddl = $("#SchedulePreference_DesiredRoomId").data("kendoComboBox");

if (ddl && ddl.dataSource) {

ddl.dataSource.read();

}

function GetSize() {

var el = $('#MaxSize');

var s = el ? el.val() : 0;

return {

size: s

}

.cs

[NoCache]

public ActionResult RoomDropDown_Read(int size=0)

{

var list = _uow.RoomRepository.GetAll().OrderBy(o => o.DropDownText).Where(w => w.MaxSize >= size).Select(s=>new KeyValuePair<int,string>(s.Id,s.DropDownText)).ToList();

return Json(list, JsonRequestBehavior.AllowGet);

}

Thanks!
-Logan

DropDownList

answered on 20 Mar 2014

1 answer

118 views

Populating Chart

Hi,

Please can someone help me. I'm trying to populate a bar chart from the code behinddata in a web forms environment. I've serialized the data to json and put into a hidden field. Then trying to set that as the datasource but the report keeps coming up blank. What's wrong?

hdn1.value = JsonArray()    End Sub
    Public Class Sales
        Public Property name As String        Public Property data As String
    End Class
    Protected Function JsonArray() As String
        Dim myArray As String
        Dim obj As New Sales With {.name = "Sales", .data = "8067.96, 8099.93, 9175, 8874, 8478"}
        Dim obj2 As New Sales With {.name = "Costs", .data = "8067.96, 8099.93, 9175, 8874, 8478"}
        Dim objSales As New List(Of Sales)() From {obj, obj2}
        Dim objSerializer As New JavaScriptSerializer()
        myArray = objSerializer.Serialize(objSales)
        Return myArray
    End Function

jQuery(document).ready(function ($) {
            var myTheme = 'blueopal';
            var myds = $('#MainContent_hdn1').val();
            alert(myds);

            $("#chart").kendoChart({
                datasource: {
                        data: myds
                },                series: [{
                    field: "data"
                }],
                                               //seriesDefaults: { type: "verticalBullet" },
                chartArea: {
                    height: 250
                },
                theme: myTheme,
                tooltip: {
                    visible: true,
                    template: "#= series.name #: #= value #"
                }
            });

General Discussions

answered on 20 Mar 2014

2 answers

264 views

MVC dropdownlist inside grid

Hello,

I would like to insert a dropdownlist inside a grid column(not using edit mode) by converting the widget to a client side template. The template works and outputs a simple input, but the script that initializes the dropdown is not ran.

I am obtaining the client side template using this:

var ruleSetDropDown = Html.Kendo().DropDownList()

.Name("RuleSets_#=Id#")

.BindTo(Model.RuleSets)

.DataTextField("Name")

.DataValueField("Id")

.ToHtmlString();

And then apply it to the AJAX bound grid like this:

column.Template(t => t)

.ClientTemplate(ruleSetDropDown.ToString())

.Title("")

If i try to render it inside the toolbar(with a different name of course) it works fine:

.ToolBar(t =>

{

t.Template(ruleSetDropDown);

})

But the same technique seems not to be working with row templates.
How can i achieve this?

Grid

answered on 20 Mar 2014

34 answers

483 views

ios7 issue with keyboard obscuring input field

kendo: kendoui.complete.2013.2.1021.commercial
phone gap: 3.10 also tried with 2.7.0 and got same result

It works well with any ios version before ios 7. With ios7 the keyboard hides the input fields.

After investigation I suspect it is related to the position css attribute of kendo

Attached images showing the correct behavior in ios6 and the wrong one in ios7

General Discussions

answered on 20 Mar 2014

1 answer

402 views

Translating the pager-toolbar of kendo grid (js)

Hi

I'm using both .net and js version of the kendo grid, .net version is translated fine because of the mvc.dll translation file. Is it any easy way to translate the text
"posts per page" and "x of y items" in the kendo grid pager toolbar for the js version to?

Thanks in advance for any reply
//Dan

General Discussions

answered on 20 Mar 2014

1 answer

471 views

How I can retrieve ID attribute of tree element on drop event

Hi

Could you please help me out to retrieve the ID attribute of tree elements on drop event

Basically I need the 'ID' attribute of dropped elements i.e source and target element

<div id="treeview"></div>

<script>
function onDrop(e) {
   // here I need the 'ID' attribute of dropped source and target element
   // alert(this.text(e.dropTarget));
},

$("#treeview").kendoTreeView({
   checkboxes: {
       checkChildren: true
   },
   dataSource: [{id:1,text:"root",expanded: true, spriteCssClass: "folder",checked:"true",items:[{id:27,text:"",expanded: true, spriteCssClass: "folder"},{id:28,text:"test6",expanded: true, spriteCssClass: "folder"},{id:29,text:"2233",expanded: true, spriteCssClass: "folder"},{id:30,text:"rajnew",expanded: true, spriteCssClass: "folder"},{id:31,text:"dgfdgfdgfd",expanded: true, spriteCssClass: "folder"},{id:32,text:"dgfdgfdgfd",expanded: true, spriteCssClass: "folder"},{id:33,text:"dgfdgfdgfd",expanded: true, spriteCssClass: "folder"},{id:34,text:"dgfdgfdgfd",expanded: true, spriteCssClass: "folder"},{id:35,text:"rooot",expanded: true, spriteCssClass: "folder"},{id:36,text:"gururajnew",expanded: true, spriteCssClass: "folder",checked:"true"},{id:37,text:"new star",expanded: true, spriteCssClass: "folder",checked:"true",items:[{id:38,text:"tr4estsfdf",expanded: true, spriteCssClass: "folder",checked:"true"}]},{id:39,text:"test 8",expanded: true, spriteCssClass: "folder",checked:"true"},{id:2,text:"A particular hotel",expanded: true, spriteCssClass: "folder",checked:"true",items:[{id:5,text:"test",expanded: true, spriteCssClass: "folder",checked:"true"}]},{id:3,text:"Another hotel",expanded: true, spriteCssClass: "folder",checked:"true",items:[{id:20,text:"MPT Test",expanded: true, spriteCssClass: "folder"},{id:7,text:"Third down",expanded: true, spriteCssClass: "folder",checked:"true",items:[{id:9,text:"Fourth down a 1",expanded: true, spriteCssClass: "folder",checked:"true",items:[{id:11,text:"Fifth down",expanded: true, spriteCssClass: "folder",checked:"true"}]}]},{id:8,text:"Another third down",expanded: true, spriteCssClass: "folder",checked:"true",items:[{id:10,text:"Fourth down b1",expanded: true, spriteCssClass: "folder",checked:"true"}]}]}]}],

    dragAndDrop: true,
    drop: onDrop
});
</script>

TreeView

answered on 20 Mar 2014

3 answers

115 views

MobileListView does not call read method

Something strange is baffling me with regard to the mobile list view. Here is the syntax:

@(Html.Kendo().MobileView()

.Name("detail")

.Title("Attendance Monitor")

.Layout("MobileLayout")

.Content(obj =>

Html.Kendo().MobileListView()

.Name("ParkListDetail")

.TemplateId("detailTemplate").AutoBind(true)

.DataSource(dataSource => dataSource.Read(read => read.Action("ReadDetails", "Mobile"))))

)

The method, 'ReadDetails' is not getting called. However, if I put a regular list view on the page, it loads just fine:

@(Html.Kendo().ListView(Model)

.Name("ParkListSummary")

.TagName("div")

.ClientTemplateId("summaryTemplate").AutoBind(true)

.DataSource(dataSource => dataSource

.Read("ReadDetails", "Mobile")

.Model(model => model.Id(park => park.ParkID))

))

What am I missing? I want to have a certain portion of my application as mobile-friendly, but the mobile widgets are not playing nice. I have been through every demo on the site for the list view, but nothing works for me.

Sean~

ListView (Mobile)

answered on 20 Mar 2014