Questions on Kendo UI for jQuery Forum

1 answer

129 views

DateTimePicker not included in Custom Download Tool

I notice that the Kendo Custom Download tool does not include the DateTimePicker.

I tried using a Custom Download that just included everything, and one of my pages that uses the DateTimePicker broke.

http://www.kendoui.com/custom-download.aspx

Is there a recommended workaround for this?

DatePicker

answered on 12 Nov 2012

2 answers

704 views

kendoWindow ajax load issue

I'm creating an ASP.NET MVC3 web app with Kendo UI and I love it.
Here is an issue I'm trying to resolve at the moment:

1. I have a main screen with a grid and custom command/action

{ command: { text: "Unwind", click: showUnwind }, title: "&nbsp;", width: "50px" },

2. Once I trigger that I display my window

    function showUnwind(e) {
        e.preventDefault();
 
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var selImagineSNum = dataItem["ImagineSNum"];
 
        var direction = _rootUrl + "CFD/GetUnwindWindowContent/" + selImagineSNum;
        var wnd = $("#unwindWindow").data("kendoWindow");
 
        if (!wnd) {
            // first click of the button - will automatically fetch the contentUrl
            wnd = $("#unwindWindow").kendoWindow({
                title: "Unwind Trade",
                actions: ["Minimize", "Maximize", "Close"],
                content: direction,
                width: "800px",
                height: "600px",
                visible: false,
                modal: true
            }).data("kendoWindow");
        } 
        
        wnd.refresh(direction);
        wnd.center();
        wnd.open();
    }

3. The direction above points ot an MVC action that returns an ActionResult with the following markup:

 
@{
    Layout = null;
}
 
<div style="margin: 5px 5px 0 5px;">
    @* Header *@
    <table class="table table-condensed">
        <tr><th>PrcmNum</th><th>ImagineSNum</th><th>PrimeBroker</th><th>Fund</th><th>Trade Date</th><th>Setl. Date</th></tr>
        <tr><td>@ViewBag.Id</td><td>@ViewBag.Id</td><td>PrimeBroker</td><td>Fund</td><td>01/01/2012</td><td>01/02/2012</td></tr>
    </table>
 
    @* Grid *@
    <p class="help-block">Associated trades based on: Fund, Prime Broker & PrcmNum</p>
    <div id="gridAssoc"></div>
</div>
 
<script type="text/javascript">
    CFDUnwind.init();
    /*
    $(function () {
        CFDUnwind.init();
    });
    */
</script>

4. The CFDUnwind.init() method is in CFD.Unwind.js and that file is of course already loaded. The code is:

var CFDUnwind = {};
 
CFDUnwind._assocTradesDataSource = null;
 
// *** Initialize the CFD partial view
CFDUnwind.init = function () {
 
    // ** DataSource for the CFD Trades
    CFDUnwind._assocTradesDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                type: "POST",
                url: _rootUrl + "CFD/GetAssocCFDTradesPOST",
                dataType: "json"
            }
        },
        schema: {
            model: {
                id: "ImagineSNum",
                fields: {
                    Confirmed: { editable: true, type: "boolean" },
 
                    PrcmNum: { editable: false, type: "number" },
                    ImagineSNum: { editable: false, type: "number" },
 
                    Fund: { editable: false, type: "string" },
                    Strategy: { editable: false, type: "string" },
                    Folder: { editable: false, type: "string" },
                    Name: { editable: false, type: "string" }
                }
            }
        }
    });
 
    // ** Grid widget
    $("#gridAssoc").kendoGrid({
        dataSource: CFDUnwind._assocTradesDataSource,
        navigatable: true,
        selectable: "single",
        height: 280,
        resizable: true,
        sortable: {
            mode: "single",
            allowUnsort: false
        },
        columns: [
            {
                field: "Confirmed", title: "&#10003", width: 15,
                template: '<input type="checkbox" #= Confirmed ? checked="checked" : "" # ></input>'
            },
            { field: "PrcmNum", title: "PrcmNum", width: 45 },
            { field: "ImagineSNum", title: "ImagineSNum", width: 45 },
 
            { field: "Fund", title: "Fund", width: 55 },
            { field: "Strategy", title: "Strategy", width: 55 },
            { field: "Folder", title: "Folder", width: 55 },
            { field: "Name", title: "Instr. Name", width: 60 }
        ],
        dataBound: function (e) {
            // console.log("gridAssoc dataBound event");
        }
    });
 
}

5. Things are beautiful 90% of the time -- I get my grid in the Window and the data is loaded with an ajax call. The problem is that sometimes I get picture: issue2.jpg, but would like to always get: correct1.jpg :)
Now, what is interesting is that if I click again to display the window the problem disappears;
I get the issue only after initialization and not always...

Hhh, please advise.

~ Boris

Window

answered on 12 Nov 2012

0 answers

191 views

How to Use Grid with WebAPI for Paging, Filtering and Sorting

I got Sorting and filtering working with WebAPI.
I am not able to get paging to work.
Not matter what value i use(i have tried litral values like 10) the grid always display 0 pages ().
What could i be doing wrong

$(document).ready(function () {

$("#grid").kendoGrid({

dataSource: {

type: 'odata',

transport: {

read: {

url: "http://localhost:13059/api/Addressbook",

contentType: "application/json; charset=utf-8",

dataType: "json",

type:"GET",

data: {}

},

parameterMap: function (options, type) {

var paramMap = kendo.data.transports.odata.parameterMap(options);

delete paramMap.$inlinecount; // <-- remove inlinecount parameter.

delete paramMap.$format; // <-- remove format parameter.

//paramMap.$includeTotalCount= "True";

return paramMap;

}

},

success: function (e) {

alert("Success: " + e.error);

},

error: function (e) {

debugger;

alert("Error: " + e.errorThrown);

},

change: function (e) {

// alert("Change");

},

requestStart: function (e) {

//alert("Request Start");

},

schema: {

data: function (data) {

return data.Results; // <-- The result is just the data, it doesn't need to be unpacked.

},

total: function (data) {

// return data.length; // <-- The total items count is the data length, there is no .Count to unpack.

return data.TotalResults;

},

model: {

fields: {

Country_Code: { type: "string" },

Country_ID: { type: "number" },

Country_Name: { type: "string" },

County_Desc: { type: "string" }

}

},

pageSize: 1,

//serverPaging: true,

// serverFiltering: true,

// serverSorting: true

},

height: 250,

filterable: true,

sortable: true,

pageable: true

});

Grid

asked on 12 Nov 2012

4 answers

537 views

How can I sort a telerik grid template column?

Hi,

I have a telerik grid which contains a template column.

What I would like to do is only apply sorting to this template column and NO other column in the grid.

Please can someone advise me on how I can go about doing this for the Name column?
Any help would be much appreciated as I am new to using Telerik grids.

Thank you very much

 @(Html.Telerik().Grid(Model.MyGrid)
                 .Name("MyGrid")
                 .Columns(columns =>
                              {
                                  columns.Template(c => @Html.ActionLink(c.Name, "Action", "Controller", new { id = c.Id }, null)).Width(100).Title("Name");
                                  columns.Bound(c => c.Title).Width(100);
                                  columns.Bound(c => c.Occupation).Width(100);
                              })
                 .Sortable(sorting => sorting.Enabled(true)))

Grid

answered on 11 Nov 2012

3 answers

848 views

Kendo Ui Grid Popup Template Positioning Issue

HI,
we are showing a Popup from Kendo Ui Grid, The page is a Searc Page which has Dropdownlist and by selecting the value,
a kendo ui grid will be shown with data and by clicking the Edit button a popup is displayed. By using Ajax editing in grid, the popup is shown in center of the browser. but page refresh is not happening and dropdownlist is not populated.

@(Html.Kendo().Grid(Model)

.Name(

"Grid")

.Columns(columns =>

{

columns.Bound(p => p.RoleType).Width(80);

columns.Bound(p => p.Name).Width(100);

columns.Bound(p => p.Status).Width(70);

columns.Command(command => { command.Edit(); }).Width(100);

})

.Editable(editable => editable.Mode(

GridEditMode.PopUp).TemplateName("ManageRolePop").Window(w => w.Title("Manage Role").Name("editWindow")))

.Pageable()

.Sortable()

.Scrollable()

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(

false)

.Model(model => model.Id(p => p.RoleID))

.Read(

"ManageRole", "ManageRole")

.Update(

"Update", "ManageRole")

)

By using Server editing the Popup orientation is at the bottom of the page and thewe are not able to set in center of the browser. Request you to help us in this issue.

@(Html.Kendo().Grid(Model)

.Name(

"Grid")

.Columns(columns =>

{

columns.Bound(p => p.RoleType).Width(80);

columns.Bound(p => p.Name).Width(100);

columns.Bound(p => p.Status).Width(70);

columns.Command(command => { command.Edit(); }).Width(100);

})

.Editable(editable => editable.Mode(

GridEditMode.PopUp).TemplateName("ManageRolePop").Window(w => w.Title("Manage Role").Name("editWindow")))

.Pageable()

.Sortable()

.Scrollable()

.DataSource(dataSource => dataSource

.Server()

.ServerOperation(

false)

.Model(model => model.Id(p => p.RoleID))

.Read(

"ManageRole", "ManageRole")

.Update(

"Update", "ManageRole")

)

Request you to help us in this

Grid

answered on 11 Nov 2012

1 answer

227 views

KendoUI grid InCell editing style issue

Hi All,

I am using ASP.NET MVC 4 and Telerik's KendoUI grid control with in grid editing (GridEditMode.InCell). I am able to see data in the grid and edit data, but the problem is that when I click cell for editing I am not getting Kendo UI controls (DatePicker, ...). Controls that I am getting for editing are plain without any styles. When I add any Kendo control on the page I am getting right control, such as DatePicker control. So style and controls' js are there. The only problem is I am not getting Kendo control inside of the grid.

Index.cshtml

@using Kendo.Mvc.UI

@using KendoGrid.Models

@(Html.Kendo().Grid<Person>()

.Name("Grid")

.Columns(columns => {

columns.Bound(p => p.FirstName).Width(140);

columns.Bound(p => p.LastName).Width(140);

columns.Bound(p => p.DayOfBirth).Width(200);

columns.Bound(p => p.Age).Width(150);

columns.Command(command => command.Destroy()).Width(110);

})

.ToolBar(toolbar =>

{

toolbar.Create();

toolbar.Save();

})

.Editable(editable => editable.Mode(GridEditMode.InCell))

.Pageable()

.Sortable()

.Scrollable()

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(false)

.Events(events => events.Error("error_handler"))

.Model(model => model.Id(p => p.Id))

.Read("Read", "Grid")

.Create("Create", "Grid")

.Update("Update", "Grid")

.Destroy("Destroy", "Grid")

)

<div style="margin-top: 20px">

@(Html.Kendo().DatePicker()

.Name("datepicker")

.Value("10/10/2011")

.HtmlAttributes(new { style = "width:150px" })

)

</div>

<script type="text/javascript">

function error_handler(e) {

if (e.errors) {

var message = "Errors:\n";

$.each(e.errors, function (key, value) {

if ('errors' in value) {

$.each(value.errors, function () {

message += this + "\n";

});

}

});

alert(message);

}

</script>

_Layout.cshtml

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta charset="utf-8" />

<title>@ViewBag.Title</title>

<link rel="stylesheet" href="@Url.Content("~/Content/kendo.common.min.css")">

<link rel="stylesheet" href="@Url.Content("~/Content/kendo.default.min.css")">

<link rel="stylesheet" href="@Url.Content("~/Content/examples-offline.min.css")">

<script src="@Url.Content("~/Scripts/jquery.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>

<script src="@Url.Content("~/Scripts/console.min.js")"></script>

<script src="@Url.Content("~/Scripts/prettify.min.js")"></script>

@RenderSection("HeadContent", false)

</head>

<body>

<div class="page">

<div id="example" class="k-content">

@RenderBody()

</div>

</body>

</html>

I also posted the same question on Stack Overflow KendoUI grid InCell editing style issue with images, so you can see what I am talking about.

Thanks in advance.

Sincerely,
Vlad.

Grid

answered on 11 Nov 2012

0 answers

80 views

Nav Bar/Scolls/Truncates is cutt off with Form Input on iPhone

My navbar truncates on when I select a form field. The navbar is cut almost in half and the back button is hard to reach. Only a full page refresh restores the natural size.

You can reproduce the problem with the following link on an iphone device:
http://www.veterinaryclipboard.com/#dosagecalcview?isfeline=true

NavBar

asked on 11 Nov 2012

0 answers

70 views

Regarding filterable and groupable used together in a grid

I want to use dynamic groupable and my aggregate value should be displayed only once..i.e if we group n no of columns the aggregate value displayed should be only once i.e the aggregate value of all the columns grouped..I am using normal javascripts and html for manipulation..

In filterable part I want to display the entire set of values present in that column i.e like a drop dowm menu...how to do that???

and when both filterable and dynamic groupable are used together how to get the aggregate value of the n filtered columns..

Grid

asked on 11 Nov 2012

0 answers

488 views

Is there a way to disable swipe events?

I'm using a ScrollView as a carousel to house some questions and need to disable swipe events for it (I'm using "next" and "previous" buttons to control it). The problem I'm coming across is that I have a jQuery-UI slider inside the ScrollView, but when I try to change the slider value, it starts to move the ScrollView to the next "page".

I was hoping there was a native way to disable "swipe to move", but it doesn't appear that there is.

I've played around with catching the events on the ScrollView pages, but haven't been able to get something that works on an actual device:

$('#scrollview-container [data-role="page"]').on('mousedown', function(e) {

console.log('mousedown');

e.stopImmediatePropagation();

});

$('#scrollview-container [data-role="page"]').on('touchstart', function(e) {

console.log('touchstart');

e.stopImmediatePropagation();

});

Any ideas or help would be appreciated.

ScrollView (Mobile)

asked on 10 Nov 2012

13 answers

709 views

Knockout Tutorial #2

Hi:

I am trying to convert the Knockout tutorial #2 to Kendo MVVM. Learn knockout Tutorial Collections
Not doing well.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Tutorial2_4.aspx.cs" Inherits="KnockoutApp.Tutorials.Tutorial2_3" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">

<style type="text/css">

.deleteLink

{

color: red;

font-weight: bold;

}

</style>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<div id="mvvmRegion">

<h2>Your seat reservations (<span data-bind="text: seats.length" ></span>)</h2>

<button id="addSeatButton" data-bind="click: addSeat">Reserve another seat</button>

<div style="width: 600px;">

<table id="reservationTable">

<thead><tr>

<th data-field="name" style="width: 160px;">Passenger name</th>

<th data-field="meal.mealName" style="width: 160px;">Meal</th>

<th data-field="meal.price" style="width: 100px;">Surcharge</th>

<th> </th>

</tr></thead>

<tbody>

</tbody>

</table>

</div>

<h3 data-bind="visible: surcharge">

Total surcharge: $<span data-bind="text: totalSurcharge00"></span>

</h3>

</div>

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

<tr>

<td style="width: 160px;"><input id="nameTextBox" value="#= name #" data-bind="value: seats.name" /></td>

<td style="width: 160px;"><input id="mealDropDown" class="mealDropDownClass" value="#= meal.mealName #" data-bind="value: seats.meal.mealName" /></td>

<td style="width: 100px;">#= meal.price #</td>

<td><a href="" class="deleteLink">Remove</a></td>

</tr>

</script>

<script type="text/javascript">

// Class to represent a row in the seat reservations grid

function SeatReservation(fname, initialMeal) {

var self = this;

self.name = fname;

self.meal = initialMeal;

}

//

var availableMeals = [

{ mealName: "Standard (sandwich)", price: 0.0 },

{ mealName: "Premium (lobster)", price: 34.95 },

{ mealName: "Ultimate (whole zebra)", price: 290.0 }

];

//

var viewModel = kendo.observable({

// type array populates the drop down

meals: availableMeals,

// array will hold the grid values

seats: [

new SeatReservation("Steve", availableMeals[1]),

new SeatReservation("Bert", availableMeals[0])

],

// Computed data

totalSurcharge: function () {

var total = 0;

for (var i = 0; i < this.get("seats").length; i++)

total += this.get("seats")[i].meal.price;

return total + 0.00;

},

totalSurcharge00: function () {

var total = this.totalSurcharge() + 0.00;

return total.toFixed(2);

},

surcharge: function () {

var total = this.totalSurcharge() + 0.00;

if (total > 0) return true;

return false;

},

//

maxSeating: function () {

if (this.seats.length < 5) return true;

return false;

},

// seats.length < 5

// event execute on click of add button

addSeat: function (e) {

// add the items to the array of expenses

this.get("seats").push(new SeatReservation("", self.availableMeals[1]));

return false;

},

removeSeat: function (seat) {

var seats = this.get("seats");

seats.splice(seats.indexOf(seat), 1);

}

});

// apply the bindings

kendo.bind($("#mvvmRegion"), viewModel);

//

var reservationDataSource = new kendo.data.DataSource({

data: viewModel.get("seats"),

schema: {

model: {

id: "name",

fields: {

// data type of the field {Number|String|Boolean|Date} default is String

name: { type: "String" },

meal: {

mealName: { type: "String" },

price: { type: "Numeric" }

}

});

//

$("#reservationTable").kendoGrid({

dataSource: reservationDataSource,

rowTemplate: kendo.template($("#reservationTemplate").html()),

dataBound: function (e) {

$(".deleteLink").click(function (e) {

e.preventDefault();

if (confirm("Do you what to delete this?")) {

var grid = $("#reservationTable").data("kendoGrid");

var dataItem = grid.dataItem($(this).closest("tr"));

viewModel.removeSeat(dataItem);

}

return false;

});

}

});

$(".mealDropDownClass").kendoDropDownList({

dataTextField: "mealName",

dataValueField: "mealName",

dataSource: availableMeals

});

//

</script>

</asp:Content>

Problem is the binding is not happening and the dropdown loses it's dropdownlist on add or remove.

Note: Kendo does not seem to have the calculated (logical) binding like Knockout does for visible and enabled.

Phil

MVVM

answered on 10 Nov 2012