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?

 

How do I change the background-color of the columnheader/rowHeader or grouping header in Kendo Pivot grid. I tried applying the following css in the custom.css but it is not getting affected with the grid. These classes are originally present in the kendo.common.min.css and I want to override it my custom CSS class.

how do I change or override it?

We generate a Json DataSource with C# and passing it to a JavaScript var.

var gridAllMessagesData = <%= gridAllMessagesDataSource %>;

        $(document).ready(function() {
            $("#GRIDAllMessages").kendoGrid({
                dataSource: {
                    data: gridAllMessagesData,
                    ...

Beacause of this we have to load all Data at pageload, which causes very big performance issues.
Ist there any way to load only the grid page, which the user is visiting?

Or is there any best practice to pass data to a Kendo UI grid with ASP?