Questions on Kendo UI for jQuery Forum

2 answers

749 views

Complete translation/localisation of a kendo ui html application

Hi,

i am new to kendo ui and wrote my first kendo html app. Its working fine but know i have to translate them in different languages liek french, german or dutch.

I spend know several days here in the forum and on google to find a continuous line for that, but i didn' catch it so far. What i read here from post of 2012/203 that this is on the todo list, but i think in 2015 this should be completed .What i already have learnd that it is possible to display widgets in an other language

But what abou the rest ? I saw an example (could'nt find it any longer) where other parts of the html side were translatedt via a observerable and bind construct, but this could'nt be the best practise for that.

As concrete example my question is how to translate the terms "Print","Filter" and 'Suche' in this construct of a kendoToolBar:

$("#toolbar").kendoToolBar({
items: [
{ type: "button", text: "Print" , id: "btnPrintPdf" },
{ type: "button", text: speech.anzeige , id: "btnShowPdf"},
{ type: "separator" },
{ template: "<label >Filter : </label>" },
{
template: "<input class=k-textbox type=text id='txtSearchString' placeholder='Suche'>",
overflow: "never"
},

{ type: "button", text: "Search", id: "btnSearch" },

{ type: "separator" }
]
});

So , waht is the best way to do that ?

- use the bind construct

- use templates

- use an external jquery plugin ?

A small demo app where the language can be switched at runtime would be nice to see the best practise.

Regards

Dirk

General Discussions

answered on 22 Oct 2015

16 answers

496 views

Filtering support for PivotGrid/PivotDataSource

Is filtering for PivotGrid currently supported, or will be supported in the near future? Is it possible to implement (via built in UI or programatically) server-side filtering when the PivotDataSource is bound to an XMLA source?

The filtering box is missing from the PivotConfigurator UI - competing products have this feature, e.g. Ignite UI (http://www.igniteui.com/pivot-grid/remote-adomd-provider), Flexmonster (http://www.flexmonster.com/Demo/flash-pivot-table-component-demo-filter), Syncfusion Essential JS (http://js.syncfusion.com/demos/web/#!/azure/olapclient/DefaultFunctionalities).

PivotGrid

answered on 22 Oct 2015

3 answers

5.5K+ views

Styling individual cells of grid with a template?

Hello all,
I'm new to using KendoUI, so I'm guessing there's an easy way to do this that I'm just not seeing. I have templates for rows to alternate colors, but I would like certain cells to change their styling depending upon whether or not they have particular content in them. What would be the best way to make that happen?

Thanks!

Grid

answered on 22 Oct 2015

1 answer

290 views

JavaScript API method for reload/refresh

Hi,

Is there a method in the diagram JavaScript API to reload or refresh the diagram (such as when the underlying data source and connections data source change)?

If not, what is the recommended set of steps for doing so? Reassign the data source and connections data source?

thanks,

Derek

Diagram

answered on 22 Oct 2015

1 answer

683 views

AddRow by JavaScript after GRID is ready

I want to add row to kendo Grid with inline edit support. I need to do it after grid is initialized and data are loaded and displayed.

When i try this in DataBound event, addRow cause DataBound event again and become never ending loop. It is posible to know when is grid ready, data loaded and displayed ? Thanks for help!

My grid code:

@(Html.Kendo().Grid<TT.Web.Models.ViewModel.WorkViewModel>()

.Name("gridAdd")

.Events(events => events.Edit("gridEdit").DataBound("databoundinitAdd").Save("gridAddSaveChanges"))

.Columns(columns =>

{

columns.Template(x => x.Id)

.HeaderTemplate("<input id='mastercheckbox' type='checkbox'/>")

.ClientTemplate("#if(Status == 0 || Status == 3) {# <input type='checkbox' name='checkedRecords' value='#= Id #' class='checkboxGroups'/> #} #")

.Width(30)

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

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

columns.Template(@<text></text>).Title("Status").ClientTemplate("#if(Status == 0) {# <i class='fa fa-bolt icc'></i> #}#" + "#if(Status == 1) {# <i class='fa fa-paper-plane icc'></i> #}#" + "#if(Status == 2) {# <i class='fa fa-check-square-o icc'></i> #}#" + "#if(Status == 3) {# <a class='popoverEl' data-toggle='popover' data-trigger='hover' tabindex='0' title='Důvod zamítnutí' data-content='#=RejectionReason#' ><i class='fa fa-ban icc popoverEl' ></i></a> #}#").HtmlAttributes(new { @class = "icc" });

columns.Bound(work => work.Date).EditorTemplateName("WorkDate").Title(@L("Date"));

columns.Bound(work => work.Project).ClientTemplate("#=Project.Name#").Width(250).Title(@L("ProjectNameP")); // .ClientTemplate("#=Project.Name#")

columns.Bound(work => work.Spp).ClientTemplate("#=Spp.Code#").Width(100);

columns.Bound(work => work.Operation).ClientTemplate("#=Operation.Code#").Width(100).Title(@L("TypeOfOperation"));

columns.Bound(work => work.Hours).Title(@L("Hours"));

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

columns.Template(@<text></text>).ClientTemplate(

"<div class='btn-group'>" +

"#if(Status == 0 || Status == 3 ) {# <a class='btn btn-success btn-sm k-button-icontext k-grid-edit'><i class='fa fa-pencil'></i></a>#}#" +

"#if(Status == 0 || Status == 3 ) {# <a class='btn btn-sm btn-primary sendToApprove' data-href='" + Url.Action("WorkToApprove", "Home") + "/#=Id#'><i class='fa fa-paper-plane'></i></a>#}#"

+ "#if(Status == 0 ) {# <a data-href='" + Url.Action("WorkDelete", "Home") + "/#=Id#' class='btn btn-sm btn-danger delete-work-item' ><i class='fa fa-times'></i></a>#}#"

+ "</div>"

).Width(130);

})

.ToolBar(toolbar =>

{

toolbar.Create().Text(@L("AddRecord"));

//toolbar.Save();

})

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

.DataSource(dataSource => dataSource

.Ajax()

.Batch(false)

.Events(events => events.RequestEnd("OnRequestEnd_TopLinePriceGrid"))

.PageSize(20)

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

.Model(model =>

{

model.Id(p => p.Id);

model.Field(p => p.Operation).DefaultValue(ViewData["defaultOperation"] as TT.Web.Models.ViewModel.OperationViewModel);

model.Field(p => p.Spp).DefaultValue(ViewData["defaultSpp"] as TT.Web.Models.ViewModel.SppViewModel);

model.Field(p => p.Project).DefaultValue(ViewData["defaultProject"] as TT.Web.Models.ViewModel.ProjectViewModel);

})

.Read(read => read.Action("WorkRead", "Home").Data("currentWeekInfo")) // Přidádo HTTP parametr s vybranným týdnem

.Create(update => update.Action("EditingInline_Create", "Home").Data("currentWeekInfo"))

.Update(update => update.Action("EditingInline_Update", "Home").Data("currentWeekInfo"))

.Destroy(update => update.Action("EditingInline_Destroy", "Home").Data("currentWeekInfo"))

)

.Pageable() // Enable paging

.Sortable() // Enable sorting

)

Add row code fired in DataBound event => cause never ending loop, becouse addRow cause DataBound event:

function gridAdd(){

var grid = $("#gridAdd").data("kendoGrid");

grid.addRow();

}

Grid

answered on 22 Oct 2015

12 answers

401 views

Memory Leak in window

Hi All

I'm using kendo ui with angular and I'm having some issue with Window closing.

It seems to leave all sub elements detached DOM trees.

I found this link so I added a on destroy functionality that traverses all elements and unbind all events empty the html and removes it .

I addition I'm running a garbage collector of my own to remove JQuery cache elements manually.

I'm Attaching a sample code of the problem. to view th issue I used chrome dev tools.

I took a snapshot before and after the 20 windows were opened and closed and each one appears in the comparison tab as a detached DOM tree.

Any Input will be appreciated.

Window

answered on 22 Oct 2015

4 answers

357 views

[Solved] set selected node using angular.

Works fine using jQuery..

var treeview = $("#treeview").data("kendoTreeView");

var bar = treeview.findByText("bar");

treeview.select(bar)

not sure how to do it the "angular way"

TreeView

answered on 22 Oct 2015

1 answer

120 views

[Solved] Odd behaviour incell editing with KendoSortable

When a grid is set to incell editing and KendoSortable is applied to the grid, the fields don't update properly when clicking in another editable cell, reverting to the old value instead. Clicking outside the grid updates the fields properly. This doesn't seem to apply to boolean and date fields. I've prepared a JSFiddle that shows this behaviour. The version we're using is 2015.3.930.

The fiddle: http://jsfiddle.net/hw87dnxv/5/

Grid

answered on 22 Oct 2015

3 answers

154 views

[Solved] Pageable grid with link to another page

Hello,

I have pageable grid where one column has links with parameters to another detail page. The problem, if, for example, page 3 is active and I click on link and then go back using browser's Back button, I am landing on first page. It is very inconvenient especially with big grids. Is any way to go back to previously active page?

I tried to pass active page number as parameter and go back with special Back button with same page number, but problem that some detail pages can be reached from different sources.

Thank you in advance.

http://jsbin.com/gadocozaga/1/edit?js,output

Grid

answered on 22 Oct 2015

3 answers

240 views

Pasting Images in IE10+

Hello,

Why can I paste images when running yours demo (http://demos.telerik.com/kendo-ui/editor/index) but I am not able to paste images in my own application using IE 10 or 11. What do I need to do to support pasting images in IE.

Note that I am able to paste images in FF and Chrome.

Thanks, Dan

Editor

answered on 22 Oct 2015