Questions on Kendo UI for jQuery Forum

1 answer

151 views

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

140 views

[Solved] 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

109 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

268 views

[Solved] 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

288 views

[Solved] 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

338 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

0 answers

65 views

Menu Control Throwing a Html Is Ambiguos Error

Hi Guys,

I am trying to create a dynamic generated menu using MVC, VB.NET and Razor and i am getting the following error:

Compilation ErrorDescription: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: BC30561: 'Html' is ambiguous, imported from the namespaces or types 'System.Web.WebPages, System.Web.Mvc, Kendo.Mvc.UI'.

Source Error:

Line 2: @ModelType IEnumerable(Of MenuCategory)
Line 3:
Line 4: @(Html.Kendo().Menu() _
Line 5: .Name("TestMenu") _
Line 6: .BindTo(Model, Sub(mappings)
Source File: C:\Documents and Settings\vivekba\my documents\visual studio 2010\Projects\test\test\Views\Home\TestMenu.vbhtml    Line: 4

This is my code in the view

@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)

                                                                 End Sub)

                           End Sub)
    )


Any help will be really appreciated please.

Thanks

Menu

asked on 07 May 2013

1 answer

617 views

string array in data template

Hi,

I have created a simple datasource wich gets a string array from a service.
The data that the service returns is in jsonp format.
The data the datasource returns is correct when i debug the code with chrome,
but i cant get it working with a datatemplate.

this is my code of the data-template:
<input type="checkbox"/>#: this#

but when i try to show this, I get a list of [Object] object.

How can I get the string value out of this object?

this post:
http://www.kendoui.com/forums/framework/mvvm/syntax-for-string-template-attr-binding.aspx
showed that it can be done with "this", but thats what im doing right now.

Templates

answered on 06 May 2013

2 answers

660 views

[Solved] tool viewHtml editing not working in twitter bootstrap modal

Hello,

the viewHtml tool doesn't seems to work when in a bootstrap modal. It' display the code properly but the text cannot be selected or edited.

I tried it in chrome see the file attached

<!DOCTYPE html>

<html>

<head>

<title></title>

<link href="//cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" />

<link href="//cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" />

<link href="//twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="//cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>

<script src="//twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>

<script src="//twitter.github.io/bootstrap/assets/js/bootstrap-modal.js"></script>

</head>

<body>

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>

<h3 id="myModalLabel">Modal header</h3>

</div>

<div class="modal-body">

<textarea id="editor" rows="10" cols="30" style="width:100%;height:400px"></textarea>

</div>

<div class="modal-footer">

<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>

<button class="btn btn-primary">Save changes</button>

</div>

<script>

$("#editor").kendoEditor({

tools: [

"bold",

"italic",

"underline",

"strikethrough",

"fontName",

"fontSize",

"foreColor",

"backColor",

"justifyLeft",

"justifyCenter",

"justifyRight",

"justifyFull",

"insertUnorderedList",

"insertOrderedList",

"indent",

"outdent",

"formatBlock",

"createLink",

"unlink",

"insertImage",

"subscript",

"superscript",

"viewHtml"

]

});

var editor = $("#editor").data("kendoEditor");

editor.value("test testes");

</script>

</body>

</html>

Editor

answered on 06 May 2013

7 answers

520 views

popup editing in a grid - razor examples

are there any code examples using MVC Razor for popup editing in a grid ? The supplied demos only seem to have standard html and no cshtml

Grid

answered on 06 May 2013