Questions on Kendo UI for jQuery Forum

1 answer

204 views

Scheduler doesn't update it's layout when parent container size changes

We have a scheduler nested inside a div element. This div element can change its width.

When the container div changes its width, the schedule elements no longer align correctly on the calendar.

See this Plunker snippet for a demonstration of the problem: http://plnkr.co/edit/UlHFtkvHHtIStnHEnOP9?p=preview

After you've pressed the "Toggle Left Bar" button, you see that "Alex's Birthday" now straddles two days.

Is there are workaround to this problem?

Our code base is arranged so that the parent control knows nothing about the child controls hosted within it.

Scheduler

answered on 22 Jan 2016

2 answers

225 views

Cannot read property '_continuousEvents' of undefined

I have created a schedule and allowed for the user to filter the people (grouping) that are shown on the schedule. When I retrieve the filtered people (I only have one, I call:

j$("#scheduler").data("kendoScheduler").resources[0].dataSource.read();

After, I read and refresh my schedule, first retrieving data and assigning to an array, and then calling:

scheduler.dataSource.read();

The first time that I do this, I get an error from executing that line saying "Cannot read property '_continuousEvents' of undefined". However, if I filter the people anytime after that, I don't get an error and everything completes successfully. Any ideas?

Scheduler

answered on 22 Jan 2016

12 answers

1.0K+ views

Returning Total for ServerPaging

Hi,

I have two tables "Workers" and "Skills" with Many-to-Many relationship. I want to populate a kendoGrid for workers which should allow to filter on Skills. For this I've create a Web API controller which is returning the first row to avoid duplicates because of Many-to-Many:

Return query.GroupBy(Function(t) t.WorkerID).Select(Function(grp) grp.First()).AsQueryable()

In this scenario how can I return the Total for kendo"DataSource" object to make the ServerPaging work?

Thanks.

Grid

answered on 22 Jan 2016

1 answer

222 views

Data binding in filter menu item template

We are using the filter menu in the grid in each column and have a situation where we can switch the data in the column between the description or the code. We would like to be able to do this for the values displayed in the filter menu for each column.

We are using a custom item template for the multi-select check boxes, and are using #= xxxx # notation to set the text to be displayed.

It seems that this notation is a one time replacement, rather than a binding? (We're new to kendo, and have a background in angular)

Is it possible to bind values to the items returned from the filterable datasource and have them update if we change them in code?

I just tried adding a span with data-bind, instead of the #= xxx # notation but that didn't work, so I assume that there is some other magic that needs doing?

Grid

answered on 22 Jan 2016

1 answer

126 views

[Solved] To get the orderId of the proper order is?

Hi.
Task is I want to get the orderId the appropriate value is entered when it is added.
rather than the appropriate value be acquired orderId at the timing of the add, 0 Contains.
Is there get the appropriate value has entered orderId at the timing of the add?

$("#gantt").kendoGantt({

dataSource: [

{

id: 1,

orderId: 0,

parentId: null,

title: "Task1",

start: new Date("2014/6/17 9:00"),

end: new Date("2014/6/17 11:00")

}

],

add: function(e) {

console.log(e.task.orderId); // If you want to output a 1 is output is zero

}

});

Thanks.

Gantt

answered on 22 Jan 2016

1 answer

1.4K+ views

Grid with Cascading Dropdown Lists

Hello all,

I am having difficulties wiring up cascading dropdown lists in a Grid.

I have a Grid bound to a remote datasource. The Grid is set to inline edit mode.

I have a custom editor created for two columns (Make, Model).

When a row is edited I need the currently selected Make to be selected in make DropDown and the currently selected Model to be selected in the model dropdown. However I cannot seem to get the ID of the currently selected Make when a row becomes editable so that I can make an API call to get the valid makes for the selected Model to populate the model dropdown. And I cannot just reference the selected value of the Make dropdown because it isn't initialized yet.

Any thoughts?

Grid

answered on 21 Jan 2016

1 answer

878 views

Grid Loading Icon Position

I have a grid that we are paging at 1000 results per page. The only issue we are having is that the loading icon for the grid is not seen by the users at it shows in the center of the grid, which you have to scroll very far to see. Is there a way to position the loading icon to be towards the top of the grid so that it is visible even with a large number of results?

Thanks,

Jim

Grid

answered on 21 Jan 2016

1 answer

244 views

Grid inside Popup Template

Hello, I'm building a grid with a editor in popup mode, with a custom template like this:

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

<div class="k-edit-label">

<label for="Transporte">Transporte</label>

</div>

<div class="k-edit-field"> #=Transporte# </div>

<div class="k-edit-label">

<label for="Trayecto">Trayecto</label>

</div>

<div class="k-edit-field"> #=Trayecto# </div>

<div class="k-edit-label">

<label for="Cobertura">Cobertura</label>

</div>

<div class="k-edit-field"> #=Cobertura# </div>

<div class="k-edit-label">

<label for="TasaCobertura">Tasa Cobertura</label>

</div>

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

<input type="text" name="TasaCobertura" data-bind="value:TasaCobertura">

</div>

<div class="k-edit-label">

<label for="Mercancia">Mercancía</label>

</div>

<div class="k-edit-field"> #=Mercancia# </div>

<div class="k-edit-label">

<label for="TasaMercancia">Tasa Mercancia</label>

</div>

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

<input type="text" name="TasaMercancia" data-bind="value:TasaMercancia">

</div>

<div class="k-edit-label">

<label for="Embalaje">Embalaje</label>

</div>

<div class="k-edit-field"> #=Embalaje# </div>

<div class="k-edit-label">

<label for="TasaEmbalaje">Tasa Embalaje</label>

</div>

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

<input type="text" name="TasaEmbalaje" data-bind="value:TasaEmbalaje">

</div>

<div class="k-edit-label">

<label for="AltoRiesgo">Alto Riesgo</label>

</div>

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

<input type="checkbox" id="AltoRiesgo" class="k-input k-checkbox" data-bind="value:AltoRiesgo" disabled="disabled"/>

</div>

</script>

Now, I want to create a Grid inside this template, the source of the grid is the "LstCatalogoCoberturas" field, but I don't know how create this grid, I search some examples about autocomplete or combobox and works fine, but not with a grid, can you help me providing a example please?, so many thanks!, regards.

PD: this is my model:

schema: {

model: {

id: "CatalogoProductoId",

fields: {

CatalogoProductoId: {type: 'number', editable: false},

MercanciaId: { type: 'number', nullable: false, editable: false },

Mercancia: { type: 'string', editable: false },

TasaMercancia: { type: 'number', editable: true, validation: { required: true } },

Embalaje: { type: 'string', editable: false },

EmbalajeId: { type: 'number', nullable: false, editable: false },

TasaEmbalaje: { type: 'number', editable: true, validation: { required: true } },

Transporte: { type: 'string', editable: false },

TransporteId: {type: 'number', editable: false },

Trayecto: { type: 'string', editable: false },

TrayectoId: {type: 'number', editable: false },

AltoRiesgo: { type: "boolean", editable: false },

Cobertura: { type: 'string', editable: false },

CoberturaID: {type: 'number', editable: false },

TasaCobertura: { type: 'number', editable: true, validation: { required: true } },

TipoBien: { type: 'string', editable: false },

TipoBienId: {type: 'number', editable: false },

MinutaTransporte: { type: 'string', editable: false },

MontoMaximoEmbarque: {type: 'number', editable: false},

CatalogoProductoItemId: {type: 'number', editable: false},

LstCatalogoClausulas: [

{

ClausulaId: { type: "number" },

TipoClausula: { type: "number" }

}],

LstCatalogoCoberturas: [

{

CoberturaId: { type: "number" },

TasaCobertura: { type: "number" },

TipoCobertura: { type: "number" }

}]

}

            model: {
                  id: "CatalogoProductoId",
                  fields: {
                      CatalogoProductoId: {type: 'number', editable: false},
                      MercanciaId: { type: 'number', nullable: false, editable: false },
                      Mercancia: { type: 'string', editable: false },
                      TasaMercancia: { type: 'number', editable: true, validation: { required: true } },
                      Embalaje: { type: 'string', editable: false },
                      EmbalajeId: { type: 'number', nullable: false, editable: false },
                      TasaEmbalaje: { type: 'number', editable: true, validation: { required: true } },
                      Transporte: { type: 'string', editable: false },
                      TransporteId: {type: 'number', editable: false },
                      Trayecto: { type: 'string', editable: false },
                      TrayectoId: {type: 'number', editable: false },
                      AltoRiesgo: { type: "boolean", editable: false },
                      Cobertura: { type: 'string', editable: false },
                      CoberturaID: {type: 'number', editable: false },
                      TasaCobertura: { type: 'number', editable: true, validation: { required: true } },
                      TipoBien: { type: 'string', editable: false },
                      TipoBienId: {type: 'number', editable: false },
                      MinutaTransporte: { type: 'string', editable: false },
                      MontoMaximoEmbarque: {type: 'number', editable: false},
                      CatalogoProductoItemId: {type: 'number', editable: false},
                      LstCatalogoClausulas: [
                      {
                          ClausulaId: { type: "number" },
                          TipoClausula: { type: "number" }
                      }],
                      LstCatalogoCoberturas: [
                      {
                          CoberturaId: { type: "number" },
                          TasaCobertura: { type: "number" },
                          TipoCobertura: { type: "number" }
                      }]
                  }
              }
          }     

Templates

answered on 21 Jan 2016

2 answers

377 views

Display dropdownlist in Grid with inline batch editing

I am trying to follow this example http://demos.telerik.com/aspnet-mvc/grid/editing-custom to display dropdown when user clicks on grid cell. However everytime when i view the grid, it only shows text 'undefined' instead of the actual dropdownlist.

Here is what i did:

ViewModel:

public class CommonDetailsViewModel

{

public List<UOMItem> UOMs { get; set; }

}

public class UOMItem

{

public string UserDefinedCode {get; set;}

}

Controller:

CommonDetailsViewModel commonDetailsViewModel = commonService.InvokeGetCommonDetails(flag);

var uomList = new SelectList(commonDetailsViewModel.UOMs, "UserDefinedCode", "UserDefinedCode");

ViewData["UOMList"] = uomList;

ClientTemplates: Added UOM.cshtml inside 'Views/Shared/ClientTemplates' folder

@using System.Collections

@using Kendo.Mvc.UI;

@(Html.Kendo().DropDownList()

.BindTo((IEnumerable)ViewData["UOMList"])

.OptionLabel("- Select UOM - ")

.DataValueField("UserDefinedCode")

.DataTextField("UserDefinedCode")

)

View:

@(Html.Kendo().Grid<SupplierPortal.ViewModels.CreateAsnRequestViewModel>()

.Name("GridViewOpenPOSelected")

.Columns(columns =>

{

columns.Bound(p => p.UPCUOM).HtmlAttributes(new { @class = "editableFiled" }).ClientTemplate("#=UOM.UserDefinedCode#").Width(180);

})

.Editable(editable => editable.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false))

.AutoBind(false)

.Navigatable()

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.PageSize(10)

.Read(read => read.Action("GetSelectedPO", "Asn").Data("GetSelectedPOParameters"))

.ServerOperation(false)

.Model(model =>

{

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

model.Field(p => p.UPCUOM).DefaultValue("EA");

}))

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

.Events(events => events.DataBinding("gridDataBinding"))

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

)

Now everytime when i view the grid, the UPCUOM cell shows 'undefined'.

Any clue what am i doing wrong?

Thanks.

Grid

answered on 21 Jan 2016

1 answer

248 views

Removing additional check box column in KendoGrid

I'm constructing kendo grid using angular js but by default an additional column keeps appearing each time which is having the class ".k-hierarchy-cell".

I don't have CheckAll select box option in any of the table.Hence I want to remove this autogenerated "<td class="k-hierarchy-cell"><a class="k-icon k-plus" href="#" tabindex="-1"></a></td>" that appears automatically

Grid

answered on 21 Jan 2016