Questions on Kendo UI for jQuery Forum

7 answers

1.8K+ views

Copy some selected rows from one grid to another grid

In grid there have some multiple records. Now I am selecting some rows. I want to copy only those selectable rows in another grid.
How I can do this. Please help.

Thanks in advance.

Grid

answered on 30 Oct 2012

0 answers

110 views

How to bind dynamically multiple column in grid.

View

@(Html.Kendo().Grid<QRMG.VendorPortal.Model.Field>()

.Name("Grid")

.Columns(columns =>

{

foreach (var fieldData in Model.Data[1])

{

columns.Bound(fieldData.FieldName);

}

})

.DataSource(dataSource => dataSource

.Server()

)

Grid

asked on 30 Oct 2012

1 answer

615 views

contentUrls not loading.. unless class="k-state-active" added to last ?

I have a grid driven application where I need to load 5 grids and access them via tabs, kind of like a tree.
If I do the following I only get content loaded for the first tab:
<div id="tabstrip">
    <ul>
        <li id="project" class="k-state-active">Projects</li>
        <li id="shift" >Shifts</li>
        <li id="employee">Employees</li>
        <li id="contact" >Contacts</li>
        <li id="customer" >Customers</li>

But if I put the class="k-state-active" on the last tab, everything works fine because I'm guessing it loads everything in then finds the active tab ? I was wondering how I should ensure that my contentUrls finish loading properly.

Later: turns out this is just an illusion and 'patience is a virtue'. IOW the tabs do load I was just trying too quickly. What I need is a way to display the spinner until ALL the content is loaded..

TabStrip

answered on 30 Oct 2012

0 answers

71 views

Grid row template with same css as editor

Hi Telerik,
My grid must look the same when it's normal and in edit mode. I'm playing with row template, but when I add it then it looks ok, but edited values are not send to server.

I have created example: http://jsfiddle.net/lukeon/u7VWv/1/ but it is using local datasource. In my case I have autoSync datasource. When I remove
template: "<input type='text' class='k-input k-textbox' value='${ FirstName }'/>"
then it works fine. When I add such template then datasource it's not sync.

Any idea how I can accomplish this? :)

Grid

asked on 30 Oct 2012

0 answers

333 views

Checkbox is checked and textbox field become readonly

I want to put functionality like when Checkbox is checked and textbox field become readonly. Please give me solution for this.

function plan_min_unlimited(container, options)
{
    $('<input type="checkbox" name="' + options.field + '" onclick="chkclickmin(this.value)"/>').appendTo(container)
}
function chkclickmin(val){
    alert(val);
    alert($('#grid').data('kendoGrid').tbody.select("plan_minutes"));
    $('#grid').data('kendoGrid').tbody.find("plan_minutes"). Editable(false);

}
$("#grid").kendoGrid({
            dataSource: dataSource,
            pageable: true,
            height:"583px",

            toolbar: [{name:"create",text:"Add new Plan"}],
            columns: [

                {field:"plan_min_chk",title:"<strong>UnlimitedPlan</strong>",hidden:true,editor: plan_min_unlimited},
                {field:"plan_minutes", title:"<strong>Plan Minutes</strong>",width:"100px"},
                {command: ["edit", "destroy"], title: " ", width: "210px",title:"<strong>Action</strong>" }],
            groupable:true,
            editable: {
                mode: "popup",
                destroy: true,
                confirmation: "Are you sure you want to remove this test member?"
            }

Upload

asked on 30 Oct 2012

1 answer

139 views

bind a listview to an ASP.Net .asmx web service using KendoUI mobile

Hello,

I was trying to bind a listview to an ASP.Net .asmx web service using KendoUI mobile. I referred the following link to achieve this. But it’s not working for me.
http://www.kendoui.com/forums/framework/data-source/consuming-a-net-json-web-service.aspx

Pasting my code snippet for more help. Please let me know whether I am in right direction or what’s wrong with my code. It’s urgent, please help me.

index.html:-

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

<meta charset="utf-8">

<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>

<script src="js/jquery.min.js"></script>

<script src="js/kendo.mobile.min.js"></script>

<script src="js/console.js"></script>

<link href="styles/kendo.common.min.css" rel="stylesheet" />

<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />

</head>

<body>

<a href="../index.html">Back</a>

<div data-role="view" id="flat" data-init="mobileListViewDataBindInitFlat" data-title="ListView" data-layout="databinding">

<ul id="flat-listview"></ul>

</div>

<script>

var flatData = new kendo.data.DataSource({

transport: {

read: {

contentType: "application/json",

type: "POST",

url: "http://myservice/TestService.asmx/GetCustomerData",

data: {

q: "html5"

}

});

function mobileListViewDataBindInitFlat() {

$("#flat-listview").kendoMobileListView({ dataSource: flatData });

}

</script>

<script>

window.kendoMobileApplication = new kendo.mobile.Application(document.body);

</script>

</body>

</html>

TestService.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Services;

using System.Web.Script.Services;

using Northwind_newModel;

[ScriptService]

public class TestService : System.Web.Services.WebService {

[WebMethod]

public List<CustomerModel> GetCustomerData()

{

using (var northwind = new Northwind_newEntities1())

{

return northwind.Customers

.Select(p => new CustomerModel

{

CompanyName = p.CompanyName

}).Take(5).ToList();

}

Thanks.

General Discussions

answered on 30 Oct 2012

3 answers

309 views

Buttongroup background-color

Hello,

how can i change the background-color of the entire control?
please take a look at the attached bitmaps.

Thank you
Axel

ButtonGroup

answered on 30 Oct 2012

0 answers

110 views

Legend not setting its position in chart refresh

Having Line chart besides which there is div , which user can collapse as per user need to increase chart area, on div collapse, refreshing chart . In chart , I had customize legend position based on div width in which chart is generated. Now issue is on chart refresh chart div width is increasing, but legend position not getting refreshed as per div width changed.

Charts

asked on 30 Oct 2012

0 answers

67 views

Moving splitter causes text to be selected

Just started using Kendo UI Web v2012.2.710 and when you move the splitter it selects text in either the left or right pane. I don't know what's causing this. I don't see this happening in the demo. Is there some option I need to send the API?

                $("#menuSplitter").kendoSplitter({
                    orientation: "horizontal",
                    panes: [
                            { collapsible: false, size: "24%", resizable: true },
                            { collapsible: false, resizable: true }
                        ]
                });

Splitter

asked on 30 Oct 2012

5 answers

96 views

TabStrip on Blackberry 6

Hi, I'm having and issue with your tabstrip on blackberry, It works ok and have the native look and feel on mi android and iOS devices but when in runs on blackberry (simulated 9800 or Real 9300 w/ BB OS 6.0) I can't see the content of the views... It just shows the top navbar and the tabstrip really close... thanks for your help

<!DOCTYPE html>

<html>

<head>

<script src="cordova-2.0.0.js"></script>

<script src="js/jquery-1.7.1.min.js"></script>

<script type="text/javascript" charset="utf-8">

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

}

</script>

<link rel="stylesheet" type="text/css" href="css/kendo.common.min.css">

<link rel="stylesheet" type="text/css" href="css/kendo.dataviz.min.css">

<link rel="stylesheet" type="text/css" href="css/kendo.mobile.all.min.css">

<link rel="stylesheet" type="text/css" href="css/kendo.default.min.css">

<title>Event City Bucaramanga</title>

</head>

<body>

<div data-role="view" id="inicio" data-title="Event City - Hoy" data-layout="default">

Inicio

</div>

<div data-role="view" id="buscar" data-title="Event City - Buscar" data-layout="default">

Buscar

</div>

<div data-role="view" id="cerca" data-title="Event City - Cerca de ti" data-layout="default">

Cerca de mi

</div>

<div data-role="view" id="establecimientos" data-title="Event City - Lugares" data-layout="default">

Establecimientos

</div>

<div data-role="layout" data-id="default">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

<a class="about-button" data-align="right" href="content/about.html" data-role="button">Acerca</a>

</div>

</header>

<footer data-role="footer" data-id="default">

<div data-role="tabstrip">

<a href="#inicio" data-icon="home">Hoy</a>

<a href="#buscar" data-icon="search">Próximos</a>

<a href="#cerca" data-icon="globe">Cerca</a>

<a href="#establecimientos" data-icon="organize">Lugares</a>

</div>

</footer>

</div>

<script src="js/kendo.all.min.js"></script>

<script>

$(function(){

var app = new kendo.mobile.Application($(document.body), {

layout:"default"

});

</script>

<style>

.km-android .km-navbar .km-view-title /* Before Q2 2012 SP1 */

{

display: inline-block;

}

.km-blackberry .km-navbar .km-view-title /* Before Q2 2012 SP1 */

{

display: inline-block;

}

</style>

</body>

</html>

TabStrip (Mobile)

answered on 30 Oct 2012