Questions on Kendo UI for jQuery Forum

1 answer

259 views

Id column in the grid not updated during insert when batch=true

Hi i am using kendo grid in my page defined in javascript. Below is my grid code in javascript

function LoadAllPanelUsers() {

dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/Home/LoadAllUsers",
type: "POST",
dataType: "json"
},
update: {
url: "/Home/UpdateUser",
dataType: "json",
type: "POST"

},
destroy: {
url: "/Home/DeleteUser",
dataType: "json",
type: "POST"

},
create: {
url: "/Account/InsertUser",
dataType: "json",
type: "POST"

},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models[0]) {
return options.models[0];
}
}
},
type: "json",
batch: true,
schema: {
model: {
id: "UserID",
fields: {
UserID: { editable: false, nullable: true, type: "number" },
UserNumber: { type: "number", validation: { required: true, max: 96} },
UserDescription: { type: "string", validation: { maxLength: 31} },
PartitionNumber: { editable: false, type: "number", defaultValue: "1", validation: { required: true} },
AuthorityLevel: { type: "number", validation: { required: true }, defaultValue: 0 },
UserCode: { type: "number", validation: { required: true, maxLength: 4, minLength: 4} },
IsDeleted: { type: "bool" },
IsEnabled: { type: "bool" }
}
},
data: "data",
total: "total"
}
});

var PanelDevices = [];
$("#rdgrd_AIB_UserResults").empty();
$("#rdgrd_AIB_UserResults").kendoGrid({
dataSource: dataSource,
height: 410,
selectable: "row",

toolbar: ["create", "save", "cancel"],
columns: [
{
field: "UserNumber",
title: "User Number",
width: 150
},
{
field: "UserDescription",
title: "User Name",
width: 150
},
{
field: "PartitionNumber",
title: "Partition Number",
width: 150
},
{
field: "UserCode",
title: "User Code",
width: 150
},
{
field: "AuthorityLevel",

title: "Authority Level",
width: 150
}
],
editable: true,
navigatable: true
});
}

when i insert the row , enter necessary values and click on save changes the controller action is called and the user is created in DB successfully. i return the same object after updating the new user id to the grid. below is my response body recieved from controller action.

Request URL:

http://localhost:60410/Account/InsertPanelUser
Request Method:

POST
Status Code:

200 OK
Request Headersview source
1. Accept:
  
  application/json, text/javascript, */*; q=0.01
2. Accept-Charset:
  
  ISO-8859-1,utf-8;q=0.7,*;q=0.3
3. Accept-Encoding:
  
  gzip,deflate,sdch
4. Accept-Language:
  
  en-US,en;q=0.8
5. Cache-Control:
  
  no-cache
6. Connection:
  
  keep-alive
7. Content-Length:
  
  110
8. Content-Type:
  
  application/x-www-form-urlencoded
9. Cookie:
  
  ASP.NET_SessionId=fjvgg5ehwlifhoukfi3zeupq
10. Host:
  
  localhost:60410
11. Origin:
  
  http://localhost:60410
12. Pragma:
  
  no-cache
13. Referer:
  
  http://localhost:60410/Home/Home
14. User-Agent:
  
  Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.56 Safari/537.17
15. X-Requested-With:
  
  XMLHttpRequest
Form Dataview sourceview URL encoded
1. UserID:
  
  null
2. UserNumber:
  
  43
3. UserDescription:
  
  test234
4. PartitionNumber:
  
  1
5. AuthorityLevel:
  
  3
6. UserCode:
  
  5428
7. AccountID:
  
  0
Response Headersview source
1. Cache-Control:
  
  private
2. Connection:
  
  Close
3. Content-Length:
  
  254
4. Content-Type:
  
  application/json; charset=utf-8
5. Date:
  
  Mon, 28 Jan 2013 09:24:37 GMT
6. Server:
  
  ASP.NET Development Server/10.0.0.0
7. X-AspNet-Version:
  
  4.0.30319
8. X-AspNetMvc-Version:
  
  4.0

Response data
{"ExtensionData":null,"AuthorityLevel":3,"Changed":false,"ChangedBy":null,"Defaulted":false,"IsDeleted":false, "IsEnabled":false,"MacPanelID":0,"PartitionNumber":1,"SortIndex":null,"UserCode":"5428","UserDescription":"test234", "UserID":66,"UserNumber":43} in the response data you can see that the user id is 66. this id is not getting updated in the grid data. following is my grid data after save changes

$("#rdgrd_AIB_UserResults").data('kendoGrid')

h.extend.init
_current: jQuery.fn.jQuery.init[1]
_data: Array[8]
    0: f
        AccountID: 0
AuthorityLevel: 3
PartitionNumber: "1"
UserCode: 5428
UserDescription: "test234"
UserID: null
UserNumber: 43
_events: Object
dirty: false
id: null
parent: function (){return c}
uid: "a9eb1dab-0ce5-43a4-a1ef-2596db7b5c07"
__proto__: b

        
1: f
2: f

    

here in the above object you can see that id and userid is null

Grid

answered on 30 Jan 2013

2 answers

567 views

Bounce scrolling for PanelBar content

Hello all,

I'm trying to get a fixed size panelbar (see: http://www.kendoui.com/forums/ui/panelbar/static-sized-panelbar.aspx ) working in a more "mobile" feel. The fixed size part is working just great. But - is there a way to have the fixed size "long" content in the panelBar scroll with overshoot and bounce back like on the kendo mobile listView and other mobile widgets? Can I somehow put the content items in a scroller control? I'm not too sure how to make that work.

Cheers,
Stephen

PanelBar

answered on 30 Jan 2013

9 answers

240 views

click event fires twice in group mode

Hello,

when i bind a listview to a grouped datasource, the click event fires twice.
how can I prevent it, if this is intended?

Kind regards
Axel

ListView (Mobile)

answered on 29 Jan 2013

1 answer

129 views

Initially select tab?

I have a tab strip that links to two views (snippet 1). What I would like to do is have a way to initially select the second tab and its corresponding view.

I tried using the selectedIndex property (snippet 2), but it seems to always display whichever view I define first in code - I can change the highlighted tab, but what I really want to do is change the view that is displayed.

I have tried various versions of using the application's navigate method from body.onload, but that seems to work poorly.

Any ideas?

(Snippet 1)

        <div data-role="footer">
            <div data-role="tabstrip" id="tabstrip">
                <a href="#tabstrip-viewnotes" data-icon="recents">View Notes</a>
                <a href="#tabstrip-addnote" data-icon="add">Add Note</a>
            </div>
        </div>

(Snippet 2)

        $("#tabstrip").kendoMobileTabStrip({
                    selectedIndex: 1
                });

TabStrip (Mobile)

answered on 29 Jan 2013

1 answer

57 views

Back button doesn't play nice with other buttons

We would like to have a header that has a back button and home button next to each other. Unfortunately, when we include a button next to the back button and run our app on a PC in Firefox or IE, the home button displays half a line lower than it should.

It looks right on the mobile devices that I have tested, but it would be kinda nice if it looked right on the PC too - it's nice to be able to test/demo the app on a PC.

    <div data-role="view" data-title="Test page">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
            <a data-align="left" data-role="backbutton" class="nav-button" href="#index">Back</a>
            <a data-align="left" data-role="button" class="nav-button" href="default.aspx" data-rel="external" data-icon="home"></a>
        </div>
    </header>

Button (Mobile)

answered on 29 Jan 2013

5 answers

122 views

Tablet View Problem

I am using Kendo UI mobile, Phone Gap and Icenium for developing Mobile app.

When I running my app in Iphone and Iphone5 simulator, it's working fine.but when I try on Ipad simulator, the UI will be same as smartphone UI .

I read that Kendo UI mobile will automatically detect and change to the Device native look (http://demos.kendoui.com/mobile/simulator).

Should I include css media(-webkit-device-pixel-ratio:2) for IPad? or anything more?

Guide me to know the issue...

General Discussions

answered on 29 Jan 2013

1 answer

226 views

SQL Server / Kendo UI

I have a small application that returns SQL Server data to a cshtml page and populates a chart.

But, the code I used does not seem like the best solution and I was wondering if you could take a look at my code and give me an idea of a better way?

My code is below.

Model:

public class LoginHistory

{

public Int32 LoginHistoryID { set; get; }

public Decimal LoginDuration { set; get; }

public string LoginApp { set; get; }

public DateTime LoginDateTime { set; get; }

public string LoginUser { set; get; }

public string LoginLocation { set; get; }

public string LoginEnvironment { set; get; }

}

CSHTML:

@model IEnumerable<AllanTest01.Models.LoginHistory>

@{

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width" />

<title>Index</title>

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

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

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

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

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

<script src="~/Scripts/kendo.aspnetmvc.min.js"></script>

</head>

<body>

<div>

Login History Charts 01

<br /><br />

filters_here

<br />

Date Range: @(Html.Kendo().DateTimePicker().Name("StartDateTime")) - @(Html.Kendo().DateTimePicker().Name("EndDateTime"))

<br /><br />

<table style="width:100%;">

<tr>

@* loop thru the apps *@

@foreach (var item in Model)

{

<td>

@(Html.Kendo().Chart()

.Name(item.LoginApp.ToString().Replace(" ", "_"))

.Title(item.LoginApp)

.Legend(legend => legend

.Position(ChartLegendPosition.Bottom)

)

.Series(series =>

{

series.Column(new double[] { 15.7, 16.7, 20, 23.5, 26.6 }).Name("World");

series.Column(new double[] { 67.96, 68.93, 75, 74, 78 }).Name("United States");

})

.CategoryAxis(axis => axis

.Categories("2005", "2006", "2007", "2008", "2009")

)

.ValueAxis(axis => axis

.Numeric().Labels(labels => labels.Format("{0}%"))

)

.Tooltip(tooltip => tooltip

.Visible(true)

.Format("{0}%")

)

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

)

</td>

}

</tr>

</table>

@foreach (var item in Model)

{

<p

>@item.LoginHistoryID | @item.LoginDuration | @item.LoginApp | @item.LoginDateTime | @item.LoginUser | @item.LoginLocation</

p>

}

</div>

</body>

</html>

HomeController.cs:

using AllanTest01.Models;

using System;

using System.Collections.Generic;

using System.Data;

using System.Data.SqlClient;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace AllanTest01.Controllers

{

public class HomeController : Controller

{

//

// GET: /Home/

public ActionResult Index()

{

var items = GetLoginHistory();

var newItems = (from p in items

select new LoginHistory

{

LoginHistoryID = p.Field<Int32>("LoginHistoryID"),

LoginDuration = p.Field<Decimal>("LoginDuration"),

LoginApp = p.Field<String>("LoginApp"),

LoginDateTime = p.Field<DateTime>("LoginDateTime"),

LoginUser = p.Field<String>("LoginUser"),

LoginLocation = p.Field<String>("LoginLocation")

}).ToList();

return View(newItems);

}

private List<DataRow> GetLoginHistory()

{

List<DataRow> list = null;

string srtQry = @"Select LoginHistoryID, LoginDuration, LoginApp, LoginDateTime, LoginUser, LoginLocation, LoginEnvironment

From LoginHistories";

string connString = "Data Source=.\\sqlexpress;Initial Catalog=AllanTest;Integrated Security=True";

using (SqlConnection conn = new SqlConnection(connString))

{

using (SqlCommand objCommand = new SqlCommand(srtQry, conn))

{

objCommand.CommandType = CommandType.Text;

DataTable dt = new DataTable();

SqlDataAdapter adp = new SqlDataAdapter(objCommand);

conn.Open();

adp.Fill(dt);

if (dt != null)

{

list = dt.AsEnumerable().ToList();

}

return list;

}

Charts

answered on 29 Jan 2013

3 answers

1.6K+ views

Customize Update/cancel button in popup edit mode

Hi,

Is there a way to customize buttons in the grid popup editmode?

I have looked through code for creating the popup window and it seems that the buttons are appended regardless to the html before creating the window.
ie.:
html += that._createButton("update") + that._createButton("canceledit");
html += '</div></div>';

I want to change to position, icons and text but keeping the functionality.

I tried changing content on open event, but this seems not to be the best approach.
i.e:

 open: function (e)
        {
          // TODO: fikse knapper: 
          // debugger;
          var content = $(e.sender.content());
          content.find(".popup-fieldset-wrapper").append(content.find(".k-button"));
          content.find(".k-button").wrapAll("<div class='buttons' style='float: right;'/>");
          content.find(".k-button.k-grid-update").addClass("save");
          content.find(".k-button.k-grid-cancel").addClass("cancel");
          e.sender.content(content); //at first i was converting content back to html(), but seems much better when just putting the jQuery object into content. 
          //          e.sender.center();
        }

However this method looses the mvvm binding and the widgets looses its functionality!
Any help appreciated.

Grid

answered on 29 Jan 2013

1 answer

294 views

Pager with next/prev text, no icons.

I cannot figure out how to (w/out hacking at the css styles), configure the pager to use the text rather than the icon/button images for the next and previous buttons.

The following is used to setup the messages, which I can inspect the elements and see that the text is updated correctly, but how do I make it so that the pager uses the text rather than the icons?

messages: {
display: "{0}-{1} of {2} total accounts",
empty: "No accounts to display",
first: "First",
last: "Last",
next: "Next",
previous: "Previous"
}

Thanks

Grid

answered on 29 Jan 2013

1 answer

89 views

Sliding Panes

I would like to know if you have any plans to extend the splitter control to include the "Sliding Panes" functionality like you have in the ASP.NET AJAX controls (http://demos.telerik.com/aspnet-ajax/splitter/examples/sp_clicktoopen/defaultcs.aspx)

Thx
Sagi

Splitter

answered on 29 Jan 2013