Hi all,

I am trying to get an XML datasource working, but unfortunately without success.
The XML-data I provided locally in a variable. The whole code is below.

If I load the page firebug comes up with an error message:

b.slice is not a function.

Can anyone assist please?
Thanks for any help!

I am trying to put a tooltip on a button link as shown below.  The button is in a grid, so I have included the template.  It is just an image with font-awesome, so there is no text.  Because I am using Angular, the event that needs to be called is an ng-click event.

I have tried adding the tooltip using the kendo-tooltip attribute on <a>, as well as adding during the component's $onInit method (shown below):

However, when I hover over the button, either the tooltip appears or the button can be clicked.  This prevents users from clicking on the button once the tooltip is shown.  

Finally, I have tried adding a <span> around my button with the tooltip on that.  This causes a mix of kendo-tooltip and standard tooltip to appear, depending on where my cursor is located.

Is there any way to use the tooltip with a button?

Hi everyone,

I'd like to use specific background colors for each resources-cell in the scheduler.  

This means, corresponding to the demo in http://dojo.telerik.com/oQIMU, I'd like to set a background-color for the cell with the text "Alex" and a different one for the cell with the text "Bob".On the corresponding demo, there are colors set for the entries for "Alex", "Bob" and Charlie. Unfortunately, I don't see where these colors apply.

It would also be possible to use css-classes to set the background-color and apply the corresponding css-class to the resources-cell.

Which would be the easiest solution to do so? Is there a possibility to create a custom template for the resources-cells, just like there are the event-template and the header-template?

 

Thank you for your help!

Hi All,

I would like to sort rows within of group by invisible field (e.g., id). In addition, groups should be filtered by name using checkbox filtering. I was not able to implement this grid and put my example to http://jsfiddle.net/iakhmedov1/T64Kb/93/.

 

Please provide some hints.

 

Thanks,

Igor

 

The kendoChart  background color use  white for default. How i can set alternate color for background?  

 Like the attack effects.

 

 

Hi All,

I has been awhile since I used kendo and I have no idea why my values are not observable. What I am missing when I'm calling a popup html template and no data are showing in the textbox or data are not updated after I modified them.  Any suggestions or an example is much appreciated.

TIA

 

.js

var rEditor= rEditor || {};

var rEditor = (function () {
    var kendoViewModel;

    function createViewModel() {
        kendoViewModel = kendo.observable({
            selectedCategoryId: null,
            selectedCategoryDesc: "test description",
            selectedCategoryCode: null,

kendoViewModel.Codes
        });
    }

    function loadData() {
        jsonCall({
            url: "/sample/LoadCode",
            type: "GET",
            async: true,
            success: function (result) {
            }
        });

        jsonCall({
            url: "/sample/Loadother",
            type: "GET",
            async: true,
            success: function (result) {                
                }
            }
        });
    }
    
  function setupResourceDropDown() {
$('#ResourceCode_DropDownMenu')
 .kendoDropDownList({              
 dataTextField: "Description",
 dataSource: kendoViewModel.Codes,
 change: function () {
 ..filter the data and call

 setGrid();
 }
 });
    
    }

    function setGrid() {
        $('#resourceCategoryGrid').empty().kendoGrid({
            dataSource: {
                data: filterCategory,
                schema: {
                    model: {
                        fields: {
                            Id: { type: "string", editable: false },
                            Code: { type: "string", editable: true },
                            Description: { type: "string", editable: true }
                        }
                    }
                },
            },
            selectable: "row",
            editable: true,
            columns: [
            {
                hidden: true,
                field: "Id",
                title: "Id",
                width: 200
            },
            {
                title: "Code",
                field: "Code",
                width: 100
            },
            {
                title: "Description",
                field: "Description",
                width: 300,                
            },
            {
               title: "test",
               field: "Code",
               template: "#=Code#",
               editor: editCategory,
            }],
            dataBound: function (e) {
                telerikFilterIndicator(e, this);
            }
        }).data("kendoGrid");   
    }

    function editCategory(container, options) {
        //var model = options.model;
        //kendoViewModel.set("selectedCategoryId", model.Id);
        //kendoViewModel.set("selectedCategoryDesc", model.Description);
        //kendoViewModel.set("selectedCategoryCode", model.Code);

        var editWindow = $("#editResource-dialog").kendoWindow({
            resizable: false,
            title: "Edit",
            modal: true,
            width: "575px",
            height: "185px",
            visible: false
        });

        editWindow.data("kendoWindow")
            .content($("#editResource-dialog").html())
            .center().open();

        $("#confirmUpdateButton").click(function () {
            editWindow.data("kendoWindow").close();
        });

        $("#confirmCancelButton").click(function () {
            editWindow.data("kendoWindow").close();
        });
    }

    function init() {
   
        createViewModel();
        loadData();
        setupResourceDropDown();
   
        kendo.bind($("#MainWrapper"), kendoViewModel);

    }

    return {
        Init: init
    };

}(jQuery));

-----------------cshtml----------------------
<div id="MainWrapper" class="MainWrapperCls">
    <div id="Main" class="row">
        <div class="row">
            <div class="col-lg-1">
                <label>Code:</label>
            </div>
            <div class="col-lg-2">
                <select id="ResourceCode_DropDownMenu" class="form-control"></select>
            </div>   
        </div>  
    </div>

    <div id="editResource-dialog" title="Resource Editor" type="text/x-kendo-template" style="display: none">
        <div class="modal-body" id="editorWindow">
            <div class="input-group" style="padding-bottom: 5px">
                <span class="input-group-addon" style="padding-right: 3.5em">Code:</span>
                <input type="text" class="form-control" id="resourceCode" name="resourceCode" aria-describedby="resourceCode" data-bind="value: selectedCategoryCode">
            </div>
            <div class="input-group">
                <span class="input-group-addon">Description:</span>
                <input type="text" class="form-control" id="resourceDescription" name="resourceDescription" data-bind="value: selectedCategoryDesc">

            </div>
        </div>

        <div class="modal-footer">
            <button class="btn btn-primary" type="button" id="confirmUpdateButton">Update</button>
            <button class="btn btn-default" type="button" id="confirmCancelButton">Cancel</button>
        </div>
    </div>
</div>

Hello,

I have a Grid, which has sub grids, which themselves have sub grids. I would like to drag rows between the sub-sub-grids. The kendoDropTarget event fires when I drag and drop within the same grid, but not when I drag to another grid. Any thoughts?

I but my code below.

Thanks!

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    <title></title>
        <script>
            var dsArray = new Array();
            var dragged;
            var dropped;

            $(document).ready(function () {
                var dataSource = new kendo.data.DataSource({
                    autoSync: true,
                    transport: {
                        read: {
                            url: "GroupHandler.ashx",
                            dataType: "json",
                            contentType: "application/json; charset=utf-8"
                        }
                    },
                    schema: {
                        model: {
                            id: "G_Code",
                            fields: {
                                G_Code: { editable: false },
                                G_T_p_a: { field: "G_T_p_a" }
                            }
                        }
                    }
                });
                $("#grid").kendoGrid({
                    dataSource: dataSource,
                    detailInit: typesInit,
                    columns: [
                        { field: "G_Code", filterable: false, hidden: true },
                        {field: "G_T_p_a", title: " "}
                    ],
                    editable: true
                })
            })

            function typesInit(e) {
                $("<div/>").appendTo(e.detailCell).kendoGrid({
                    detailInit: deleguesInit,
                    dataSource: {
                        autoSync: true,
                        transport: {
                            read: {
                                url: "TypesHandler.ashx",
                                dataType: "json",
                                contentType: "application/json; charset=utf-8",
                                data: { g_code: e.data.G_Code }
                            }, 
                        },
                        schema: {
                            model: {
                                id: "T_Code",
                                fields: {
                                    T_Code: { editable: false },
                                    T_T_p_a: { field: "T_T_p_a" }
                                }
                            }
                        }
                    },
                    columns: [
                        { field: "T_Code", filterable: false, hidden: true },
                        { field: "T_T_p_a", title: " ", width: "400px" }
                    ],
                });
            }

            function deleguesInit(e) {
                var deldatasource = new kendo.data.DataSource({
                    autoSync: true,
                    //batch: true,
                    transport: {
                        read: {
                            url: "DeleguesHandler.ashx",
                            dataType: "json",
                            contentType: "application/json; charset=utf-8",
                            data: { g_code: e.data.G_Code, t_code: e.data.T_Code, d_code_pays: "275", mode: "read" }
                        },
                        update: {
                            url: "DeleguesHandler.ashx",
                            dataType: "json",
                            contentType: "application/json; charset=utf-8",
                            data: { mode: "update" }
                        },
                        create: {
                            url: "DeleguesHandler.ashx",
                            dataType: "json",
                            contentType: "application/json; charset=utf-8",
                            data: { g_code: e.data.G_Code, t_code: e.data.T_Code, d_code_pays: "275", mode: "create" }
                        },
                        destroy: {
                            url: "DeleguesHandler.ashx",
                            dataType: "json",
                            contentType: "application/json; charset=utf-8",
                            data: { mode: "destroy" }
                        }
                    },
                    schema: {
                        model: {
                            id: "D_Code",
                            fields: {
                                D_Code: { type: "number" },
                                D_Numseq: { type: "number" },
                                D_Appellation: { type: "string" },
                                D_Nom: { type: "string" },
                                D_Prenom: { type: "string" },
                                D_Titre: { type: "string" }
                            }
                        }
                    }
                });

                //save to array
                dsArray[e.data.G_Code + e.data.T_Code] = deldatasource;

                var delgrid = $("<div/>").appendTo(e.detailCell).kendoGrid({
                    toolbar: ["create"],
                    dataSource: deldatasource,                    
                    editable: true,
                    //editable:{
                    //    createAt: "bottom",
                    //    mode: "incell"
                    //},
                    navigatable: true,
                    columns: [
                        { field: "D_Code", hidden: true },
                        //{
                        //    command: [
                        //        {
                        //            name: "destroy",
                        //            text: ""
                        //            //click: function (e) {
                        //            //    e.preventDefault();
                        //            //    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
                        //            //}
                        //        }
                        //    ],
                        //    title: "&nbsp;",
                        //    width: "110px"
                        //},
                        { field: "D_Numseq", width: "50px" },
                        { field: "D_Appellation", width: "50px" },
                        { field: "D_Nom", width: "200px" },
                        { field: "D_Prenom", width: "200px" },
                        { field: "D_Titre" }
                    ]
                }).data("kendoGrid");

                delgrid.tbody.on('keydown', function (e) {
                    if ($(e.target).closest('td').is(':last-child') && $(e.target).closest('tr').is(':last-child')) {
                        delgrid.addRow();
                    }
                });

                delgrid.table.kendoDraggable({
                    filter: "tbody > tr",
                    group: "gridGroup" + e.data.G_Code +  e.data.T_Code,
                    hint: function (e) {
                        return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
                    }
                });

                delgrid.table/*.find("tbody > tr")*/.kendoDropTarget({
                    group: "gridGroup" + e.data.G_Code + e.data.T_Code,
                    drop: function (e2) {
                        var dsDrop = dsArray[e.data.G_Code + e.data.T_Code];
                        var diDrop = dsDrop.getByUid(e2.draggable.currentTarget.data("uid"));
                        //var target = deldatasource.get($(e.draggable.currentTarget).data("id"));
                        //var dest = $(e.target);

                        //if (dest.is("th")) {
                        //    return;
                        //}
                        //dest = deldatasource.get(dest.parent().data("id"));

                        ////not on same item
                        //if (target.get("id") !== dest.get("id")) {
                        //    //reorder the items
                        //    var tmp = target.get("position");
                        //    target.set("position", dest.get("position"));
                        //    dest.set("position", tmp);

                        //    deldatasource.sort({ field: "position", dir: "asc" });
                        //}
                    }
                });
            }
        </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="grid"></div>
    </form>
</body>
</html>

I am trying to use a MultiSelect as a custom editor for one of the fields in a kendo grid. I have something like below now

   
    var multiSelectEditor = function (container, options) {

              $('<select data-bind="multiValue:' + options.field + '"/>')

                        .appendTo(container)

                        .kendoMultiSelect({

                        suggest: true,

                        dataSource: options.values,

                        valuePrimitive: true

               });

    };

   but instead of the KendoMultiSelect, I want to use the Bootstrap Multiselect. How can I go about to implement this? Thanks

                       

In the example on this demo page the JavaScript function is responsible for creating and populating the DropDownList in the Grid's cell that is being edited as follows: 
Question: How does the data-bind attribute of the input element work and relate to the grid? In your example the value of options.field = 'Category'

I'm trying to understand how it relates to the code that defines the columns (specifically the template part for the category column): 
I'm not sure how this is intended to work, or how the DropDownList and the Grid work together in this example. 

Regards,
Jacques

When I create a new record in grid, it works. But after that, I do delete or update action, it will be trigger as a create action. If I reload the whole page, those action is regular. this situation ONLY happens when I create records and then edit them. It seems like that grid doesn't get refresh. I have no idea about why Create controller does not return a proper response.

 

My code as follow:

[client side]

@model TYHD.ViewModels.TREATMENT

[[First Kendo Grid]]
@(Html.Kendo().Grid(Model.CVVHF.Details)
.Name("CVVHFGrid")
.Columns(columns =>
{
    columns.Command(cmd => cmd.Edit().Text("編輯").UpdateText("更新").CancelText("取消")).Width("100px").Locked(true);
    columns.Command(cmd => cmd.Destroy().Text("刪除")).Width("100px").Locked(true);
    columns.Bound(p => p.TIME).Width("150px").Locked(true).Column.Title = "時間(HHMM)";
    columns.Bound(p => p.ITEM_01).Width("180px").Column.Title = "流速(cc/min)";
    columns.Bound(p => p.ITEM_02).Width("180px").Column.Title = "流量(cc/hr)";
    columns.Bound(p => p.ORIGINAL_TIME).Hidden();
})
.Scrollable()
.ToolBar(toolbar => toolbar.Create().Text("新增"))
.Editable(ed => ed.Mode(GridEditMode.PopUp))
.DataSource(dataSource => dataSource
    .Ajax()
    .Model(model =>
    {
        model.Id(p => p.TIME);
        model.Field(p => p.TIME).DefaultValue(DateTime.Now.ToString("HHmm"));
    })
    .Update(update => update.Action("Treatment", "Record", new { FCode = "CVVHFU", HDREC_ID = hdrec_id, FORM_ID = "CVVHF" }))
    .Destroy(update => update.Action("Treatment", "Record", new { FCode = "CVVHFD", HDREC_ID = hdrec_id, FORM_ID = "CVVHF" }))
    .Create(update => update.Action("Treatment", "Record", new { FCode = "CVVHFC", HDREC_ID = hdrec_id, FORM_ID = "CVVHF" }))
))

[[Second Kendo Grid]]
@(Html.Kendo().Grid(Model.PPDFP.Details)
.Name("PPDFPGrid")
.Columns(columns =>
{
    columns.Command(cmd => cmd.Edit().Text("編輯").UpdateText("更新").CancelText("取消")).Width("100px").Locked(true).Lockable(false);
    columns.Command(cmd => cmd.Destroy().Text("刪除")).Width("100px").Locked(true).Lockable(false);
    columns.Bound(p => p.TIME).Width("150px").Locked(true).Lockable(false).Column.Title = "時間(HHMM)";
    columns.Bound(p => p.ITEM_01).Width("180px").Column.Title = "流速(cc/min)";
    columns.Bound(p => p.ITEM_02).Width("200px").Column.Title = "TMP(kpa)";
    columns.Bound(p => p.ORIGINAL_TIME).Hidden();
})
.Scrollable()
.ToolBar(toolbar => toolbar.Create().Text("新增"))
.Editable(ed => ed.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
    .Ajax()
    .Model(model =>
    {
        model.Id(p => p.TIME);
        model.Field(p => p.TIME).DefaultValue(DateTime.Now.ToString("HHmm"));
    })
    .Update(update => update.Action("Treatment", "Record", new { FCode = "PPDFPU", HDREC_ID = hdrec_id, FORM_ID = "PP-DFP" }))
    .Destroy(update => update.Action("Treatment", "Record", new { FCode = "PPDFPD", HDREC_ID = hdrec_id, FORM_ID = "PP-DFP" }))
    .Create(update => update.Action("Treatment", "Record", new { FCode = "PPDFPC", HDREC_ID = hdrec_id, FORM_ID = "PP-DFP" }))
))

 

[[Server side]]

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Treatment([DataSourceRequest] DataSourceRequest request, Details dtl)
{
    switch (Request["FCode"].ToString())
    {
        case "CVVHDC":
        case "PPDFPC":
           //do create
            break;
        case "CVVHDU":
        case "PPDFPU":
           //do update
           break;
        case "CVVHDD":
        case "PPDFPD":
              //do delete
              break;
      }
     return View(dtl);
}

[[ViewModel]]
public class TREATMENT
{
    public string aaa { get; set; }
    public string bbb { get; set; }
    public Master CVVHF { get; set; }
    public Master PPDFP { get; set; }
}
public class Master
{
    public string FORM_ID { get; set; } = "";
    public string ccc { get; set; } = "";
    public string ddd { get; set; } = "";
    public List<Details> Details { get; set; }
}
public class Details
{
    public string ORIGINAL_TIME { get; set; } = "";
    public string TIME { get; set; } = "";
    public string ITEM_01 { get; set; } = "";
    public string ITEM_02 { get; set; } = "";
}