Questions on Kendo UI for jQuery Forum

1 answer

132 views

Hi! - Please check your demo NumberTextBox/ Basic Usage with Metro style by clicking the spinner. Colors at the border and background are not visible.

NumericTextBox

answered on 22 Nov 2012

2 answers

435 views

Model Binder fails to bind data from Grid (MVC4, KendoUI for Web)

I have an issue where I have defined and created my KendoUI Web Grid widget in javascript and am attempting to perform batch editing. I have followed all of the examples I can find, but when the "update" action executes on the controller, it fails to bind the data.

I have the following:
A Contact Model:

public class ContactModel

{

public int Id { get; set; }

public string FirstName { get; set; }

public string LastName { get; set; }

public string GenderCode { get; set; }

public DateTime BirthDate { get; set; }

public AddressModel Address { get; set; }

public string Email { get; set; }

public string Phone { get; set; }

public decimal DesiredSalary { get; set; }

}

A Controller Action defined to Update:

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult _UpdateGridData([DataSourceRequest] DataSourceRequest request, [Bind(Prefix="models")]IEnumerable<Models.ContactModel> models)

{

if (models != null && ModelState.IsValid)

{

foreach (var contact in models)

{

var target = model.Values.Where(x => x.Id == contact.Id).FirstOrDefault();

if (target != null)

{

target.LastName = contact.LastName;

target.FirstName = contact.FirstName;

target.BirthDate = contact.BirthDate;

target.GenderCode = contact.GenderCode;

}

return Json(ModelState.ToDataSourceResult());

}

And my Grid is configured in JavaScript:

// Create a Datasource.

var gridDataSource = new kendo.data.DataSource({

dataType: "json",

data: "Data",

transport: {

read: {

url: '@Url.Action("_GetGridData", "KendoGrid")',

dataType: "json"

},

update: {

url: '@Url.Action("_UpdateGridData", "KendoGrid")',

dataType: "json",

type: "POST"

}

},

pageSize: 10,

batch: true,

schema: {

model: {

id: "Id",

fields: {

Id: { type: "number", editable: false, nullable: true },

FirstName: { type: "string", validation: { required: true } },

LastName: { type: "string", validation: { required: true } },

GenderCode: { type: "string", nullable: true },

BirthDate: { type: "date" }

}

});

// Create a Grid using the above data source.

$("#inlinekendogrid").kendoGrid({

columns: [

{ field: "Id", title: "ID", width: 8, filterable: false, editable: false },

{ field: "FirstName", title: "First Name", width: 25 },

{ field: "LastName", title: "Last Name", width: 25 },

{ field: "GenderCode", title: "Gender", width: 25 },

{ field: "BirthDate", title: "Born", width: 25, format: "{0:MM/dd/yyyy}" }

],

editable: {

create: true,

update: true,

destroy: true,

confirmation: "Are you sure you wish to remove this entry?"

},

dataSource: gridDataSource,

sortable: {

mode: "multiple"

},

pageable: {

refresh: true,

pageSizes: true

},

selectable: true,

navigatable: true,

filterable: true

});

Everything seems to work fine except for it doesn't get bound to my ContactModel. The data coming up from the form is as follows:

Form Dataview URL encoded

models[0][Id]:2

models[0][FirstName]:Sally

models[0][LastName]:Shoreman22

models[0][GenderCode]:F

models[0][BirthDate]:Mon Sep 20 2010 00:00:00 GMT-0700 (Pacific Daylight Time)

models[0][Address][AddressLine1]:2 Way Street

models[0][Address][AddressLine2]:

models[0][Address][AddressLine3]:

models[0][Address][City]:Salem

models[0][Address][State]:OR

models[0][Address][ZipCode]:97312

models[0][Email]:salshor@saif.com

models[0][Phone]:

models[0][DesiredSalary]:0

I have not found any examples of people using Web Grid Widget in javascript with an MVC Controller. Is the mixing of the two what is causing my troubles? Do I need to configure the DataSource differently? Any help would be appreciated.

Grid

answered on 22 Nov 2012

0 answers

119 views

Hide Index button on tabstrip ?

Hi,

How do I hide the "Index" button that tabstrip shows at the buttom.

Very often the tab stop working after I click the Index button, the tab is not selected the blue line under icon just flashes once.

I'm using KendoUI with Cordova / Android.

TabStrip (Mobile)

asked on 22 Nov 2012

2 answers

211 views

Receiving metadata in the "save handler"

See doc here:
http://docs.kendoui.com/getting-started/web/upload/metadata#receiving-metadata-from-the-save-handler

What does the example code listed in this section of the doc have to do with receiving the metadata??? ...seems like you pasted the wrong example. How about showing us how to receive the metadata. I'm guessing it will be in the querystring?

Thanks.

Upload

answered on 22 Nov 2012

3 answers

693 views

[Solved] Async Upload with additional fields

I'm trying to upload a file to a document in CouchDB.
To do so, I need to provide the document identifier as part of the url AND a revision as an additional field. This is not a problem if I'm submitting a form with both inputs (revision and file) but I wonder if it is possible with asynchronous upload do something similar. Is it? How?

Upload

answered on 22 Nov 2012

3 answers

159 views

Since newest build I can no longer navigate to views using parameters

Since copying in the JS for the newest update (2012.3.1114) clicking on my a tag that links to a page using the syntax <a href=#judgeFight?fightId=1> gives me the error "GET http://localhost:6110/app/judgeFight?fightId=1 404 (Not Found)."
Once I drop in the JS for version 2012.2.710 my code works and navigates to the page correctly. What is going on here?

General Discussions

answered on 22 Nov 2012

2 answers

146 views

Themebuilder bookmarklet is empty

Hello,

When I start the Themebuilder bookmarklet on my own page, there appears no content in the Themebuilder. Any idea what the problem can be?
My page is using Kendo UI and Dataviz. IE10 and Chrome show the same problem.

Regards, Jaap

General Discussions

answered on 22 Nov 2012

0 answers

123 views

Which charts were not supported by kendo?

Can waterfall, Funnel,Pyramid charts supported by Kendo ui. If not is there any alternative.

Charts

asked on 22 Nov 2012

7 answers

414 views

Widgets that fill the Browser

I have a webpage that has a Map (google), Chart, and Grid. They share the screen via Splitters and TabStrips. I am having an impossible time making them expand to 100% of height/width of the space that they have available to their <divs>

I have created a stripped down JsFiddle that shows the problem: http://jsfiddle.net/drysg/Rh7cL/ Full Browser version: http://jsfiddle.net/drysg/Rh7cL/embedded/result/

I have tried all sorts of CSS tricks (display layout, block, using height: 100%, width: 100%, explicit setting of all width/height in the hierarchy. But nothing is working. I simplified the CSS to illustrate.

I am looking for a pure CSS solution that:

1. Expands Grid, Chart, and Map to fill the screen at outset
2. Browser Resize will dynamically resize the Grid, Map, and Chart
    (they will shrink to available space like any good WPF or Silverlight app!
3. If needed, I would tolerate a JQuery approach that responded to window resize events.

If you look closely you will see there are actually 4 issues:

1. The map height is not 100% of the needed space
2. The TabStrip that holds the Chart & Grid is not filling 100% of the height
2. There is a scrollbar on the TabStrip that holds the Chart
     and Grid (I want that removed since they should be filling the space)
3. What I do want is the scrollbar of the Grid to be working (and that way I won't have a scrollbar on the TabStrip)

The layout hierarchy is as follows:

I. Top Window
    1. Title DIV
    2. Splitter
        A. Map
        B. TabStrip
            i. Table DIV
                a. Menu
                b. Grid
            ii. Chart

General Discussions

answered on 22 Nov 2012

0 answers

174 views

How to make Gridview control to group in each column of data?

Hi, I have a web project which uses webform with Gridview to display the SQL server table data,

Data in Gridview Control is as this grid format:

Data 1 | Data 2 | Data 3 Amount1 Amount2 Amount3

Data 1 | Data 2 | Data3 Amount1 Amount2 Amount3

Data 1 | Data 2 | Data 3 Amount1 Amount2 Amount3

Ground Total: Gtotal1 Gtotal2 Gtotal3

I expact the data to be shown in the report in this way:

+Data1 Subtotal1 Subtotal2 Subtotal3

Ground total Gtotal1 Gtotal2 Gtotal2

Click +Data1 to expand it, it should be:

-Data1 Subtotal1 Subtotal2 Subtotal3

+Data2 SecondSubtotal1 SecondSubtotal2 SecondSubtotal3

Gtotal1 Gtotal2 Gtotal3

Click +Data2 to expand it, it should be:

-Data1 Subtotal1 Subtotal2 Subtotal3

-Data2 SecondSubtotal1 SecondSubtotal2 SecondSubtotal3

+Data3 ThirdSubtotal1 ThirdSubtotal2 ThirdSubtotal3

Gtotal1 Gtotal2 Gtotal3

Click +Data3 to expand it, it should be:

-Data1 Subtotal1 Subtotal2 Subtotal3

-Data2 SecondSubtotal1 SecondSubtotal2 SecondSubtotal3

-Data3 ThirdSubtotal1 ThirdSubtotal2 ThirdSubtotal3

DetailsAmt1 DetailsAmt2 DetailsAmt3

Ground Total Gtotal1 Gtotal2 Gtotal3

Of cause, the + and - sign in the report will be able to expand and collapse.

After did some search from the internet, somebody mention Jqgrid, or telirik tool, etc. but most of them are only works on first level of group, not more than one group, I appricate anybody can provide any solution to achieve this goal. Some examples will be helpful

Grid

asked on 21 Nov 2012