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; } = "";
}

Is there a simple way to search the whole grid instead of only a specific column?

We are using the Kendo Pivot grid wrapped in Angular2 component. We are able to populate the pivot grid, but we are facing some issues in the following items
1. How do I change the background-color of the columnheader or grouping header in Pivot grid. I tried applying the following css in the custom.css but it is not getting affected with the grid.
.k-grouping-header k-grid-header th.k-header{
    background-color: #F7F7F7 !important;
}
2. How do I get the Subtotals at the group level and Grand total at the overall level? 
3. how to include the Grouped column name along with "All" in the group by RowHeaders (please refer the snapshot attached for more details)

Can anyone help me with these issues?