Questions on Kendo UI for jQuery Forum

4 answers

145 views

Hello,
I am triying to implement the pan behavior over a Line Chart with multiple series.
With one series it works fine, but when add more series ot still makes the pan, but only the first serie is visible.
The others series just dissapear.
I am using one datasource, and each series uses one field of each json node.
DataSuorce example:

This DataSource is generated dinamically, bacause the user can adds data and series.
The original dataSource:
[{time : "22:10" , count : 1000 },{time : "22:11" , count : 1450}]
Whe user adds a new data and new serie the next data source is generated dinamically adding more fields to the original dataSource (user adds 3 more data sources, for example):
[{time : "22:10" , count : 1000 , count_2 : 998, count_3: 756},{time : "22:11" , count : 1450 , count_2 : 398, count_3: 686},etc...]
The first series defines its "fields source" to "count", the second serie to "count_2",etc...
Everything is ok at this point, but when I drag the chart ,only the fisrt serie is still visible. If I adds the series again are en the right place, the pan is ok.
Could you give me any help please?
Some images are attached to try to explain better..

Charts

answered on 07 May 2013

1 answer

129 views

Editorr "keydown" event doesn't fire with enter key

Using event binding, the "keydown" event doesn't fire when the enter key is pressed. If I bind to the "keyup", it works just fine. I really need it to be on keydown, is this default behavior?

Thanks,
Dean Wise

Editor

answered on 07 May 2013

3 answers

485 views

Add Items to KendoDataSource does not trigger the transport create function

Using KendoDataSource's "add" method adds to the local view model object and does not call the transport create method. Is there a version of the add method that calls the create method defined in transport (in my case my code is similar to the aspnet-crud example project in kendo grid). I would want my controller method called on kendodatasource add. Please advise

Data Source

answered on 07 May 2013

1 answer

474 views

Event when we navigate to a cell in a grid?

Hi,

Is there an
event that we can use when we navigate to a cell in a grid either by tabbing or using the keyboard to navigate?

The purpose of this is to show the cell data on an information panel when the user navigates around using the keyboard, but not necessarily edit it or select it.

I have noticed an issue with tabbing and custom drop down list editor. When tabbing through the cells at a fast pace, sometimes the grid loses focus and the focus goes to a different control on the page and not the
next cell.

Is there anyway after the edit of a cell to regain focus and move to the next cell?

Grid

answered on 07 May 2013

1 answer

104 views

Grid Create Template

I have a kendo data source is bound to the grid using declarative style binding "data-bind="source: ". I currently built my view along the lines of the grid-crud code library project using MVVM. I have the following questions

I create a sepereate html <section> and bound the elements to the view model. On the create button i did a kendo data source add. However this adds to the grid collection and does not call my controller method bound to my transport. How can i make the add call the transport?
Is there an example (jsfiddle,jsgrid,codelibrary etc) which shows a form for the grid outside the confines of the grid. I cannot use the popup template as my behavior is such that the original grid should be hidden on click of an edit command. Please advise

Grid

answered on 07 May 2013

1 answer

99 views

MVVM kendoDataSource Transport Add method call

The add method in this sample updates the local data source. Is there anyway this sample can work with a remote data source (configured using transport property). It only adds to my local collection.

http://jsfiddle.net/derickbailey/D4g8S/

MVVM

answered on 07 May 2013

0 answers

88 views

Cruds php

Here the ficihiers! the cruds they walk not by clicking on the buttons, nothing happens!
index.php
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="grid"></div><script>
$(document).ready(function() {
$("#grid").kendoGrid({

culture:"fr-FR",
dataSource: {
transport: {
read: "historiqueRecharges.php",
update: {url:"update.php", type:"POST"},
create: {url:"create.php",type:"POST"},
destroy: {url:"destroy.php",type:"POST"}
},
batch: true,

schema: {
data:"data"
},

pageSize: 15
},
editable: "inline",
height: 430,
scrollable: true,
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
pageable: true,
toolbar: ["create"],
columns: [

{
field: "id",
width: 130,
filterable: {
ui: cityFilter
}
},
{
field: "nom",
filterable: {
ui: titleFilter
}
},

{ command: [{text:"Edit record", name:"edit"}, {text:"Delete record",name:"destroy"}], title: " ", width: "210px" }
]
});
});function titleFilter(element) {
element.kendoAutoComplete({
dataSource: titles
});
}function cityFilter(element) {
element.kendoDropDownList({
dataSource: cities,
optionLabel: "--Select Value--"
});
}</script>
</div></body>
</html>
update.php
<?php
header("Content-type: application/json");
$con = mysql_connect("host", "user", "password");
if (!$con)
{
die('Could not connect: ' . mysql_error());
} else {
mysql_select_db("database", $con);

$rs = mysql_query("DELETE FROM Table WHERE Id = " . $_POST['models'][0]['Id']);
if ($rs) {
echo json_encode($rs);
}
else {
header("HTTP/1.1 500 Internal Server Error");
echo "Failed on delete: " . $_POST['models'][0]['Column1'];
}
mysql_close($con);
}
?>

General Discussions

asked on 07 May 2013

0 answers

233 views

Creating a Dynamic Kendo Menu

I am trying to read a Model class which should be populated with menu data from the database and then trying to bind that data to the Kendo Menu. I have copied the razor syntax given in the kendo docs (C# Version) and tried to convert it into VB.NET but i am getting an error that no bindto method accepts this many arguments and i can't figure what the error is? i have pasted the code as following, could someone please have a look and point me in the right direction (Menu and MenuItem are model classes)?

@Imports test.Models
@ModelType IEnumerable(Of MenuCategory)

@(Html.Kendo().Menu() _
            .Name("TestMenu") _
            .BindTo(Model,
                    Sub(mappings)
                            mappings.For(Of MenuCategory)(
                                Sub(x)
                                        x.ItemDataBound(
                                            Sub(item, menu)
                                                    item.Text = menu.Name
                                            End Sub) _
                                                    .Children(
                                                        Function(menu)
                                                                Return menu.SubItem
                                                        End Function)
                                        mappings.For(Of MenuItem)(
                                        Sub(x)
                                                x.ItemDataBound(
                                                        Sub(item, menuItem)
                                                                item.Text = menuItem.Name
                                                        End Sub)
                                        End Sub
)

                                End Sub)
                    End Sub)
            )

Menu

asked on 07 May 2013

5 answers

230 views

RemoteView AJAX PartialView jQuery Not Defined

I am using remote views to show partial views from an ASP.NET MVC web site. I am performing ajax requests which in turn, use MVC partial views to replace part of the remoteView's DOM. This works fine... the first ajax post. On the second (or higher) - 2+ ajax posts, I get "Uncaught ReferenceError: $ is not defined".

Anyone have any thoughts?

Mobile index.html - RemoteView Navigate:

<body>

<div id="rootView" data-role="view" data-init="verifyLogin">

</div>

<script>

var isLoggedIn = false;

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

initial: "rootView"

});

function verifyLogin() {

app.navigate("http://127.0.0.2:81/Mobile/Account/Login");

}

</script>

</body

MVC Partial View:

<div data-role="view" data-title="Login" data-reload="true" id="viewLogin">

<form action="@OurApp.Core.Web.UrlHelper.GetUrlRoot()/Mobile/Account/Login" data-ajax="true" data-ajax-mode="replace" data-ajax-success="onSuccess" data-ajax-update="#loginForm" id="loginForm" method="post">

@Html.AntiForgeryToken()

<div>

<fieldset>

<header>

<legend>Login</legend>

</header>

<div class="widget-inner clearfix">

@Html.ValidationSummary(true, "Login was unsuccessful. Please correct the errors and try again.")

<div class="control-group">

<label class="control-label">@Html.LabelFor(model => model.UserName, new { @class = "bold" })</label>

<div class="controls">

@Html.TextBoxFor(model => model.UserName, new { autofocus = "autofocus", @class = "input-block-level", tabindex = "1" })

@Html.ValidationMessageFor(model => model.UserName)

</div>

<div class="control-group">

<label class="control-label clearfix">

@Html.LabelFor(model => model.Password, new { @class = "bold pull-left" })

</label>

<div class="controls">

@Html.PasswordFor(model => model.Password, new { @class = "input-block-level", tabindex = "2" })

@Html.ValidationMessageFor(model => model.Password)

</div>

<div class="clearfix">

<div class="pull-right" style="margin-left: 16px;">

<button type="submit" class="btn btn-primary disable-onclick" tabindex="4" style="margin-top: 0;">Login</button>

</div>

<div class="pull-right" style="margin-top: 6px;">

@Html.LabelFor(model => model.RememberMe, new { @class = "pull-left", style = "font-size: 12px;" })

@Html.CheckBoxFor(model => model.RememberMe, new { @class = "pull-left", style = "margin-left: 6px;", tabindex = "3" })

@Html.ValidationMessageFor(model => model.RememberMe)

</div>

</fieldset>

</div>

</form>

<script type="text/javascript">

$(function () {

var form = $("#loginForm");

form.removeData('validator');

form.removeData('unobtrusiveValidation');

$.validator.unobtrusive.parse(form);

});

function onSuccess() {

alert('success');

}

</script>

</div>

Controller Actions:

public ActionResult Login()

{

return PartialView(new LoginViewModel());

}

[HttpPost]

public ActionResult Login(LoginViewModel model)

{

return PartialView(model);

}

General Discussions

answered on 07 May 2013

4 answers

301 views

Kendo mobile ui with MVC - Render partial view using jquery ajax

I am creating a mobile compatible web application using Kendo Mobile UI. In my application, landing page is Login. After successful login, inbox of user having messages will be shown to user.

I want to implement slide effect after login. Means, the URL of application will remain same and only the content of the content will get rendered. Just like http://demos.kendoui.com/mobile/application/index.html

But the point is that I have to load view of Inbox after login.

To achieve this in MVC, I am using following code.

**On html page:**

    @model Bluestone.App.Mobile.Models.ViewLoginModel
        @{
          ViewBag.Title = "Login";
        }
    <section data-role="layout" data-id="default">
        <header data-role="header">
            <div data-role="navbar">
            Login
              </div>
        </header>
      </section>
        <div data-role="view" data-title="Login" id="viewlogin" data-layout="default" data-transition="overlay:up">
          <div id='loginHeader'>
            <h2>
              Please Log In</h2>
          </div>
          <div id='divLoginPanel'>

              @Html.TextBoxFor(m => m.Email, new { @class = "txtUserName", @placeholder = " Enter Email" })
              <span class="small-font value red ">@Html.ValidationMessageFor(m => m.Email)</span>
              <br />
              @Html.PasswordFor(m => m.Password, new { @class = "txtPassword", @placeholder = "Enter Password" })
              <span class="small-font value red ">@Html.ValidationMessageFor(m => m.Password)</span>
              <br />
              <a data-click="submit" data-role="button">Login</a>

          </div>
          <script>
            function submit(e) {
              var ViewLoginModel= new Object();
              ViewLoginModel.Username = $("#Email").val();
              ViewLoginModel.Password = $("#Password").val();
              $.ajax({ url: '@Url.Content("~/Account/Login")',
                type: "POST",
                data: ViewLoginModel,
                success: function (response) {
                  if (response != null) {
                    $(document.body).append(response);
                    var app = new kendo.mobile.Application();
                    app.navigate('#inbox');
                  }
                }
              });
            }
          </script>
        </div>


**And in Controller**

    [HttpPost]
        public ActionResult Login(ViewLoginModel model)
        {
          if (ModelState.IsValid)
          {
            if (ValidateUser(model.Email, password: model.Password))
            {
              return PartialView("Inbox");
            }
          }
          return null;
        }

**My Inbox View is**

    <section data-role="layout" data-id="inbox-default">
    <div data-role="footer">
        <div data-role="tabstrip">
            <a href="#actionsheet-view" data-icon="compose" >New</a>
            <a href="#Sent" data-icon="action" >Sent</a>
        </div>
    </div>

      </section>
    <div data-role="view" data-init="viewInit" data-layout="inbox-default" data-title="Inbox"
      id="actionsheet-view">
      <ul id="inbox" data-role="listview" data-template="inboxItem" class="messageList">
      </ul>
      <ul data-role="actionsheet" id="options" data-popup='{"direction": "left"}'>
        <li><a data-click="newMessage" id="btnnewMessage" href="javascript:void(0)" data-align="left"
          data-role="button">New Message</a> </li>
        <li><a id="btnAddInr" href="javascript:void(0)" data-action="addInr">Add INR</a></li>
      </ul>
    </div>
    <div data-role="view" data-title="Sent" id="Sent" data-layout="inbox-default" data-init="SentInit">
      <ul data-role="listview" id="SentInbox" data-template="inboxItem" class="messageList">
      </ul>
    </div>

Binding for the Inbox and Sent tabs is also there and my ajax request is also returning correct HTML. **But**, the layout i.e inbox-default is not applied when it gets rendered. Other way is to redirect to next view, but it will not give me slide effect which I want.

Kindly help on this.

Thanks in advance

Application

answered on 07 May 2013