Questions on Kendo UI for jQuery Forum

3 answers

428 views

It seems that the detail template functionality is activated by the presence of an event handler for the detailInit event. My scenario requires that some rows have a detail template while others do not. I can make the determination whether a detail template is needed from withing detailInit, but I don't know how to use this information to optional disable the use of the template. Is this possible?

Grid

answered on 21 Oct 2014

2 answers

387 views

[Solved] Using an Autocomplete control inside a custom popup editor for a Grid

I'm using a custom template for my grid's popup editor, so I can only display the fields that may be edited. In this template, I'd like to use an an auto complete input. I've got it 'working': the control is in the editor template and does what an auto complete should do.

However, the box won't fill from the existing Grid data, and it won't save when I save the changes. How can I make sure Kendo still uses it as a field for my model, but also as an auto complete control?

The grid:

01.@(Html.Kendo().Grid<Receipt>()

02. .Name("GridReceipts")

03. .Columns(columns => {

04. columns.Bound(o => o.Id);

05. columns.Bound(o => o.Supplier);

06. columns.Bound(o => o.Status);

07. columns.Command(c => {

08. c.Edit().Text(" ");

09. c.Destroy().Text(" ");

10. });

11. })

12. .DataSource(d => d

13. .WebApi()

14. .Model(m => m.Id(o => o.Id))

15. .Create(c => c.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "Receipts" })))

16. .Read(c => c.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "Receipts" })))

17. .Update(c => c.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "Receipts", id = "{0}" })))

18. .Destroy(c => c.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "Receipts", id = "{0}" })))

19. )

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

21. .Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("Receipt"))

22. .Deferred()

23.)

The auto complete (in the editor template):

01.@model Receipt

02.

03.<div class="k-edit-label">@Html.LabelFor(m => m.Supplier)</div>

04. <div class="k-edit-field">

05. @(Html.Kendo().AutoCompleteFor(m => m.Supplier)

06. .Name("ACSupplier")

07. .DataSource(s => {

08. s.Read("Autocomplete", "Suppliers");

09. })

10. .DataTextField("Name")

11. .MinLength(2)

12. )

13.</div>

Grid

answered on 21 Oct 2014

1 answer

203 views

Grid DataSource & Web API

I have a Web API that is being hosted on one server. The actual website using kendo is hosted on a different server. Looking at samples, for the grid I have to provide a model like this:

@(Html.Kendo().Grid(Something.Account)
.Name("grid")
...

However, the model is on the other server. I guess I could copy over the dll with the model but that does not sound like a good approach. Isn't there somehow a way to do this dynamically by accessing the WebApi, discover the columns and then render them or something like that, hence the model would not be required.

Data Source

answered on 21 Oct 2014

1 answer

182 views

Chart Binding to shared DataSource

I am confused about chart behavior when the chart is bound to a datasource that is shared by multiple widgets.

Specifically, I have a chart and a grid that share a datasource. When I page through the data via the grid, the datasource is firing off change events but the chart seems to remain oblivious. So I had to write an extra function:

01.var statsByUserDataChange = function(e) {

02. var chart = $("#x-by-user").data("kendoChart");

03.

04. if( chart.dataSource.page() !== e.sender.page() ) {

05. chart.dataSource.page(e.sender.page());

06. }

07.

08. if( chart.dataSource.sort() !== e.sender.sort() ) {

09. chart.dataSource.sort(e.sender.sort());

10. }

11.

12. chart.refresh();

13.};

This function is used as the dataSource change event handler. If I just try chart.refresh() its as if the dataSource hasnt been changed even though it clearly has.

Questions:
Why is it that when the grid manipulates the dataSource and the refresh method on the chart is called, the chart data remains the same?
Is the above method the best way to tell the chart to change?

Charts

answered on 21 Oct 2014

2 answers

4.1K+ views

How to change input to textarea in popup editor

I am using popup editing in my grid. By default the popup editor renders input type=text elements. Is it possible to change that so it would render textarea elements instead?

Grid

answered on 21 Oct 2014

2 answers

155 views

Grid fails with 19 columns?

I'm trying to pass information through the model coming back from ajax call (json format) that is not displayed in the grid. This works fine for up to 18 columns (9 visible and used).

The second I add a 19th, everything stops working, the grid comes up with a very brief spinner, column headers and filters as programmed, but no rows displayed.

I know this isn't very specific, but does anyone have an idea where I'm going wrong?

I have had columns listed in the "columns" with the hidden attribute, I've also had fields passed in the data that are never referenced in the grid definition but are there when I populate my popup editor.

All of this works fine, until I return 19 data fields from my ajax web service.

Thanks, Bob

Grid

answered on 20 Oct 2014

2 answers

984 views

Update Footer Template of Column with ClientTemplate

<% this.Html.Kendo().Grid<EditablePlanejamentoDescarga>()

.Name("GridPlanejamento")

.Columns(columns =>

{

columns.Bound(c => c.TransportadorNome)

.Width(500)

.HeaderHtmlAttributes(new { style = "text-align: center; font-weight: bold" })

.ClientFooterTemplate(" TOTAIS :")

.FooterHtmlAttributes(new { style = "background-color:lightgray; text-align: right; font-weight :bold" });

columns.Bound(c => c.Domingo)

.Width(175)

.HtmlAttributes(new { style = "text-align: center" })

.HeaderHtmlAttributes(new { style = "text-align: center; font-weight: bold" })

.ClientTemplate("#= Domingo.QuantidadeFardos >0 ? Domingo.QuantidadeFardos :'' #")

.ClientFooterTemplate("#=sum#")

.FooterHtmlAttributes(new { style = "background-color:lightgray; text-align: right; font-weight :bold" });

columns.Bound(c => c.SegundaFeira)

.Width(175)

.HtmlAttributes(new { style = "text-align: center" })

.HeaderHtmlAttributes(new { style = "text-align: center; font-weight: bold" })

.ClientTemplate("#= SegundaFeira.QuantidadeFardos >0 ? SegundaFeira.QuantidadeFardos :'' #")

.ClientFooterTemplate("#=sum#")

.FooterHtmlAttributes(new { style = "background-color:lightgray; text-align: right; font-weight :bold" });

columns.Bound(c => c.TotalTransportador)

.HtmlAttributes(new { style = "background-color:lightgray; text-align: right; font-weight :bold" })

.HeaderHtmlAttributes(new { style = "text-align: center; font-weight: bold" })

.ClientTemplate("#= TransportadorNome == '' ? '' : TotalTransportador #")

.ClientFooterTemplate("#=sum#")

.FooterHtmlAttributes(new { id = "footerTotal", style = "background-color:lightgray; text-align: right; font-weight :bold" });

})

.DataSource(dataSource =>

{

dataSource.Ajax().Batch(true).ServerOperation(false);

dataSource.Ajax().Model(m =>

{

m.Id(i => i.TransportadorNome);

m.Field(f => f.TransportadorNome).Editable(false);

m.Field(f => f.TotalTransportador).Editable(false);

});

dataSource.Ajax().Aggregates(agg =>

{

agg.Add(a => a.Domingo.QuantidadeFardos).Sum();

agg.Add(a => a.SegundaFeira.QuantidadeFardos).Sum();

agg.Add(a => a.TotalTransportador).Sum();

});

})

.ToolBar(toolbar =>

{

toolbar.Save();

})

.Editable(e => e.Mode(Kendo.Mvc.UI.GridEditMode.InCell))

.Navigatable(n => n.Enabled(true))

.Events(e => e.DataBound("onDataBound").Edit("onEdit").Save("onSave"))

.Render();

%>

For columns c.Domingo and c.SegundaFeira the agg.Add(a => a.Domingo.QuantidadeFardos).Sum() and agg.Add(a => a.SegundaFeira.QuantidadeFardos).Sum() don't works.
I'm using a .ClientTemplate("#= SegundaFeira.QuantidadeFardos >0 ? SegundaFeira.QuantidadeFardos :'' #") to show cell value.
JavaScritp erro occours ' sum' is undefined.

But for the c.TotalTransportador columns works correctly.

Thanks,

Tiago.

Grid

answered on 20 Oct 2014

1 answer

145 views

[Solved] Grid doesn't look at column sizes when loaded but does when hiding/showing a column.

When all columns have set widths on a grid the first time it
loads if the combined width is less than the grid has available the columns
will be resized to fill the space. When a column is shown or hidden the columns
are resized to use their widths that are set from the beginning. I have come up
with a solution to the problem but I was curious of why this happens. When
showing/hiding a column a static width gets set to the table elements of the
combined width of the columns that are shown.

Why does the width get set if it doesn’t happen the first
time the grid loads?

My fix for this is to remove the table widths and allow it
to determine how large it needs to grow inside of its container.

I find that the results of removing the width on the table
has a better feel to the grid then adding it. Here is an example of this
behavior ( http://dojo.telerik.com/UKiF
) uncomment the $('#grid').find('[role="grid"]').css('width', ''); to
see my fix.

Grid

answered on 20 Oct 2014

1 answer

157 views

[Solved] Use ObservableArray with kendo-panel-bar

I've a kendo-panel-bar (using the AngularJs directive) which I would like to bind to a datasource. Unfortunately it seems like the panel bar cannot bind to a kendo.data.ObservableArray. Setting the datasource to an array works fine, setting it to an ObservableArray results in a "Cannot read property 'length' of undefined" exception.

I'm aware of the solution with k-rebind (provided here: https://github.com/kendo-labs/angular-kendo/issues/269) Since I want to use the panel bar bound to a Breeze datasource (which internally uses a ObservableArray), this is unfortunately not a solution for me.

Are there any other possibilities to have a panel bar bound to an ObservableArray?

PanelBar

answered on 20 Oct 2014

1 answer

214 views

Expand All/ Collapse All

Hello,

Is there a better way to set all parent tasks to have expanded set to true?
Currently, I'm clearing the content of my div and rebinding everything again with the expanded property to true.

Greatly appreciated.

Gantt

answered on 20 Oct 2014