Questions on Kendo UI for jQuery Forum

1 answer

262 views

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.8K+ 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

325 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

119 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

1 answer

162 views

Problems with grid in ie7 and ie8

I have two issues when running the grid in ie7 and ie8 compatibility mode:

Paging does not work. After paging I get the js errors shown in the attached screen shot.
The Grid cells collapse down and the data is abbreviated or not shown and is out of alignment with the headers.

Here’s my config:

#Grids{

width: 100%;

height:400px;

overflow-y: auto;

overflow-x: auto;

border:1px solid #00215C;

}

</div>

var loadMoneyOrderDetailsGrid = function(details){

$("#gridMoneyOrders").show().kendoGrid({

dataSource: {

data: details,

pageSize: 10,

schema: {

model: {

fields: {

FacilityName: { type: "string" },

MoneyOrderID: { type: "string" },

IssueID: { type: "string" },

ClerkID: { type: "string" },

IssueDateTime: { type: "date" },

SaleAmount: { type: "string" },

PaidAmount: { type: "string" },

ProcessDate: { type: "date" },

SerialNumber: { type: "string" }

}

},

//change: onChange,

selectable: "row",

groupable: false,

sortable: true,

pageable: {

refresh: true,

pageSizes: false

}

,

columns: [ {

field: "FacilityName",

width: 40,

title: "Facility Name"

} , {

field: "MoneyOrderID",

width: 10,

title: "City"

} , {

field: "IssueID",

title: "Issue",

width: 10

}, {

field: "ClerkID",

title: "Clerk",

width: 10

}, {

field: "IssueDateTime",

title: "Issue Date",

width: 20,

format: "{0:MM/dd/yyyy}"

}, {

field: "SaleAmount",

title: "Sale Amount",

format: "{0:$0.00}",

width: 20

}, {

field: "PaidAmount",

title: "Paid Amount",

format: "{0:$0.00}",

width: 20

}, {

field: "ProcessDate",

title: "Process Date",

format: "{0:MM/dd/yyyy}",

width: 20

}, {

field: "SerialNumber",

title: "Serial Number",

width: 20

}

]

});

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

grid.refresh();

};

Grid

answered on 29 Jan 2013

1 answer

177 views

[Solved] Nested custom type is null

I have a model with preoperty of custom type
It's bound to drop down editor in web grid

$("#grid").kendoGrid({
dataSource: {
schema: {
model: {
.....
fields: {
Site: { validation: { required: true }, editable: true },
}
}
}

columns: [
{
field: "Site",
editor: siteDropDownEditor,
template: "#=Site.SiteName#"
}]

The problem is that when Update hits controller's method nested custom type is null/empty (like in image)
Please advise where is mistake

Grid

answered on 29 Jan 2013

1 answer

365 views

Using append and select

If I append a tab I want to be able to select it by an ID or string instead of index. I tried passing an `id` property to my append data but had no luck. How can I do this?

TabStrip

answered on 29 Jan 2013

1 answer

216 views

ImageBrowser implementation in PHP

I am struggling to get the image browser to work in php. One thing that always stumps me with the documentation is finding the schema that is expected via json. After viewing a .NET MVC example I came up with the following. It isn't working yet but was hoping for some direction.

Right now with the following code the image browser comes up with the busy animation in the center and nothing happens beyond that.

File: obj.file.php

<?PHP

class FileObj {

public $name = "";

public $type = "";

public $size = "";

}

?>

File: read.php

<?

include_once("obj.file.php");

$path = $_GET["path"];

$serverFilePath = "/home/midmosou/public_html/";

$filter = "*.*";

if(is_dir($serverFilePath . $path))

{

foreach (glob($serverFilePath . $path . $filter) as $filename) {

$file = new FileObj();

if (is_dir($filename))

{

$file->name = basename($filename);

$file->type = "d";

$file->size = "0";

} else {

$file->name = basename($filename);

$file->type = "f";

$file->size = filesize($filename);

}

$data[] = $file;

}

$count = count($data);

echo "{\"data\":" .json_encode($data). ", \"count\":" . json_encode($count) . "}";

}

?>

This returns data similar to:

{"data":[{"name":"FaceBook.png","type":"f","size":1331},{"name":"School_dance.jpg","type":"f","size":13576},{"name":"bbb-logo.jpg_600.jpg","type":"f","size":38843},{"name":"bbb_96.gif","type":"f","size":1320},{"name":"blogger_logo.jpg","type":"f","size":18175},{"name":"fztp020w_1.jpg","type":"f","size":46205},{"name":"live_sound_mo.jpg","type":"f","size":22116},{"name":"live_sound_system_rental_mo.jpg","type":"f","size":10794},{"name":"search-engine-optimization_102.png","type":"f","size":18850},{"name":"sound-main-mid-mo.jpg","type":"f","size":29101},{"name":"sound_man_1.jpg","type":"f","size":11412}], "count":11}

The editor declaration code looks like the following. This has gone through several experimental edits so hopefully it is close.

<textarea id="editor1" id="page_body" name="page_body" style="width: 100%; height: 300px;"><? echo $page_body;?></textarea>

<script>

$(document).ready(function() {

$("#editor1").kendoEditor({

encoded: false,

imageBrowser: {

transport: {

read: "/includes/kendoui/service/imagebrowser/read.php",

destroy: {

url: "/includes/kendoui/service/imagebrowser/destroy.php",

type: "POST"

},

create: {

url: "/includes/kendoui/service/imagebrowser/createDirectory.php",

type: "POST"

}, imageUrl: "/Company_Images/{0}"

},

path: "Company_Images/"

}

});

</script>

File: read.php

Editor

answered on 29 Jan 2013

1 answer

82 views

Setting MajorUnit = 0 causes an infinite loop

I found a bug where you set the "majorUnit" in an axis to 0, which causes an endless loop in the internals of the kendoChart() which will eventually end in a memory exception while creating an infinite number of labels.

To recreate it, I've attached the object that I passed into kendoChart() to make it happen, but it is yAxis[0].majorUnit = 0 that causes the issue.

The workaround is to not use zero as a "majorUnit". Does anyone have a better solution, or is there a fix coming?

{"theme":"default","title":{"text":"","visible":true},"chartArea":{"height":150,"width":600},"legend":{"position":"bottom","visible":true},"series":[{"type":"scatterLine","stack":false,"name":"","data":[]}],"tooltip":{"visible":true,"format":"{0:N0}m: {1:N2}"},"xAxis":[{"title":{"text":"Time (minutes)","visible":true},"labels":{"format":"{0}m"},"visible":true}],"yAxis":[{"title":{"text":"Solution","visible":true},"majorUnit":0,"visible":true}]}

Bill Wagner
Bill.wagner@srtsolutions.com

Charts

answered on 29 Jan 2013

1 answer

462 views

Treeview model binding to MVC Controller

Good day,

I currently have the following

@Html.Kendo().TreeView()
                            .Name("treeview")
                            .DragAndDrop(true)
                            .DataTextField("Name")
                            .Events(events => events
                                .DragEnd("Change")
                                .Select("Selected")
                                .Expand("OnExpand")
                                )
                            .DataSource(dataSource => dataSource
                                .Read(read => read
                                    .Action("GetTreeViewData", "Home"))
                        );

public JsonResult GetTreeViewData(int? id, string Type) /* how can I get my type property here? */
        {
            //data is returned from db - excluded for brevity
            return Json(data, JsonRequestBehavior.AllowGet);
        }

The question I have is I want, either in my MVC wrapper or through the js widgets to pass through a property called Type from my treeview back to the controller when I expand a Node. How would I go about getting this property to the server when expanding a node?
I explicitally need to know what method to call on the datasource object as I can't find a way to get this property from the client to the server, it's needed as I'm working with data with a composite key...

treeview.dataItem(e.node).Type (with Type being a property in my Json for the Node)

TreeView

answered on 29 Jan 2013