Questions on Kendo UI for jQuery Forum

2 answers

143 views

Dealing with complex data in grid

$("#grid").kendoGrid({

dataSource: {

type: "json",

transport: {

read: "http://localhost:8888/mysite/xml/sample.json"

},

schema: {

model: {

fields: {

id: { type: "number" },

data: { type: "json" }

}

},

pageSize: 5

},

height: 250,

pageable: true,

columns: [{

field:"id",

title: "Record ID",

filterable: false

},

{

field: "data",

title: "Data String"

}

],

});

and I have json data in this format:

[

{

"id":0,

"data":[

{

"source":"Lotus Domino XML Mail",

"title":"Mr SYDPER",

"path":"/NSF//Marketing/Travel Itininery"

}

]

},

{

"id":1,

"data":[

{

"source":"Lotus Domino XML Mail",

"title":"Re: CMI statement for",

"path":"/Marketing/Mark"

}

]

}

]

How do I have my data column display the data in the grid?

Thanks

Grid

answered on 24 Jul 2012

7 answers

294 views

Querystring lost

Loading content with querystring parameters

content:
"../../content/web/window/ajax/ajaxContent.html?op=b3A9bGlzdCZpZD03MTUwNmY4Ni1jODk3LTQ3MjItYjcxNy01OTgxNWNiZmQxNmI="

The problem since Kendo Window is loaded as an XHR, the rquestUrl is not visable to the script running inside the Content.html (i.e. location.search) page. Ideas on passing parameters to Kendo Windows?

Window

answered on 24 Jul 2012

8 answers

202 views

EmptyText property?

Is there an EmptyText property in the combobox like you have in the silverlight combobox? If not, what is the best way to go about duplicating that functionality? In the old days I would just set it and clear it in the gotfocus / onfocus events, is that how it shoud be done here or is there an easier way?

ComboBox

answered on 24 Jul 2012

1 answer

112 views

Missing _dequeueRequest?

Hi,
I'm using custom errors where retrieving data from server.

dataSource = new kendo.data.DataSource({

type: "json",

serverPaging: true,

serverSorting: true,

serverFiltering: false,

error: function (e) {

// display custom error

},

...

});

If an error occurred on the server when retrieving data, server respond with some error message which is handled in your success function.

success: function(data) {

var that = this,

options = that.options,

hasGroups = options.serverGrouping === true && that._group && that._group.length > 0;

data = that.reader.parse(data);

if (that._handleCustomErrors(data)) {

// should dequeue request!

// that._dequeueRequest();

return;

}

...

that._dequeueRequest(); // only called if any data is retrived

that._process(that._data);

}

but there is no that._dequeueRequest(), so any new request is not started.

Thanks in advance!

Data Source

answered on 24 Jul 2012

8 answers

2.7K+ views

MVC Kendo Grid, Ajax Request

Im using the MVC wrappers for the Kendo UI, and placing a grid on the page, getting its data from an Ajax Request. Im following the example almost identically (VS MVC Kendo UI examples - Paging) however my site issues a GET request where the demo issues a POST request. I cant find where that is happening or how to change it. My site $)$ errors, because I dont have a GET request action method, mine follows the

[HttpPost]
        public ActionResult _AjaxProducts([DataSourceRequest] DataSourceRequest request)
        {
            return Json(_ps.GetProducts(ViewData["ProductType"].ToString()).ToDataSourceResult(request));
        }

Any ideas why my page uses a GET but the demo uses POST?

Html.Kendo().Grid<Web.BusinessLayer.Models.Product.ProductModel>()
    .Name("Products")
    .ColumnMenu()

    .Columns(columns =>
    {
....
    })
    .Pageable(pager => pager
        .Refresh(true)
        .PageSizes(true)
    )
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("_AjaxProducts", "Inventory"))
    )
)

Grid

answered on 24 Jul 2012

3 answers

873 views

Working with arrays

How are you supposed to work with arrays? I am messing with the "elements.html" example provided in the download for the beta and when I try to change the array of fruits to a new array, it doesn't work correctly (places that bind to it show the array as a comma-separated list instead of as distinct values).

In the example, I added this method to the viewModel (bound to a button)...

changeStuff: function(e) {
e.preventDefault();
this.set("fruits", ["Pear", "Peach", "Plumb"]);
}

When I click the button, the "Select" and "Multiple select" lists are updated, but instead of individual lines for each fruit, it shows all the fruits on the same line separated by commas.

Also, how would I just change a single value in the list? For example, change "Banana" to "Pineapple"?

MVVM

answered on 24 Jul 2012

3 answers

394 views

Rebuild TreeView with new data

Hello,

I want to rebuild the Treeview with new data. I use this code:

$(#treview)

.removeClass('k-treeview')

.empty();

$(#treeview).kendoTreeView({

dataSource: getNewdata(),

select: onNodeSelect

});

The tree is rebuild well but the function onNodeSelect is called two times if I select a node.
Is there a way to clear also event handling for select?

TreeView

answered on 24 Jul 2012

0 answers

65 views

Kendo Grid and MVC3 + JSON

I try get data from DataBase.
View:

<script type="text/javascript" language="javascript">

$(document).ready(function () {

$("#grid").kendoGrid(

{

groupable: true,

scrollable: true,

sortable: true,

pageable: true,

filterable: true,

dataSource: {

type: "json",

transport: {

read: {

url: "/Item/GetItems",

type: "POST",

dataType: "json",

contentType: "application/json; charset=utf-8"

}

},

columns: [

{ field: "ID", title: "ID" },

{ field: "InvNo", title: "Инв.номер" }

]

});

</script>

Controller:

public JsonResult GetItems()

{

List<SelectListItem> searchParams = new List<SelectListItem>();

searchParams.Add(new SelectListItem() { Value = "InvNo", Text = "121" });

IList<Item> data = _itemService.GetItems(searchParams);

return Json(data.ToList(), JsonRequestBehavior.AllowGet);

}

data is not empty and successful return 12 items, but grid is empty :(((

Sample with createRandomData(50) from people.js is OK.

Grid

asked on 24 Jul 2012

0 answers

109 views

I need to show a windows warning that the grid has no data.

$('#grid').kendoGrid({

height: 520,

sortable: true,

pageable: true,

groupable: true,

dataSource: new kendo.data.DataSource({

serverPaging: true,

serverSorting: false,

pageSize: RecebimentoAutomatico.Configuracoes.RegistrosPorPagina,

transport: {

read: {

url: function () { return UrlComParametros() },

contentType: 'application/json; charset=utf-8'

}

},

schema: { data: 'dados', total: 'total' }

}),

columns: [

{ field: 'IdentificadorProcessamento', title: ' ', template: '<input type="checkbox" value="#=IdentificadorProcessamento#">', width: 30, sortable: false },

{ field: 'NumeroNota', title: 'N° da Nota', width: 60 },

{ field: 'DataEmissao', title: 'Data Emissão', width: 100 },

{ field: 'DataEntrada', title: 'Data Entrada', width: 95 },

{ field: 'NomeFornecedor', title: 'Parceiro', width: 300, template: '<span rel="tooltip" title="#=NomeFornecedor#">#=NomeFornecedor#</span>' },

{ field: 'EstruturaValida', title: 'Consulta NFe Nacional', width: 100, template: '<div style="text-align: center;"><i class="icon-24 icon-efisc-restricted"></i></div>' },

{ field: 'EstruturaValida', title: 'Integridade do XML', width: 100, template:

'<div style="text-align: center;"><i class="icon-24 # if(EstruturaValida == true) { #icon-efisc-check#}else{#icon-efisc-error#}#"></i> <a href="#=UrlDetalhesValidacao#" title="Ver detalhes da validação" href=""><i class="icon-24 icon-efisc-lupa"></i></a></div>'

},

{ field: 'ValidaNaSefaz', title: 'Válido na Sefaz', width: 100, template:

'<div style="text-align: center;"><i class="icon-24 # if(ValidaNaSefaz == true) { #icon-efisc-check#}else{#icon-efisc-error#}#"></i> <a href="#=UrlDetalhesValidacao#" title="Ver detalhes da validação" href=""><i class="icon-24 icon-efisc-lupa"></i></a></div>'

},

{ field: 'ValidaNoSystax', title: 'Válido no Systax', width: 100, template:

'<div style="text-align: center;"><i class="icon-24 # if(ValidaNoSystax == true) { #icon-efisc-check#}else{#icon-efisc-error#}#"></i> <a href="#=UrlDetalhesSystax#" title="Ver detalhes da validação" href=""><i class="icon-24 icon-efisc-systax"></i></a></div>'

},

{ field: 'ValidaNoValidate', title: 'Válido no Validate', width: 105, template:

'<div style="text-align: center;"><i class="icon-24 # if(ValidaNoValidate == true) { #icon-efisc-check#}else{#icon-efisc-error#}#"></i> <a href="#=UrlDetalhesValidateReceita#" target="_blank" title="Ver detalhes da RFB" href=""><i class="icon-24 icon-efisc-rfb"></i></a><a href="#=UrlDetalhesValidateSintegra#" target="_blank" title="Ver detalhes do Sintegra" href=""><i class="icon-24 icon-efisc-sintegra"></i></a></div>'

},

{ field: 'ChaveNFe', title: 'Integração', width: 180, template: sapTemplate },

{ field: 'UrlVisualizar', title: 'NFe', width: 50, template:

'<a href="#=UrlVisualizar#" title="Visualizar Nota Fiscal Eletrônica"><i class="icon-24 icon-efisc-lupa"></i></a><a href="#=UrlVisualizarImpressao#" title="Visualizar Nota Fiscal Eletrônica para Impressão"><i class="icon-24 icon-efisc-printer"></i></a>'

},

{ command: { text: "Details", className: "details-button" }, title: " ", width: "110px" }

],

dataBound: function () {

if (this.dataSource.group().length == 0) {

setTimeout(function () {

$(".k-grouping-header").html("Arraste uma coluna aqui para agrupar");

});

}

//Inicia tooltips

$('#grid span').tooltip();

MostraTotal();

}

});

Grid

asked on 23 Jul 2012

0 answers

155 views

Add dropdown in edit/add form.

I'm using KendoUI along with MVC3. I want to load my dropdown in the add/update template. Right now it loads the for but as a textbox.

.cshtml

@using (Html.BeginForm("Index", "CodeManager"))

{

<p>

<label for="startsWith">

<strong>Category:</strong></label>

@Html.DropDownList("Classifications", ViewData["ClassificationItems"] as SelectList, new { style = "width:100px;" })

<button type="submit" class="u-button">

Search</button>

</p>

}

@if (Model.Count() > 0)

{

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

.Name("CodeManager")

.Columns(columns =>

{

columns.Bound(p => p.CodeID);

columns.Bound(p => p.Title);

columns.Bound(p => p.Status);

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

})

.ColumnMenu()

.ToolBar(toolBar => toolBar.Create().Text("Add New Code"))

.Sortable()

.Scrollable()

.Groupable()

.Pageable()

.Filterable()

.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))

.Resizable(resize => resize.Columns(true))

.DataSource(dataSource => dataSource

.Ajax()

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

.ServerOperation(false)

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

.Update(update => update.Action("Code", "CodeManager", new { classifications = @ViewBag.SelectedCatgory }))

.Create(create => create.Action("Code", "CodeManager"))

)

.Editable(ed => ed.Mode(GridEditMode.PopUp))

)

}

else

{

@Html.Label("No records matched search criteria.");

}

Popup Editor .cshtml: Currently no dropdown..not sure how to load or display data.

@model hrmsMVC.Areas.HRMS.Models.CodeModel

<fieldset>

<legend>Code</legend>

@Html.HiddenFor(model => model.CodeID)

<div class="editor-label">

@Html.LabelFor(model => model.CodeID)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.CodeID)

@Html.ValidationMessageFor(model => model.CodeID)

</div>

<div class="editor-label">

@Html.LabelFor(model => model.Title)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.Title)

@Html.ValidationMessageFor(model => model.Title)

</div>

<div class="editor-field">

@Html.DisplayFor(model => model.Status)

</div>

</fieldset>

Model:

public class CodeModel

{

[Key]

[ScaffoldColumn(false)]

public int Id { get; set; }

[DisplayName("Code ID")]

[Required(ErrorMessage = "Code is required.")]

[StringLength(2, ErrorMessage = "Code can be at most 2 characters")]

public string CodeID { get; set; }

[Required]

public string Title { get; set; }

[HiddenInput(DisplayValue = false)]

public string Status { get; set; }

public bool Active { get; set; }

public string Category { get; set; }

[ScaffoldColumn(false)]

public int UserID { get; set; }

}

Controller:

public ActionResult Index(string classifications = "")

{

ViewData["Classifications"] = new SelectList(Classifications.List, "ClassificationText", "ClassificationText", classifications);

var criterion = new Criterion("Category", Operator.Equals, classifications);

var codeModels = new List<CodeModel>();

ViewBag.SelectedCatgory = classifications ?? "Type";

if (Request.HttpMethod == "POST")

{

// var model = _codeRepository.Search(classifications).ToModel();

var model = _codeRepository.GetList(criterion).ToModel();

return View(model);

}

return View(codeModels);

}

Grid

asked on 23 Jul 2012