Questions on Kendo UI for jQuery Forum

0 answers

77 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

140 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

185 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

133 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

371 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

201 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

334 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())

this.dataSource.page(this.dataSource.page()+1);

else

this.dataSource.page(1);

$jquery("#reportsArea").find("div#phItem").show("slide",{direction:"right"}, 500);

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

},

goToPrevPage:function(){

if(this.dataSource.page()>1)

this.dataSource.page(this.dataSource.page()-1);

else

this.dataSource.page(this.dataSource.totalPages());

$jquery("#reportsArea").find("div#phItem").show("slide",{direction:"left"}, 500);

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

},

pageRefreshHolder: 1,

totalPage: function() {

return this.get("dataSource").totalPages();

},

currentPage: function(){

return this.get("dataSource").page();

}

});

kendo.bind($jquery("#reportsArea"),viewModel);

Data Source

asked on 23 Jul 2012

3 answers

173 views

[Solved] N Level ListView Design Pattern

I want to create some what of a product catalog using listviews. Basically the page will start with a listview of high level categories. When a person selects a category, I will perform a jsonp query and they will see a new listview with the subcategories of that category. I don't know ahead of time how deep the categories can be nested but it seems that there should be a simple design pattern so this can be done with a single page that can be reused over and over at each level and that each (different page/category query) could be cached to avoid making the same jsonp request.

Would appreciate if someone can point me in the right direction.

Thanks,
EE

ListView

answered on 23 Jul 2012

0 answers

169 views

how to change combobox template

I'm trying to set the combobox template in a jquery way, but doesn't work

$("#titles").kendoComboBox({
..//set some other properties except template
});

var combobox = $("#titles").data("kendoComboBox");

// set template
if (something)
{
combobox.template('some template');
}

any ideas why this doesn't work?

kashim

ComboBox

asked on 23 Jul 2012

0 answers

276 views

Drag container

Hello, I'm trying to make use of the new container feature, and it works like a charm if you define a hint for the draggable element.
So, that's my question, is there any chance to use this container feature without having to define a hint so it does not throw an exception when it tries to get the hint dimensions to check boundaries?

My draggable elements do not need any hint, just the original element. If I set the hint function to return a clone of it I'm exposed to have elements duplicated every time I try to drag them.

Thank you.

Drag and Drop

asked on 23 Jul 2012