Questions on Kendo UI for jQuery Forum

3 answers

546 views

Hi, i can not paging the grid result, the data is ok, but the paging not work, please help my:
This is my code page aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="WebApplication3._default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Griglia</title>
        <script type="text/javascript" src="Scripts/KendoUi/jquery.min.js"></script>
    <script src="Scripts/KendoUi/kendo.all.min.js" type="text/javascript"></script>
        <link href="Styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
        <link href="Styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
         <style>
                #clientsDb {
                    width: 692px;
                    height: 393px;
                    margin: 30px auto;
                    padding: 51px 4px 0 4px;
                    background: url('../Images/clientsDb.png') no-repeat 0 0;
                }
            </style>

</head>
<body>
    <form id="form1" runat="server">
    <div id="example" >

             <div id="clientsDb">

                <div id="grid"></div>

            </div>
    </div>
        <script type="text/javascript">

            $(function () {
                $("#grid").kendoGrid({
                    dataSource: {
                        schema: {
                            data: "Comuni", total: "TotalCount", // ASMX services return JSON in the following format { "d": <result> }. Specify how to get the result.
                            model: { // define the model of the data source. Required for validation and property types.
                                id: "CapComId",
                                fields: {
                                    CapComId: { editable: false, nullable: true },
                                    CapComCod: { validation: { required: true} },
                                     CapComCom: { validation: { required: true} }
                                }
                            }
                         },

                        transport: {

                            read: {
                                url: "default.aspx/ListaComuni", //specify the URL which data should return the records. This is the Read method of the Products.asmx service.
                                contentType: "application/json; charset=utf-8", // tells the web service to serialize JSON
                                type: "POST" //use HTTP POST request as the default GET is not allowed for ASMX
                            },
                            parameterMap: function (data, operation) {
                                if (operation != "read") {
                                    // web service method parameters need to be send as JSON. The Create, Update and Destroy methods have a "products" parameter.
                                    return JSON.stringify({ comuni: data.models})
                                }
                            }
                        },
                         serverPaging: true,
                         serverFiltering: true,
                         pageSize:6
                    },
                    height: 300,
                    groupable: true,
                    scrollable: true,
                    sortable: true,
                    pageable: true,
                    columns: [{
                        field: "CapComCod",
                        width: 90,
                        title: "Cap"
                    }, {
                        field: "CapComCom",
                        title: "Comune"
                    }
                        ]
                });
            });

    </script>
    </form>
</body>
</html>

and page code c#

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web.Services;

namespace WebApplication3

{

public partial class _default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

[WebMethod]

public static IEnumerable<Comuni> ListaComuni()

{

using (var northwind = new DataClasses1DataContext())

{

var lista = northwind.CAPCOM.Where(row=> row.CapComId<100)

// Use a view model to avoid serializing internal Entity Framework properties as JSON

.Select(p => new Comuni()

{

CapComId = p.CapComId,

CapComCod = p.CapComCod,

CapComCom = p.CapComCom

})

.ToList();

return lista;

}

public class Comuni

{

public int CapComId { get; set; }

public string CapComCod { get; set; }

public string CapComCom { get; set; }

public int Total { get; set; }

}

The data is show ok , but the paging show 1 and not work..

I can not understand how I do, I help?

Thanks
Aurelio

Grid

answered on 17 Nov 2012

0 answers

152 views

Column Header Template - Group Columns with Header

Hi,

I have a grid with 7 x AM / PM columns and need to split each two by the day of the week. I have seen the columns.headerAttributes object but how would it be possible to share a header (eg. Monday) between two columns (AM/PM).

I know I could make css classes to show the header how I like but how would I share the day of the week over two classes? "Mon" in one class and "day" in the other would surely cause problems.

Thanks
Matt

Grid

asked on 17 Nov 2012

1 answer

152 views

ComboBox + Ajax + WCF = 'undefined' items in Combobox

I have a REST service that outputs the following json using GET:

[{"Active":true,"DisplayText":"Flyers","TemplateCategoryID":1},{"Active":true,"DisplayText":"Door Hangers","TemplateCategoryID":2},{"Active":true,"DisplayText":"Postcards","TemplateCategoryID":3},{"Active":true,"DisplayText":"Tri-Fold","TemplateCategoryID":4},{"Active":true,"DisplayText":"Facebook Graphics","TemplateCategoryID":5}]

My Combobox setup looks like this:

@(Html.Kendo().ComboBox()

.Name("templateCat") //The name of the combobox is mandatory. It specifies the "id" attribute of the widget.

.DataTextField("DisplayText") //Specifies which property of the Product to be used by the combobox as a text.

.DataValueField("TemplateCategoryID") //Specifies which property of the Product to be used by the combobox as a value.

.Filter(FilterType.Contains)

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetTemplateCategories", "Console"); //Set the Action and Controller name

});

})

.SelectedIndex(0) //Select first item.

)

My Controller:

public ActionResult GetTemplateCategories()

{

string baseAddress = string.Format(ConfigurationManager.AppSettings["MarketingServiceAddress"] + "GetTemplateCategories");

HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create(baseAddress);

request.Method = "GET";

request.ContentType = "text/plain";

using (HttpWebResponse response = request.GetResponse() as HttpWebResponse)

{

int statusCode = (int)response.StatusCode;

StreamReader reader = new StreamReader(response.GetResponseStream());

string results = reader.ReadToEnd();

return Json(results, JsonRequestBehavior.AllowGet);

}

My combobox looks like it is binding to some sort of data, but all items in the list are 'undefined'. What am I doing wrong? I have verified that the controller is receiving the json string just fine from service.

ComboBox

answered on 16 Nov 2012

0 answers

91 views

Memory leak if resizing is enabled

I'm noticed that Grid doesn't full dispose of all it's components when resizing option is enabled and Grid.destroy() is called. I confirmed with chrome, and there are widget elements retained in heap related to draggable and some other components.

Grid

asked on 16 Nov 2012

1 answer

130 views

Grid not displayed right after returning to the page through browser "back" button.

I have a grid, that works fine, when page gets through address or postback.
But if I load the page with the grid, go somewhere to other page, then return to th grid page through "Back" button in the browser, then the grid will display, populates with data, but all the columns and schema are lost.
It display all the columns (when only 5 of then should be displayed), type in the schema is not applied (date fileds are displayed as /Date12345... format) and no tempate are aplied to the fields where these templates are defined.

Help me please, this ruins my site!
I've tried to read data again with dataSource "read" method - everything the same.
If I press "F5", then grid will display normally.

Here is the code:
$(document).ready(function () {

var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "Courses.aspx",
contentType: "application/json",
dataType: "json",
cache:false
}
},
schema: {
data: "List",
total: "Total",
model: {
id: "ID",
fields: {
CourseVersionName: {
editable: false,
nullable: true
},
CourseName: {
editable: false,
nullable: true
},
CourseLanguage: {
editable: false,
nullable: true
},
Country: {
editable: false,
nullable: true
},
LastLoad: {
type: "Date",
editable: false,
nullable: true
},
QuestionsCount: {
editable: false,
nullable: true
},
ExpirationDate: {
type: "Date",
editable: false,
nullable: true
}
}
}
},
pageSize: 5,
serverPaging: true
});

$("#dataGrid").kendoGrid({
dataSource: dataSource,
columns: [
{ field: "CourseVersionName", title: "Course Version" },
{ field: "CourseName", title: "Course Name" },
{ field: "CourseLanguage", title: "Language" },
{ field: "Country", title: "Country" },
{ field: "LastLoad", title: "Course Loaded Date", sortable: true, template: '#=kendo.format("{0:dd.MM.yyyy}", LastLoad)#' },
{ field: "QuestionsCount", title: "Questions", template: '<a href="Questions.aspx?CourseID=${ ID }">Questions (${ QuestionsCount })</a>' },
{ field: "ExpirationDate", title: "Expiration Date", sortable: true, template: '#= ExpirationDate != null ? kendo.format("{0:dd.MM.yyyy}", ExpirationDate) : ""#' }
],
autoBind : false,
pageable: true
});

dataSource.read();

Grid

answered on 16 Nov 2012

1 answer

115 views

Back button

Hi,

How to add a back button form the navigation bar in scroll view based in your sample code?

Thanks

ScrollView (Mobile)

answered on 16 Nov 2012

1 answer

104 views

Column Chart with Stacked and No Stacked Series

I am trying to build a column chart with more than one series. One of the series I want stacked, the other I don't want stacked. Every way I try to do this, even if I say stack:false on the series that I don't want stacked, they get bundled in with the other series which are stacked. I've also tried using the group name and that works if I want both series to be stacked, but it won't allow one to be stacked and the other columns to not be.

Any advice?

Charts

answered on 16 Nov 2012

5 answers

1.2K+ views

Reposition Modal window on scrolling

Hello,
I have a page with many controls on the page. On a click of button a window opens in a modal form. But there is a scrollbar on the page. On scrolling , the modal kendo window moves below the page. I want it in center with the movement of scrollbar. Here is the code i am using.

$(

"#openButton").click(function () {

var window1 = $("#window").kendoWindow({
content: "Test.html",
title: " Window Content",
modal: true });

var window = $("#window").data("kendoWindow");
window.center();
window.open(); });

Thanks in advance.

Window

answered on 16 Nov 2012

1 answer

107 views

Kendo UI ListView is fail to appear on browser

Hi

I have written following code inside the View.

Razor View:
<div id="wrapper">
            <div class="SettingArea">
                @foreach (ModuleLinkViewModel moduleQuickLink in ViewBag.ModuleLinks as List<ModuleLinkViewModel>)
                {
                    <script type="text/x-kendo-tmpl" id="template">
                        <dl>
                             <div id="mainareaforsettingicons">
                                <div id="trans_bg">
                                    <div id="white_bg">
                                        <div id="settingicon">
                                            <dd><a href="@(Url.Content("~/" + (moduleQuickLink.Link)))" target="_self">
                                    <img src="@(Url.Content("~/Content/themes/default/images/Settings/") + (moduleQuickLink.Icon))" alt="@(moduleQuickLink.ToolTip)" border="0"/></a></dd>
                                        </div>
                                    </div>
                                </div>
                                <div id="reflaction">
                                    <dt><label>@(moduleQuickLink.Title)</label></dt>
                                </div>
                            </div>
                        </dl>
                    </script>
                }
                <div id="Configuration"></div>
                @{(Html.Kendo().ListView<ModuleLinkViewModel>()
                    .Name("Configuration")
                    .TagName("div")
                    .Pageable()
                    .ClientTemplateId("template")
                    .DataSource(dataSource => dataSource
                        .Read(read => read.Action("Read", "Configuration"))
                        .PageSize(20)
                        )
                ).Render();}
            </div>
            <div id="footer_line_grey">
            </div>
            <div id="footer_line_white">
            </div>
        </div>

Controller :
public ActionResult Index()
        {
            IEnumerable<ModuleLinkViewModel> moduleLinks = this.GetAllConfigSettings(string.Empty);
            ViewBag.ModuleLinks = moduleLinks;

            return this.View();
        }

        [OutputCache(Duration = 0, VaryByParam = "None")]
        public ActionResult Read([DataSourceRequest]DataSourceRequest request, string searchSettingKeyword)
        {
            IEnumerable<ModuleLinkViewModel> moduleLinks = this.GetAllConfigSettings(searchSettingKeyword);
            ViewBag.ModuleLinks = moduleLinks;

            return this.Json(moduleLinks.ToList().ToDataSourceResult(request));
        }

Now the problem is that when I do run the solution I could not able to see the ListView appearing on the page. But as and when I am seeing it's View Source I do able to see that all the necessary rows are appearing inside.

Can anyone please guide where am I doing mistake?

Sapan

ListView

answered on 16 Nov 2012

5 answers

257 views

bar/column/line chart displays value on a wrong place

Hello,

Based on your sample (http://jsbin.com/oxuvom/3/edit) I tried what happens if I have 2 rows of data and one of them has a missing value. In this case the values next to the missing one are shifted to a wrong place: http://jsbin.com/oxuvom/29/edit

Please let me know if I missed something.

Thanks,
Andras

Charts

answered on 16 Nov 2012