Questions on Kendo UI for jQuery Forum

8 answers

2.7K+ views

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

916 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

406 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

66 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

115 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

157 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

0 answers

96 views

Add command with local data

Hi,

Considering the fiddle here : http://jsfiddle.net/sT94F/3/

When clicking the "Add" button, there's a reference error, "colA is not defined".

Is there a way I can pass an "empty" object when adding the row?

I am using v2012.1.327

Thanks,

Pascal.

Grid

asked on 23 Jul 2012

0 answers

334 views

How to pass parameter in Listview

how can i pass parameter to service method..here is my code

Service Method which accept the argument

public string AllBooks(string models)
{
                return models;
}

KendoListView Binding Script
$(function () {
            var id = "ammar";
            var dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        type: "POST",
                        url: "../../books.svc/AllBooks",
                        dataType: "json"
                    },
                    parameterMap: function (options, operation) {
                        if (operation == "read") {
                            return { models: kendo.stringify(id) };
                        }
                    }
                },
                schema: {

                    parse: function (data) {
                        return JSON.parse(data.d);
                    }
                },
                pageSize: 8
            });

            $("#listView").kendoListView({
                dataSource: dataSource,
                template: kendo.template($("#template").html())

            });

        });

service method not call,in firebug i saw Post tab when service method call following is the format which is going to be pass,i think this is the reason why service method not call..please someboy tell me where i m wrong

ListView

asked on 23 Jul 2012

3 answers

168 views

Tree View

Hi,

Im using Kendo Tree view. Whenever Im trying to use Hierarchical data source in my tree view, my web view page comes up with an error that "Object doesnt support this action". Can U suggest any help or provide sample for this?

Thanks and Regards,
Durga Bhavani

TreeView

answered on 23 Jul 2012

0 answers

297 views

Custom Paging

I am trying to do a custom paging by using mvvm, datasource and template. My problem is I have to use this.set to set the dataSource page() or total pages() to get the value this.get("dataSource").totalPages() or this.get("dataSource").page() refreshed. That is why I set a variable pageRefreshHolder as work-around. Is there some easy way?

var viewModel=kendo.observable({

dataSource:new kendo.data.DataSource({

data:ReportsData,

pageSize:12,

sort:{ field: "name", dir: "asc" }

}),

copy:function(e){

this.dataSource.add(e.data);

this.set("pageRefreshHolder",this.dataSource.totalPages()); //I have to have this line to get the totalPage work

},

goToNextPage:function(){

if(this.dataSource.page()<this.dataSource.totalPages())