Questions on Kendo UI for jQuery Forum

5 answers

218 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

291 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

41 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

572 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

605 views

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

447 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

1 answer

345 views

Cleared textbox not being propigated to model

I have a grid with a client template view attached. In the template view I have a textbox inside a span that I hide or show depending on the value of a textbox next to it. When the hidden textbox is hidden I want to clear its value. In jquery the setting the value of the hidden textbox by $('textboxid').val(''); works visually but this not propegating to the model when I save. here is my Form with the jquery i'm trying to use in it.

@model Papr2WebMvc4.Models.PiprForms.Tobacco

@using (Html.BeginForm())

{

@Html.AntiForgeryToken()

@Html.ValidationSummary(true)

<h2>Edit Refering Tobacco users</h2>

<fieldset>

<legend></legend>

<div>

<label>Month</label>

@Html.TextBoxFor(model => model.Month)/@Html.TextBoxFor(model => model.Year)

</div>

<div>

<label>Number of peope referred this month to:</label>

<div>

<span>

<label>Quitline</label>

@Html.TextBoxFor(model => model.Count)

</span>

</div>

<div>

<span>

<label>QuitNet</label>

@Html.TextBoxFor(model => model.Count2)

</span>

</div>

<div>

<span>

<label>Local Cessation</label>

@Html.TextBoxFor(model => model.Count3)

</span>

<span class="hiddenElement" style="display: none">

<label>Local Group Name</label>

@Html.TextBoxFor(model => model.FormName)

</span>

</div>

</fieldset>

<script>

$(window).load(function () {

trace("Begin");

alert($('#Count3').val());

var localCessation = $('#Count3').val();

trace(localCessation);

});

$(document).ready(

function myfunction() {

trace("Begin");

$('#Count3').change(function (event) {

trace("Text Changed");

var text = $(this).val();

if (text) {

trace("Has Text");

$('.hiddenElement').show("fast");

}

else {

trace("No Text");

$('#FormName').val(null);

$('.hiddenElement').hide("fast");

}

});

</script>

}

Here is the grid it my form is connected to.

@(Html.Kendo()

.Grid<Papr2WebMvc4.Models.PiprForms.Tobacco>()

.Name("tobaccoGrid")

.HtmlAttributes(new { @class = "primaryGridStyle" })

.Columns(columns =>

{

columns.Bound(form => form.Date).Title("Date").Format("{0:M/yyyy}");

columns.Bound(form => form.Count).Title("Quitline");

columns.Bound(form => form.Count2).Title("QuitNet");

columns.Bound(form => form.Count3).Title("Local Cessation");

columns.Bound(form => form.FormName).Title("Local Group Name");

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

})//end columns

.Editable(edit => edit.Mode(GridEditMode.PopUp).TemplateName("AddEditTobacco"))

.ToolBar(toolbar => toolbar.Create())

.Sortable()

.Filterable()

.Pageable(page => page.PageSizes(true))

.DataSource(datasource => datasource

.Ajax()

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

.ServerOperation(false)

.Read(read => read.Action("GetForm", "Form", new

{

planId = Convert.ToInt32(Session["PlanId"]),

planActivityId = Model.PlanActivityId,

activityType = Model.ActivityType,

activityTypeId = Model.ActivityTypeId

}))//end read

.Create(create => create.Action("AddForm", "Form", new { planActivityId = Model.PlanActivityId, activityTypeId = 11 }))//end create

.Update(update => update.Action("EditForm", "Form", new { planActivityId = Model.PlanActivityId, activityTypeId = 11, activityType = Model.ActivityType }))//end update

.Destroy(update => update.Action("DeleteForm", "Form", new { planActivityId = Model.PlanActivityId }))//end destroy

.Events(events=>events.RequestEnd("onRequestEnd"))//end events

)//end datasoruce

)@*End tobacco grid*@



Is there something else I should be using to reset the textbox value so it is consumed by my model using javascript/jquery.

Grid

answered on 06 May 2013

3 answers

48 views

Possible bug with Adding/Concatenating

Hey guys,

I've noticed since upgrading recently that a few of my templates that have a plus (+) character in them:

#= x + y #
#= 'i' + Id #
etc...

are removing the '+' internally and throwing an invalid template exception.

I've gotten around this easily enough by moving my logic into a function and calling that within the template, however, this seems to be a bug, and I was just wondering if there was any official feedback on the issue.

EDIT: I should add I'm using Kendo v2013.1.319

Grid

answered on 06 May 2013

1 answer

605 views

Multiple filter in grid Toolbar template

Hi,

I have been following the example http://demos.kendoui.com/web/grid/toolbar-template.html with a variation and I'm stuck.

I have a grid with multiple dropdownlist and textbox for filtering a kendo grid result. I'm having a problem implementing this but specifically when i try to compare the field value and the value in one of my control (eg dropdownlist value) . I'm trying to compare it to a field in a model list - see Award.AwardTypeID. this might be the cause why it's not working

i have a html input button for the javascript

$('#btnSearch').on("click", function (e) {

refreshGrid();

return false;

});

function refreshGrid() {

$filter = new Array();

$filter.push({ field: "StudentID", operator: "contains", value: $('#txtStudentID').val() });

if ($('#AwardType').val()) {

$filter.push({ field: "Award.AwardTypeID", operator: "eq", value: $('#AwardType').val() });

}

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

grid.dataSource.filter($filter);

grid.dataSource.read();

}

Controller

public ActionResult ApplicationSearch_Read([DataSourceRequest]DataSourceRequest request)

{

var applications = context.Applications.Include("ApplicationDetails").OrderByDescending(p => p.SubmittedDate).ToList();

var data = applications.Select(x => new

{

ApplicationID = x.ApplicationID,

SubmittedDate = x.SubmittedDate,

FirstName = x.FirstName,

LastName = x.LastName,

StudentID = x.StudentID,

IsApplicationSubmitted = x.IsApplicationSubmitted,

Award = x.ApplicationDetails.Select(y => new {

AwardID = y.AwardDetail.AwardID,

AwardName = y.AwardDetail.Award.AwardName,

AwardTypeID = y.AwardDetail.Award.AwardTypeID

})

});

return Json(data.ToDataSourceResult(request));

}

Does anybody know how to properly do this?

Thanks,
Aaron

Grid

answered on 06 May 2013

5 answers

477 views

MVC - Server Paging and Aggregates

Hi, pretty simple question that I can't find any example of.

Is it possible to get aggregates for a DataGrid that also has an Ajax DataSource with Server Paging?

Grid

answered on 06 May 2013