Questions on Kendo UI for jQuery Forum

1 answer

298 views

How to style the last four row in my grid?I now can only style the last row

my grid is like this:
.Name(MyGrid)
.Columns(columns =>
{
columns.Bound(p => p.ProductID);
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice);
columns.Bound(p => p.UnitsInStock);
})

I can style one row like :

dataBound: function () {
$("#MyGrid tbody tr:last").addClass("customClass");
}

Grid

answered on 20 Aug 2013

3 answers

431 views

MVC Grid Binding a very complex Model object

I have a Model which I bind to:
  @(Html.Kendo().Grid(Model.AccountSummary.ClientAccountSummaries)

I am trying to add all the Account Currencies for each Client into a each cell.

                                  columns.Bound(e => e.Client).Template(@<text>
                                                        @foreach (var account in item.Client.Accounts)
                                                        {
                                                            Html.Raw(account.Currency);
                                                            <br/>
                                                        }

                                                    </text>)
                                            .Title("Type");

The code compiles and the objects are correct, but grid shows [object object] instead of "CDN<br>USD<br>EUR" in each cell. See image.

What am I missing here?

Grid

answered on 20 Aug 2013

3 answers

251 views

Notification Control

Recently, the Telerik ASP.Net Ajax released their Q2 with a nice & powerful "Notification" control. This control can be very useful with 3 tier apps using pure Ajax to notify actions that take place on the server or web service. I suggest to consider this control for future development.

..Ben

General Discussions

answered on 20 Aug 2013

5 answers

344 views

Possible Grid Bug - Inline Edit vs. Create

Hi,

I have a grid working nicely with fairly simple rows and inLine editing enabled. Everything is working fine except for a couple of small issues. Here they are:

I insert a row in the grid and fill it in. Click save. Row is committed as expected.
Without a refresh, I then click the edit button for the same row and attempt to make a change. Save is clicked again.
The row acts as if it's still in "Create" mode and the data is sent to the the Create controller action. As expected, that fails due to a primary key error of trying to insert the same row again.
I think this is incorrect. It should be sent to the Update/Edit action.
Please advise...

Here is the grid code:

@(Html.Kendo().Grid(Model.TimesheetDetails)

.Name("TimesheetDetailGrid")

.TableHtmlAttributes(new { style = "padding:0; margin:0;font-size:smaller;color:green" })

.Columns(columns =>

{

columns.Bound(x => x.Id).Hidden();

columns.Bound(x => x.TimesheetId).Hidden();

columns.Bound(x => x.CompanyId).Hidden();

columns.ForeignKey(p => p.JobCodeId, (System.Collections.IEnumerable)ViewData["JobCodes"], "Id", "JobCodeName")

.Title("Job Code")

.Width(150)

.HeaderHtmlAttributes(new { @class = "GridHeader" });

columns.Bound(x => x.Description)

.Width(250)

.Title("Description")

.HeaderHtmlAttributes(new { @class = "GridHeader" });

columns.Bound(x => x.WorkDate)

.Width(65)

.Title("Date")

.HeaderHtmlAttributes(new { @class = "GridHeader" });

columns.Bound(x => x.StartTime)

.Width(55)

.Title("Start")

.Format("{0:hh:mm}")

.HeaderHtmlAttributes(new { @class = "GridHeader" })

.HtmlAttributes(new { @class = "StartTime" });

columns.Bound(x => x.EndTime)

.Width(55)

.Title("End")

.Format("{0:hh:mm}")

.HeaderHtmlAttributes(new { @class = "GridHeader" })

.HtmlAttributes(new { @class = "EndTime" })

.ClientFooterTemplate("Hours: ");

columns.Bound(x => x.Duration)

.Width(55)

.Title("Hours")

.HeaderHtmlAttributes(new { @class = "GridHeader" })

.ClientFooterTemplate("#=kendo.toString(sum, '0.00') #");

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(122);

})

.ToolBar(toolbar => toolbar.Create())

.Editable(editable => editable.Mode(GridEditMode.InLine))

.Pageable(x => x

.PageSizes(true)

.PageSizes(new int[] { 2, 3, 4, 5, 10, 25, 100 }))

.Sortable()

.Events(events => events.Edit("onEdit"))

.Events(events => events.Save("onSave"))

//.Events(events => events.DataBound("gridDataBound"))

.DataSource(ds => ds

.Ajax()

.ServerOperation(true)

.PageSize(10)

.Model(m =>

{

m.Id(vm => vm.Id);

m.Field(vm => vm.Id).DefaultValue(Guid.NewGuid()).Editable(false);

m.Field(vm => vm.TimesheetId).DefaultValue(Model.Id).Editable(false);

m.Field(vm => vm.CompanyId).DefaultValue(Model.CompanyId).Editable(false);

m.Field(vm => vm.JobCodeId).DefaultValue(Guid.Empty);

m.Field(vm => vm.Duration);

})

.Aggregates(aggregates =>

{

aggregates.Add(p => p.Duration).Sum();

})

.Read(read => read.Action("TimesheetDetail_Json", "Timesheet", new { Id = Model.Id }))

.Create(update => update.Action("AddDetailRow_Json", "Timesheet"))

.Update(update => update.Action("EditDetailRow_Json", "Timesheet"))

.Destroy(update => update.Action("DeleteDetailRow_Json", "Timesheet"))

)

My other issue is that I cannot get the aggregations to refresh upon editing or inserting a row. I know that this happens when the datasource is refreshed and I've searched around for some more info. I tried this as the save event handler for the grid. No luck. BTW, the same behavior with or without the e.model.set line.

function onSave(e) {

var dataSource = this.dataSource;

e.model.one("change", function () {

dataSource.one("change", function () {

//alert(dataSource.aggregates().Amount.sum);

});

dataSource.fetch();

});

e.model.set("Duration", $("#Duration").val());

}

I'd appreciate any help.

Grid

answered on 20 Aug 2013

2 answers

292 views

Click to View Tooltip - Mobile

By default, the tooltip can be shown on hover or always on per the documentation.

If using dataviz with mobile, you don't have hover abilities. Clicking the point to show the tooltip would be optimal. Is there anyway to do this?

General Discussions

answered on 20 Aug 2013

1 answer

138 views

Help with panelbar.

Hello,

I'm trying to do a foreach inside of a panelbar, lika the code further down. But i keep getting an error Compiler Error Message: CS1593: Delegate 'System.Action' does not take 1 arguments. Some help would be appreciated:)

panelbar.Add().Text("Soprutter")
                .Content(
                @<div>
                    <table class="table-hover">
                        <thead>
                            <tr>
                                <th>Soprutter <a onclick="editGarbageRoute(@Model.ID)" href="#garbageModal" style="display:inline-block;margin-left:5px;" data-toggle="modal" class="tooltips small button icon green" title="Ändra soprutter" ><i class="icon-pencil"></i></a>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach(var item in Model.GarbageRoutes)
                            {
                                <tr>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.Description)
                                    </td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>);

PanelBar

answered on 20 Aug 2013

1 answer

132 views

Editor Tool Icons not displaying after ThemeBuilder theme applied

Hi,

I've recently used the ThemeBuilder to customize the Metro theme. I only changed a couple items, including the Selected/Hovered states of controls to be Blue instead of the Metro default color.

However, ever since then my Editors do not display the Tool icons. If I can remember properly, these icons were Grey and changing the CSS would not change this. Is there something I missed when applying my ThemeBuilder css? Do I also need to download an image pack from somewhere?

Any help would be much appreciated.

Thanks,
Landon

Editor

answered on 20 Aug 2013

1 answer

151 views

Badge on Button

Hi,

I have tried to add badge on buttons in my layout but failed...
Would you suggest how to do that?

One of the buttons is located in the navbar of the layout. Other buttons are located in the navbar of some of the views.
Thanks.

Button (Mobile)

answered on 20 Aug 2013

1 answer

193 views

Column Chart resolveColor() fails with 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'charAt'

When I use colorField: "Color" with named colors such as "Red", "Green" or "Yellow" in the data for a column chart the following error is thrown:

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'charAt'.

The color names work as expected in a donut chart.

I fixed this in the resolveColor function by adding the line

value = new String(value);

just after setting the default. In my case the color was passed from JSON data. The kendo.DataViz version is 2013.2.716.

Charts

answered on 20 Aug 2013

1 answer

164 views

Template not compiling

Hi there,

I have the following template defined in the page

<script id="templ" type="text/x-kendo-template">

#var gridID = ceFeature.config.currentGrid#
#console.log(gridID)#

# var columns = $("\\#" + gridID).data("kendoGrid").columns #
#console.log(columns)#

<tr data-uid="#= uid #" role='row' style="outline: 1px solid rgba(0, 0, 0, 0.15);">
#for(properties in columns) {#
# if (properties != 'remove') {#
#if (columns[properties].field == 'Id' || columns[properties].field == 'Hidetype') {#
<td role="gridcell" style="display:none;">#=data[columns[properties].field] #</td>
#}else {#
#if (data[columns[properties].field] != undefined) {#

#if (data[columns[properties].field].typeText == null) {#
<td role="gridcell" data-types= "#= data[columns[properties].field].types #" data-begin="#= data[columns[properties].field].beginOffset #" data-end="#= data[columns[properties].field].endOffset #">#= data[columns[properties].field].val #</td>
#} else {#

<td role="gridcell" data-types= "#= data[columns[properties].field].types #" data-begin="#= data[columns[properties].field].beginOffset #" data-end="#= data[columns[properties].field].endOffset #">#= data[columns[properties].field].typeText #</td>
#}#
#}#

#}#
#}#
#}#
</tr>
</script>

but I keep getting the error

Template.compilekendo.web.js:272b.extend.proxy.b.isFunction.ijquery-1.9.1.min.js:3processTablejsbin.html:319processChildrenjsbin.html:85(anonymous function)jsbin.html:107b.extend.eachjquery-1.9.1.min.js:3b.fn.b.eachjquery-1.9.1.min.js:3processChildren

attaching file for reference

Grid

answered on 20 Aug 2013