Questions on Kendo UI for jQuery Forum

3 answers

156 views

PanelBar animation not working if including link to kendo.dataviz.min.js

Hi,

I am trying to include inside one panel of the panel bar a template that is formed out of a couple linear gauges and some icons. The template works very well individually and also the panel bar works good by it's one.

Though, when I want to put the linear gauges inside the panel bar, and add a link to kendo.dataviz.min.js it displays everything fine, the linear gauge have their correct animations, but the panel bar expending and collapsing of an item stops working. It is just an instant transition between panels.

Is this a known issue, and if yes, how can I fix it?

Thank you and have a nice day,

PanelBar

answered on 07 Sep 2012

2 answers

190 views

[Solved] Access json data in Completed event

This might be an odd question, but I am using the datasource object to get data from the server for my grid, but there is additional information I want to display elsewhere. Right now I get the list of results, the total count, and a count of customers contacted. I want to display this number in a span for the user to work with, but I don't know where this information is stored or even if it is stored when the datasource completed event is fired. Any help would be appreciated

Data Source

answered on 07 Sep 2012

0 answers

147 views

Kendo Grid and Null model

Is there a way to have the grid show or display a message saying there are no results vs crashing the page? I don't think its uncommon to do a search and not return any records, unless I overlooked something. I'm using fluent syntax. Thanks

Grid

asked on 07 Sep 2012

1 answer

106 views

Error when clicking edit button - editable: popup

My grid loads all the data without any errors and it's configured to be a popup edit window. When clicking edit, nothing happens to the grid and I don't get a popup window. Instead I receive the following error:

Uncaught TypeError: Cannot read property 'type' of undefined

I'm not really sure where to start on this since my error isn't so helpful. Any ideas? I also don't want to throw a bunch of useless information up here so let me know what details are needed from my script to get started.

Grid

answered on 07 Sep 2012

2 answers

183 views

Instant Grid Editor + more information on cell editors

A lot of people in my company hate the "click to activate edit mode". For the boolean editor, you have to click to edit it and then click again to switch it.

Replacing the rendering with just a checkbox has weird results. So I've tried to come up with a custom editor:

function instantBoolEditor(container, options) {

// flip value

options.model.set('enabled', !options.model.enabled);

// replace html with the same template the column uses

[...]

// should I do something like trigger change?

options.model.trigger("change", {container: container, model:options.model});

}

Is this the right way to do it and maintain that changes get fired on the datasource change event? Am I messing up data binding?
Is there any more information about custom editors except for the one example here? (http://docs.kendoui.com/api/web/grid) It's very terse info!
That api page mentions these items, but there is no example use that gives any indication what kind of options are "additional options" ??

columns.editor.container Object

The container in which the editor must be added.

columns.editor.options Object

Additional options.

columns.editor.options.field String

The field for the editor.

columns.editor.options.model Object

Grid

answered on 07 Sep 2012

3 answers

970 views

Grid Details Toolbar Create function not working

The toolbar in the details grid will not open a "popup" or "inline" when I click the create function. The "save", "cancel", "delete" all work. Am I missing something? Also, the "create" in the main grid works just fine.




    var sigSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "signatures/sigrequests_json_output",
                dataType: "json"
            },
            create: {
                url: "signatures/Create",
                dataType: "json"
            }
        },
        schema: {
            data: "results",
            total: "count",
            model: {
                id: "sigreq",
                fields: {
                    ticket_uid: { editable: false },
                    name: { type: "string", validation: { required:true } },
                    description: { type: "string" },
                    assigned_to: { editable: false, defaultValue: return_user() },
                    current_status: { editable: true },
                    priority: { editable: true },
                    ticket_tlp: { editable: true },
                    ticket_type: { editable: true },
                    discovery: { editable: true },
                    rule_type: { editable: true },
                    rule_category: { editable: true },
                    parent_template: { editable: true },
                    reference: { editable: true },
                    date_created: { editable: false }
                }
            }
        },
        batch: false,
        pageSize: 100,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    });
     
    $("#kendosigsrequests").kendoGrid({
        dataSource: sigSource,
        filterable: true,
        sortable: true,
        scrollable: true,
        reorderable: true,
        columnMenu: true,
        height: 600,
        toolbar: [ { name: "create", text: "Create New Request" } ],
        pageable: {
            refresh: true,
            pageSizes: [10, 20, 50, 100, 150, 200, 300]
        },
        detailInit: detailInit,
        dataBound: function() {
            this.expandRow(this.tbody.find("tr.k-master-row").first());
        },
        columns: [ 
            { field : "name", title : "Name", width : 200 }, 
            { field : "description", title : "Description", width : 200 }, 
            { field : "assigned_to", title : "Assigned To", width : 200 }, 
            { field : "current_status", title : "Current Status", width : 150, editor: stautsDropDownEditor },
            { field : "priority", title : "Priority", width : 90, editor: priorityDropDownEditor }, 
            { field : "ticket_tlp", title : "TLP", width : 90, editor: tickettlpDropDownEditor },
            { field : "ticket_type", title : "Type", width : 90, editor: tickettypeDropDownEditor},
            { field : "discovery", title : "Discovery", width : 100, editor: discoveryDropDownEditor },
            { field : "rule_type", title : "Rule Type", width : 100, editor: ruletypeDropDownEditor },
            { field : "rule_category", title : "Rule Category", width : 100 },
            { field : "parent_template", title : "Parent Template", width : 300, editor: categoryDropDownEditor },
            { field : "reference", title : "Reference" },
            ],
            editable: "popup"
    });
     
/////////////////////////////////////////
    function detailInit(e) {
         
        var detailRow = e.detailRow;
 
        var commentSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "signatures/Comments",
                    dataType: "json"
                },
                create: {
                    url: "signatures/NewComment",
                    dataType: "json"
                },
                update: {
                    url: "signatures/UpdateComment",
                    dataType: "json"
                }
            },
            batch: true,
            pageSize: 6,
            schema: {
                data: "comments",
                model: {
                    id: "comment",
                    fields: {
                        ticket_uid: { editable: true },
                        user: { editable: true },
                        comment: { editable: true },
                        date_created: { editable: true }
                    }
                }
            },
            filter: { field: "ticket_uid", value: e.data.ticket_uid }
        });
 
        $("<div/>").appendTo(e.detailCell).kendoGrid({
            dataSource: commentSource,
            toolbar: ["create"],
            pageable: true,
            editable: "inline",
            columns: [
                { field: "date_created", title: "Date",  width: 150 },
                { field: "user", title: "By", width: 100 },
                { field: "comment", title: "Comment" },
                { command: "edit" }
            ]
        });
    }

Grid

answered on 07 Sep 2012

0 answers

135 views

Store edited nodes in a array

A
1
2
3
B
1
2
3
I have tree view which has editable functionality. When user edits the node and click on save, it should save the newly edited nodes in an array. I gone through some examples given and tried observablearray, assigning new data to the datasource but it is not recorded. Please help!. Thank you.

TreeView

asked on 07 Sep 2012

1 answer

124 views

Unable to create the picker

I am using the Kendo UI web version Trial.
I am using jQuery 1.8.2 and I am unable to create the dateTimePicker in my asp.net mvc website.

I receive a Javascript error stating that the "Object does not support this Property or Method".
I think this might be due to referencing it incorrrectly.
I have looked at the source of the rendred page and it looks ok.

I am not sure what all I should include for it? Please let me know.

Thanks

DatePicker

answered on 07 Sep 2012

0 answers

539 views

Grid with Custom Popup Editor containing DatePicker

I'm trying to get the DatePicker inside my grid's custom popup editor to init/show the Date from my DataSource ...
Here's a fiddle to show you what I mean: http://jsfiddle.net/kzpzC/4/

<div id="grid" class="k-content clearfix"></div>

<script id="templ" type="text/x-kendo-template">
  <div data-container-for="expires_at" class="k-edit-field">
  <input type="date" name="expires_at" data-bind="value:expires_at" data-role="datepicker"/>
  </div>
</script>

$('#grid').kendoGrid({
  dataSource: {
  data: [
  {
  name: 'test 1',
  expires_at: "2010-11-01T00:00:00Z"},
  {
  name: 'test 2',
  expires_at: "2012-04-25T00:00:00Z"}
  ],
  pageSize: 10
  },
  columns: [
  {
  field: "name",
  title: "Name",
  template: '<strong>#=name#</strong>'},
  {
  field: "expires_at",
  title: "Date",
  template: '#= kendo.toString(new Date(expires_at), "MM/dd/yyyy") #',
  width: "100px"},
  {
  command: ["edit"],
  title: " ",
  width: "210px"}
  ],
  editable: {
  mode: "popup",
  template: kendo.template($('#templ').html(), {
  useWithBlock: false
  }),
  update: true,
  destroy: false
  }
});

Maybe someone can point me in the right direction ...!?

thanks

Grid

asked on 07 Sep 2012

4 answers

474 views

[Solved] Double click on grid to show a new get url.

Hi!

How do i make so this code work?

var grid = $("#GridField").kendoGrid();

function grid_selected(e) {

var id;

grid.select().each(function() {

// CRASH HERE.. Doesent get a dataitem.

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

id = dataItem.SalonID;

})

window.location.href = "@Url.Action("Details", "Salon")" + "/" + id;

}

The problem is that i doesent get out a SalonID value so i can redirect.

Here is the full code:

<p>

@(Html.Kendo().AutoComplete()

.Name("searchField")

.DataTextField("SalonName")

.Filter("Contains")

.Placeholder("Search..")

.DataSource(dataSource =>

{

dataSource.Read(read =>

{

read.Action("GetAutoCompleteItems", "Salon");

})

.ServerFiltering(false);

})

.Events(events => events.Change("autoComplete_selected"))

)

</p>

<div id="Grid">

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

.Name("GridField")

.Columns(columns =>

{

columns.Bound(item => item.SalonID);

columns.Bound(item => item.Avtnr);

columns.Bound(item => item.SalonName);

columns.Bound(item => item.Street);

columns.Bound(item => item.ZipCode);

columns.Bound(item => item.City);

columns.Bound(item => item.Telephone);

columns.Bound(item => item.SalonEmail);

columns.Bound(item => item.Description);

columns.Bound(item => item.ContactPerson);

})

.ColumnMenu()

.Groupable()

.Pageable()

.Sortable()

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

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

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("Read", "Salon"))

.ServerOperation(false)

)

.Events(events => events.Change("grid_selected"))

)

</div>

<script type="text/javascript">

var grid = $("#GridField").kendoGrid();

function grid_selected(e) {

var id;

grid.select().each(function() {

var dataItem = grid.dataItem($(this

));

	// CRASH HERE.. Doesent get a dataitem. 

	id = dataItem.SalonID;

})

window.location.href = "@Url.Action("Details", "Salon")" + "/" + id;

}

//

// Filter the grid when searching..

//

function autoComplete_selected(e) {

var value = this.value();

if (value) {

grid.data("kendoGrid").dataSource.filter({ field: "SalonName", operator: "contains", value: value });

}

else {

grid.data("kendoGrid").dataSource.filter({});

}

</script>

I also in want that when i type 1 letter in the autocomplet, the grid should filter directly & right now im only avalible to search/filter 1 column in my db, i want to choose several tables to be searchable.

Ty!

Grid

answered on 07 Sep 2012