Questions on Kendo UI for jQuery Forum

2 answers

162 views

Hi there,

i suppose my problem is a very trivial one. In order to test the kendo library I wanted to connect the grid to a json webservice.
When that didn't work I tried it locally as described in the examples, but still couldn't make it work.

Is there something I missed? Or is the data in the wrong format? The error firebug tells me is ocurring in kendo.web.js at line 5469 but i suppose the real problem lies much on a higher level.

here the html:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Kendotest</title>

<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.web.js" type="text/javascript"></script>
<script src="js/kendo.dataviz.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<header>
</header>
<section id="content">
<div id="grid">
</div>
</section>
<footer>
</footer>
</div>
</body>
</html>

and the main.js:

$(document).ready(function(){
var dta = [
{Artikel_ID:1,Bezeichnung:"Testartikel",VK_Preis:900},
{Artikel_ID:2,Bezeichnung:"BASEL GEHT AUS!",VK_Preis:24.5},
{Artikel_ID:3,Bezeichnung:null,VK_Preis:24.5},
{Artikel_ID:4,Bezeichnung:null,VK_Preis:24.5},
{Artikel_ID:5,Bezeichnung:"TESSIN GEHT AUS!",VK_Preis:24.5},
{Artikel_ID:6,Bezeichnung:null,VK_Preis:24.5},
{Artikel_ID:7,Bezeichnung:"Versandkosten",VK_Preis:9},
{Artikel_ID:8,Bezeichnung:"Stein der Verdammnis",VK_Preis:42},
{Artikel_ID:9,Bezeichnung:"Stein der Weisen",VK_Preis:163},
{Artikel_ID:10,Bezeichnung:"Feueressenz der Ewigkeit",VK_Preis:43},
{Artikel_ID:11,Bezeichnung:null,VK_Preis:4740.45},
{Artikel_ID:12,Bezeichnung:null,VK_Preis:252},
{Artikel_ID:13,Bezeichnung:"Eisenbarren",VK_Preis:25},
{Artikel_ID:14,Bezeichnung:null,VK_Preis:1248},
{Artikel_ID:15,Bezeichnung:"Foliant der Erkenntnis",VK_Preis:0},
{Artikel_ID:23,Bezeichnung:"Basisplatine 50mm x50mm, gelocht",VK_Preis:0.8},
{Artikel_ID:24,Bezeichnung:"SMD WIDERSTAND 300R 1% 0805",VK_Preis:0.25},
{Artikel_ID:25,Bezeichnung:null,VK_Preis:0.1},
{Artikel_ID:26,Bezeichnung:"WIDERSTAND,500 OHM 5W Typ: MC14712",VK_Preis:0.25},
{Artikel_ID:27,Bezeichnung:"Kondensator Elektrolyt 45uF, 20V",VK_Preis:1.2},
{Artikel_ID:28,Bezeichnung:"STP0021-1 Steuerungsplatine Flugsicherung",VK_Preis:150}
]

var dsArtikel = new kendo.data.DataSource({
data: dta
});

$("#grid").kendoGrid({
dataSource: dsArtikel
});
});

any idea what I might be doing wrong here?

thanks for your help,

Graziano

Grid

answered on 29 Aug 2012

3 answers

638 views

Event After Child Nodes are checked/unchecked

I have a tree view with check boxes. I am using the checkChildren property to select the children.

I have a bit of code to say how many items are checked. All check boxes have treecheckbox, but only the leaf nodes have itemnode.

$(".treecheckbox").change(function () {

$("#selected-count").html("Recorded Selected: " + $("#treeview input.itemnode").serializeArray().length);

});

The figures come out fine when you click on the leaf nodes. However if you select any of the parent nodes, the count get off. Both the click and the change event for the check boxes fire before the event to update the child nodes. So If I have no records selected and click a parent that auto selects 5 then the query returns zero until something else fires the event and then the count it right.

Is there any post update event for the check boxes that I can wire to in order to run after that update process fires?

Alternatively, perhaps I am doing it the hard way. Is there a better way of handling it?

Thanks
Randy

TreeView

answered on 29 Aug 2012

1 answer

269 views

getting value of the id of a model within a custom validator

I have successfully implemented a custom AJAX validator in a grid for the popup editor. The purpose of the validator is to check whether a login field is unique in a database table. However, in order to do this the server side check the code needs to know the value of the ID field of the model in question so it can exclude itself from the uniqueness check. Is there any way of retrieving the ID, or the value any other field of the model being edited within the custom validator?

A snippet of my code is here:

login:{
type: "string",
validation: {
checkLoginUnique: function(input) {
if ($(input).attr("name") == "login")
{
var result;
$.ajax({
url: "<?php echo Yii::app()->createUrl('/lasso/users/checkUnique'); ?>",
async: false,
data: {
login: $(input).val()
},
success: function(response) {
result = response;
}
});
return result;
}
return true;
}
}
}

Validation

answered on 29 Aug 2012

6 answers

1.3K+ views

How to show view as popup when action is posted?

Hai

I am creating a MVC4 razor Application using Kendo controls. In my application I supposed to open a view as popup. For that I am using kendow window control. Am using the below code to open the popup.

@(Html.Kendo().Window()
        .Name("Searchwindow")
    .Title("user Search")
        .LoadContentFrom("../usersearch")
    .Draggable()
    .Resizable()
    .Width(700)
    .Visible(false)

The view is open as popup and works fine. But whenever the post action occurs in the view the page is opened as page like http://localhost:4376/usersearch.

I have to show the same popup to the user when the form is posted. How to show the same popup when an action is posted on the view page? Is it possible to open the view as popup after the action completion?

Thanks

Window

answered on 29 Aug 2012

0 answers

138 views

Filtering breaks when grid is inserted into Menu

I have a menu that I have inserted a grid into. I use selections in the grid to populate another grid outside of the menu. All of this is working correctly.

However, I was hit with an extra request of making the items listed in the menu-grid filterable. I added the tag, but unfortunately, the filter icon does not appear...

I have tried to remove this grid and place it within another area (direct copy/paste, no code change) in the document and the filtering functions correctly.

See attached pictures for extra clarification

I will also note that Sorting works correctly when the grid is inside the menu which makes me think this is in fact a bug and not intentional, but I'm not sure.

For grids within a menu, is the 'filterable()' attribute intentionally neglected? If so, why and regardless of intentionality, will this change/be fixed in a future release?

Menu Code:

@(Html.Kendo().Menu()

    .Name("ProductBookMenu")

    .OpenOnClick(true)

    .CloseOnClick(true)

    .Items(items =>

    {

        items.Add()

            .Text("Product Book")

            .Content(Html.Partial("ProductBook", Model.ItemModelList).ToHtmlString());

    })

)

Grid Code (ProductBook.cshtml):

@model List<Company.Product.MVC.Models.ItemModel>

@using Kendo.Mvc.UI

<script>

function PopulateItemGrid() {

    var productBookGrid = $("#ProductBookGrid").data("kendoGrid");

    var itemGrid = $("#QuoteItemGrid").data("kendoGrid");

    productBookGrid.select().each(function () {

        var dataItem = productBookGrid.dataItem($(this));

        itemGrid.dataSource.add(dataItem);

    });

    $("#ProductBookMenu").data("kendoMenu").close("#Item1");

}

</script>

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

    .Name("ProductBookGrid")

    .Columns(columns =>

    {

        columns.Bound(i => i.FreightClass).Width(70);

        columns.Bound(i => i.DimensionLength).Width(70);

        columns.Bound(i => i.DimensionWidth).Width(70);

        columns.Bound(i => i.DimensionHeight).Width(70);

        columns.Bound(i => i.DimensionUnitOfMeasure).Width(70);

        columns.Bound(i => i.QuantityQuantityValue).Width(70);

        columns.Bound(i => i.QuantityUnitOfMeasure).Width(70);

        columns.Bound(i => i.WeightWeightValue).Width(70);

        columns.Bound(i => i.WeightUnitOfMeasure).Width(70);

        columns.Bound(i => i.NmfcCode).Width(75);

        columns.Bound(i => i.ItemDescription).Width(150);

    })

    .ToolBar(toolbar =>

    {

        toolbar.Custom().Text("Add").Url("#_").HtmlAttributes(new { onclick = "PopulateItemGrid()" });

    })

    .Pageable()

    .Sortable()

    .Scrollable()

    .Filterable()

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

    .Reorderable(reorder => reorder.Columns(true))

    .DataSource(dataSource => dataSource

        .Ajax()

    )

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

)

Menu

asked on 29 Aug 2012

1 answer

177 views

Ajax Spinner

I read somewhere here in the forums that if you don't set a grid height you don't get the ajax spinner showing that data is loading....

Is this correct?

I want the grid to be only as tall as the data in it so it doesn't look ugly if I have a grid 800 tall with only 1 row in it...

How can I achieve this and still let the user see the spinner?

Grid

answered on 29 Aug 2012

1 answer

169 views

Kendo declarative Grid templated column problems

Trying to get a templated column in a kendo grid declaratively. Something like:

<div id="sitesGrid" data-role="grid" style="width: 800px;"
data-sortable="true"
data-columns='[{ "field": "accountName", "title": "Account", "width": "150px" },
{ "field": "subAccountName", "title": "Sub Account", "width": "180px" },
{ "field": "siteName", "title": "Site", "width": "150px" },
{ "field": { "template": "#= <input type='checkbox' />"}, "width": "80px"}]'
data-source="AuroraSurveyTool.lovs.siteList">

But this doesn't work. Completely screws up the HTML. Some help would be appreciated. Don't have a clue what I'm doing wrong. Been through every example I can find. I don't really need a check box. Could also use a simple CSS style to switch between icons, but that doesn't seem to work either. I just need to display two different states (true/false) in a column and fire an event.

Grid

answered on 29 Aug 2012

5 answers

859 views

dateTime picker format not working correctly with european format

The date time picker doesn't work with european date and time format. The time dropdown shows AM/PM format but the field populates properly with 24 hours format.

Code and screen shots attached.

DatePicker

answered on 29 Aug 2012

3 answers

106 views

All subtrees are colapsed after data reoading

Hi, I think ths is a real bug, because in th real world all need to refresh data in grid, but anyway... When I reload data in the grid, grid resets all expanded subtrees to collapsed state. Why I need to remember grid state each time I need to refresh data? And what I need to do to save state and load it back to the grid? Coud you provide source code which will save all expanded subtrees to expand them when data will be reloaded.

Grid

answered on 29 Aug 2012

3 answers

346 views

Problems with drag and drop and adding new nodes using remote data source with treeview

Hi!

I am implementing a treeview using HierarchicalDataSource. When I expand a node in the tree the tree is making a request to the server and the tree is populated with the retrieved children. The dataSource is set to be updated on dataSource.sync() when a user clicks a save button using a batch update.

// Add nodes problem
One of my problems is that I don't know how to add nodes to the tree and datasource. E.g. to a node, three steps down in the hierarchy. I am not sure I am doing this right.

If I do dataSource.add(node)
The node is added at the very end of the root which seems right. But how do I add a node to a specific place in the tree?

I have tried dataSource.insert(index, node) but it does not seem to work. What is this index? It seems like the data items existing in the dataSource has an index related to their parent, not a global index, i.e. there are multiple 0 indexes in the tree. Or has my treeview been built in a wrong way? I have tried with different indexes without success.

If I use treeView.append()/insertBefore/insertAfter the node is added to the tree but when i call dataSource.sync() they are not pushed to the server using the transport.create. I guess this is expected behavior since the dataSource does not know about these changes.

How should this be implemented?

// Drag drop problem
When I rearrange nodes using drag and drop and then do a dataSource.sync() the drag and drop changes seems to be sent as transport.destroy. Is this expected behavior? I would rather want an transport.update action.

Regards,
/ Mårten

Hierarchical Data Source

answered on 29 Aug 2012