Questions on Kendo UI for jQuery Forum

1 answer

206 views

Hi,

Our client asked if this is possible.
I checked the API documentation but i cant find anything on it.

Is it possible to add a gradient/fading effect to the color band of a radial gauge.
I want the color band to start as red on the left and fade to green on the right. It will look much smoother than set colors in the band.

Regards,
Morne

LinearGauge

answered on 31 Oct 2012

1 answer

136 views

Back button not working in firefox

Im having trouble with the back button. For some reason when i hover my mouse over it in Firefox 16.0.1 it doesnt register it as a link when the data-role="backbutton" is applied. When i remove it it works great.

When I go into Safari, the back button works. Its weird, in FF the backbutton is styled pretty poorly, loooks like something isnt working. Any thoughts on this

<div data-role="pane" data-layout="side-default" data-transition="slide">

@* Menu: Level 1 *@

<div data-role="view" data-title="Centro Web Panel" id="side-root">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

</header>

<ul data-role="listview" data-style="inset" @*data-source="splitViewCategories" data-template="categoriesTemplate"*@>

@* TODO: Get rid of hard coded stuff *@

<li><a class="km-listview-link" href="#side-inbox" data-role="listview-link">Todo</a></li>

<li><a class="km-listview-link" href="" data-role="listview-link">Drafts</a></li>

<li><a class="km-listview-link" href="" data-role="listview-link">Pending</a></li>

<li><a class="km-listview-link" href="" data-role="listview-link">Completed</a></li>

</ul>

</div>

<div data-role="view" data-title="Todo" id="side-inbox">

<header data-role="header">

<div data-role="navbar">

<a id="back-button" class="nav-button" data-align="left" data-role="backbutton">Back</a>

<span data-role="view-title"></span>

</div>

</header>

<ul data-role="listview" data-style="inset">

<li><a class="km-listview-link" href="" data-role="listview-link">Cardiology</a></li>

<li><a class="km-listview-link" href="" data-role="listview-link">Radiology</a></li>

<li><a class="km-listview-link" href="" data-role="listview-link">All Patients</a></li>

</ul>

</div>

</div> @* --> end of left menu area *@

SplitView

answered on 31 Oct 2012

3 answers

141 views

kendo Grid

How to get and set value to particular cell of kendoGrid programmatically?

General Discussions

answered on 31 Oct 2012

0 answers

89 views

Getting JSON in the read

I use Inline Edit-Grid.data is read from the Web Server using JSON.

below is the read section of my grid

on parsing URL is not being generated.

What is the standard way of calling the Controller Action .(I am not using Kendo UI helpers)

dataSource = new kendo.data.DataSource({

transport: {

read: {

url: ('<%=Url.Action("GetUserList") %>'),

dataType: "json"

},

Grid

asked on 31 Oct 2012

6 answers

149 views

Reorder Column rejected

Hi,
When I set reorderable to true
Drag the column the x sign always shows and never allow me to drop the column in new place.
I wander why your example work and mine is not.

Best,

Grid

answered on 31 Oct 2012

2 answers

301 views

Problems filtering by foriegn key column

Hi. I have a grid with a foriegn key reference to "states". I was finally able to get the states column to display correctly and to behave when adding a new row or editing a new row. The problem that has now been pointed out is that the "filter" interface is trying to filter by the (integer) ID value rather than the displayed string value.

This is the Json "facility" object with the dependent State:

{"fclID":3,

"fclName":"TestFacility",

"fclActive":true,

"fclCity":"Mobile",

"stateID":3,

"state":{"country":null,

"stateID":3,

"stateName":"Alaska",

"stateAbbr":"AK",

"ctyID":1}

}

Here's a simplified version of my datasource:

var fclDataSource = new kendo.data.DataSource({ //datasource for grid

batch: false,

autosync: true,

transport: {

create: { url: "/DataService/InsertFacility",

dataType: "json",

cache: false

},

read: {

url: "/DataService/GetFacilities",

dataType: "json",

cache: false

},

update: {

url: "/DataService/UpdateFacility",

dataType: "json",

cache: false

}

},

schema: {

model: {

id: "fclID",

fields: {

fclName: { type: "string",

validation: { required: true }

},

fclCity: { type: "string" },

fclActive: { type: "boolean",

defaultValue: false

},

stateID: { type: "number",

validation: { required: true }

}

},

pageSize: 10

});

and Grid:

$('.adminboxlarge').append($('#admingrid').kendoGrid({

dataSource: fclDataSource,

height: 600,

width: 890,

filterable: true,

sortable: true,

pageable: true,

scrollable: false,

toolbar: [

{ name: "create", text: "Add Facility"} //button to add new row

],

columns: [

{

field: "fclName",

title: "Name",

editable: true,

filterable: true

//width: 250

}, {

field: "fclCity",

title: "City",

editable: true,

filterable: true

//width: 75

}, {

//field: "state.stateAbbr",

field: "stateID",

template: "#=state.stateAbbr#",

title: "State",

editor: facilityStateEditor,

editable: true,

filterable: true

//width: 75

}, {

command: [

{ name: "edit", text: "" }

]

//width: 50

}

],

editable: {

mode: "inline",

update: true, // puts the row in edit mode when it is clicked

destroy: false, // does not remove the row when it is deleted, but marks it for deletion

},

edit: function () {

curr_container = this._editContainer; //selects the current edit container

//deletes the text from the "Update" and "Cancel" buttons

$(curr_container).find("a.k-grid-update").text("").append('<span class="k-icon k-update"/>');

$(curr_container).find("a.k-grid-cancel").text("").append('<span class="k-icon k-cancel"/>');

}

})

)

And combo box editor.

function facilityStateEditor(container, options) { //defines facility combobox

$('<input data-text-field="stateName" data-value-field="stateID" data-bind="value:' + options.field + '"/>')

.appendTo(container)

.kendoDropDownList({

dataSource: fclstateDataSource,

dataTextField: "stateName",

dataValueField: "stateID"

});

};

This all works when I reference the parameter for the dependent object as the column field (state.stateAbbr). However, when I try to filter by this column, I get the filter choices for a number column, not a string column. If I change the column value to "state" instead of "stateID", the filtering won't work because it tries to convert the state object to lowercase. If I specify stateAbbr, the display property of the state object, I get errors when attempting to edit or add a new item.

I tried to use paramter mapping in the datasource to add a stateAbbr property to the JSon object, but the documentation is pretty sparse and I wasn't able to get any of my attempts to work.

If it's possible to display other attributes of a foriegn key column, it seems it should be possible to set what attribute is used for filtering. That's all I'm really looking for: a way to define the filter parameter to be the same as the display template.

Over the last week, as I've tried to google my way through configuring the database and grid for foriegn keys, I've run across all sorts of easter eggs and undocumented functionality in Kendo. I'm hoping this is another one of those instances where there's a column attribute I just wasn't finding.

Grid

answered on 31 Oct 2012

1 answer

242 views

Custom Editor (Dropdown) not sending default values on CRUD add

I've run into a problem insofar as I've managed to get a complex foreign key editor to work with basic CRUD on the grid. However, upon adding new rows, if the drop downs are left unchanged from their initial state, no data is sent to the server for the add, showing 'undefined' in the colums and sending nulls to the add method.

I'm sure this is something to do with the defaultValue option on the model but can't find any reference on the forums

any help appreciated.

VS2012 project attached.

Grid

answered on 31 Oct 2012

0 answers

218 views

Updating dataSource after Adding a new item in Grid

I have the Grids set up in a few places on my site and they are working well except when I create a new item. The item is sent to the controller correctly, written to the database and then wrapped in JSON with the new ID and sent back out to the site correctly (I tracked it in Firebug and the JSON is well formed with no errors). How do I bind this back to the dataSource and replace the new line? If I click Update on the row it creates another new item instead of updating the current.

Grid Code

<%: Html.Kendo().Grid<Thread.Data.Models.Model>()

.Name("Grid")

.Columns(columns =>

{

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(190).HtmlAttributes(new { style = "text-align:center;" });

columns.Bound(m => m.ModelID).Hidden();

columns.Bound(m => m.ModelName).Width(140);

columns.Bound(m => m.Company).Width(160).ClientTemplate("#= (typeof Company === 'undefined') ? ' ' : Company.CompanyName #").EditorTemplateName("CompanyDropDownList");

columns.Bound(m => m.Job).Width(160).ClientTemplate("#= (typeof Job === 'undefined') ? ' ' : Job.JobName #").EditorTemplateName("JobDropDownList");

columns.Bound(m => m.TempModelNumberFlag).Width(100);

columns.Bound(m => m.IsCarryOver).Width(100);

columns.Bound(m => m.HoursEstimate).Width(120).ClientTemplate("#= (HoursEstimate === null) ? ' ' : HoursEstimate #");

columns.Bound(m => m.Description).Width(140).ClientTemplate("#= (Description === 'null') ? ' ' : Description #");

columns.Bound(m => m.RetailIntroDate).Width(140).Format("{0:d}");

})

.ClientDetailTemplateId("jobDetailTemplate")

.ToolBar(toolBar =>

{

toolBar.Create();

})

.Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.InLine))

.HtmlAttributes(new { style = "height: 675px" })

.Pageable()

.Sortable()

.Scrollable()

.Selectable()

.Filterable()

.Events(events => events.DataBound("dataBound"))

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.PageSize(15)

.Events(events => events.Error("error_handler"))

.Model(model =>

{

model.Id(j => j.ModelID);

model.Field(j => j.ModelID).Editable(false);

model.Field(j => j.AlertCount).Editable(false);

model.Field(j => j.ArticleCount).Editable(false);

model.Field(j => j.DocumentCount).Editable(false);

})

.Read(read => read.Action("Model_Read", "Models"))

.Update(update => update.Action("Model_Save", "Models"))

.Create(create => create.Action("Model_Save", "Models"))

.Destroy(destroy => destroy.Action("Model_Destroy", "Models"))

)

%>

In the Controller, after the save I return this:
return Json(new[] { results.ToList()[0] }.ToDataSourceResult(request, ModelState));

The JSON returned is fine and has the ID:

Data

[Object { ModelID=6

, ModelName="Test IV"

, ModelNumber="DSAF", more...}]

Total 1

AggregateResults null

Errors null

Can this rebind or do I have to call Read and reload the whole dataSource? And if so how do I do either one of those.

Thanks,

Matt

Grid

asked on 30 Oct 2012

0 answers

111 views

Upload one file or all selected files

Hi,

I have a webpage with a button upload in the upper section of the page.

When the user click this button he can select one or multiples files to upload.

I added an handler to the select method of the kendo ui upload control.

For each file selected I call a jquery template to show the information of the selected file with two button (Upload and Cancel).

So if I select 2 files I will will call 2 times this template and render it for each file.

I have a button Upload All too in my webpage.

So my goal is to have the possibility to upload only one file or all and to have a progress bar.

It is possible with Kendo UI upload control ?

Thank you

Upload

asked on 30 Oct 2012

1 answer

96 views

Hierarchy with Detail Editing?

I have a grid that uses the hierarchy feature.

Is it possible to have inline editing for the child rows?

I can get it to work for the parent rows, but the update button doesn't do anything with the child rows.

Grid

answered on 30 Oct 2012