Questions on Kendo UI for jQuery Forum

0 answers

148 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

146 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

87 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

118 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

108 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

95 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

102 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

253 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

2 answers

278 views

Single column sorting - still able to have other columns sorted?

Dear support

Having a grid with multiple columns that is configured to single column sorting mode, I discovered that as soon as the grid is sorted by one column, the other columns get completely unordered.

Please see the attached image for an example

What I want to achieve is that even if the user actively sorts by one column (through clicking on the header), the other columns still have some meaningful (e.g. ascending) order.

So my question is:

Is it possible to tell a grid with single sort and client-side sorting to sort the other columns, too?

Thanks
Uwe

(Update: The original image was misleading, I added a better one)

Grid

answered on 16 Nov 2012