Questions on Kendo UI for jQuery Forum

12 answers

993 views

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

221 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

124 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

870 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

241 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

369 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

245 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

1 answer

93 views

How do I get a drag clue to show up on Treeview when dragging row on grid?

I have a tree and a grid on the page. The user can drag a row on the grid to the tree and it creates a new treenode. What I need is the treeview to show the drag clue like it would if I were dragging a treenode over the tree. Is this possible? If so, can someone point me in the right direction?

Drag and Drop

answered on 21 Jan 2016

7 answers

1.6K+ views

ListView + Selection

I want to use the ListView to select items, very similar to this example: http://demos.telerik.com/kendo-ui/listview/selection

There are two items that I'm having a problem with. First, I need to be able to select the first item in the list view by default (ie. on new object creation). I found this code in another thread, but it's not working:

var listView = $("#listView").data("kendoListView");

listView.select(listView.element.children().first());

Secondly, I need to be able to select an item in the list view by ID (ie. editing an existing object).

This is the JSON I'm sending to the ListView:

{"Icons":[{"Name":"fa-icon-bolt","ID":23},{"Name":"fa-icon-book","ID":3},{"Name":"fa-icon-building","ID"

:32},{"Name":"fa-icon-building-o","ID":24},{"Name":"fa-icon-calculator","ID":15},{"Name":"fa-icon-car"

,"ID":18},{"Name":"fa-icon-certificate","ID":2},{"Name":"fa-icon-cloud","ID":6},{"Name":"fa-icon-cog"

,"ID":33},{"Name":"fa-icon-desktop","ID":4},{"Name":"fa-icon-diamond","ID":26},{"Name":"fa-icon-exclamation"

,"ID":29},{"Name":"fa-icon-file","ID":25},{"Name":"fa-icon-fire-extinguisher","ID":36},{"Name":"fa-icon-flask"

,"ID":16},{"Name":"fa-icon-globe","ID":11},{"Name":"fa-icon-graduation-cap","ID":1},{"Name":"fa-icon-h-square"

,"ID":20},{"Name":"fa-icon-headphones","ID":12},{"Name":"fa-icon-info","ID":27},{"Name":"fa-icon-laptop"

,"ID":8},{"Name":"fa-icon-line-chart","ID":19},{"Name":"fa-icon-mobile","ID":9},{"Name":"fa-icon-newspaper-o"

,"ID":10},{"Name":"fa-icon-plus","ID":28},{"Name":"fa-icon-puzzle-piece","ID":13},{"Name":"fa-icon-road"

,"ID":34},{"Name":"fa-icon-rocket","ID":35},{"Name":"fa-icon-share-square-o","ID":5},{"Name":"fa-icon-suitcase"

,"ID":30},{"Name":"fa-icon-truck","ID":14},{"Name":"fa-icon-university","ID":7},{"Name":"fa-icon-user"

,"ID":22},{"Name":"fa-icon-user-secret","ID":17},{"Name":"fa-icon-users","ID":21}]}

And this is how I'm currently initializing it:

function initIconsView() {

var datasource = new kendo.data.DataSource({

transport: {

read: {

type: "GET",

url: "/Controllers/MainController.cfc?method=getIcons",

processData: true,

dataType: "json",

cache: false

}

},

schema : {

type: "json",

data: "Icons"

}

});

$("#icons_list").kendoListView({

dataSource: datasource,

selectable: true,

template: kendo.template($("#icon_list_template").html())

});

}

And the template/HTML:

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

<div class="icon">

<i class="#: data.Name # fa-icon-2x"></i>

</div>

</script>

<div class="demo-section k-content wide">

<div id="icons_list"></div>

</div>

Really they're two different facets of the same issue - programmatically selecting an item in the ListView.

ListView

answered on 21 Jan 2016