Hi

I have a Kendo grid with first 4 columns that are frozen. When i click on Inline Edit, all editable column show up as editable. However when i cancel the edit, only the columns that are frozen become non editable. the columns that are not frozen still remain as editable and the Update / Cancel button still remains and does nothing on further press. it doesnt change itself back to "Edit" button.

Not sure what is wrong here. Code attached below. Any help is appreciated.

@(Html.Kendo().Grid<GoldenBook>()
      .Name("grid")
      .Columns(columns =>
      {
          columns.Bound(p => p.Id).Width(100).HiddenField();
          columns.Bound(p => p.SORId).Width(100).HiddenField();
          columns.Bound(p => p.SOR).ClientTemplate("#=SOR.SOR#").EditorTemplateName("SORList").Width(150).MultiFilterableSearch().Locked(true);
          columns.Bound(p => p.Company).Width(100).MultiFilterableSearch().Locked(true);
          columns.Bound(p => p.GLAccount).Width(150).MultiFilterableSearch().Locked(true);
          columns.Bound(p => p.AccountingUnit).Width(150).MultiFilterableSearch().WrapHeader().Locked(true);
          columns.Bound(p => p.GLAccountType).Width(200).MultiFilterableSearch().WrapHeader();
          columns.Bound(p => p.GLAccountCategory).Width(300).MultiFilterableSearch().WrapHeader();
          columns.Bound(p => p.GLAccountName).Width(500).MultiFilterableSearch();
          columns.Bound(p => p.isActive).Width(100).MultiFilterableSearch();
          columns.Bound(p => p.DateModified).Width(200).DateTimeFormat().MultiFilterableSearch();
          columns.Bound(p => p.UserId).Width(200).MultiFilterableSearch();
          columns.Command(command => { command.Edit().Text("Edit"); }).Width(200);
      })
          .HtmlAttributes(new { style = "width: 99.5%; " })
            .Scrollable()
            .Sortable()
            .Reorderable(reorderable => reorderable.Columns(true))
            .Resizable(resizable => resizable.Columns(true))
            .Filterable()
            .ColumnMenu()
            .Events(e => e.Edit("OnEdit"))
            .Pageable(pageable => pageable
                .Refresh(false)
                .PageSizes(new int[] { 20, 50, 100, 500, 1000 })
            )
            .Editable(editable => { editable.Mode(GridEditMode.InLine).CreateAt(GridInsertRowPosition.Top); })
            
            .ToolBar(toolbar =>
            {
                toolbar.Template(
                @<text>
<div class="toolbar">
    <div id="gridtoolbar">
        <div id="gridtoolbar-left">@item.CreateButton()</div>
        <center>
<div id="gridtoolbar-main">@ViewBag.Title
</div>
        </center>
        <right>
<div id="gridtoolbar-right">
            <a class="k-button k-button-icontext k-grid-excel" href="#"><span class="k-icon k-i-excel"></span>Export to Excel</a>
            <input id="chkAllPages" type="checkbox" ng-model="allPages" ng-change="changeAllPages()" />&nbsp;&nbsp;All Pages
</div>
        </right>
    </div>
</div>
</text>);
            })
            .Excel(excel => { excel.FileName(@ViewBag.Title + ".xlsx"); excel.Filterable(true); excel.AllPages(false); })
            .DataSource
            (dataSource => dataSource
                .Ajax()
                .Batch(false)
                .ServerOperation(false)
                .PageSize(50)
                .Events(events => { events.Error("onError").RequestEnd("onRequestEnd"); })
                .Model(model =>
                {
                    model.Id(p => p.Id);
                    model.Field(p => p.Id).DefaultValue(0);
                    model.Field(p => p.SORId).DefaultValue(0);
                    model.Field(p => p.DateModified).DefaultValue(DateTime.Now);
                    model.Field(p => p.UserId).DefaultValue(@Utils.GetUserName());
                    model.Field(p => p.SOR).DefaultValue(new SORList() { SORId = 0, SOR = "- Select SOR -" });
                })
                .Create(update => update.Action("Create=GoldenBook", "Admin").Data("sendAntiForgery"))
                .Read(read => read.Action("ReadGoldenBook", "Admin"))
                .Update(update => update.Action("UpdateGoldenBook", "Admin").Data("sendAntiForgery"))           
            )
    )


<script type="text/javascript">
    function OnEdit(e) {
        if (e.model != null && e.model.isNew() == false) {
            $('input[name=Id]').parent().html(e.model.Id);
            $('input[name=SORId]').parent().html(e.model.SORId);
            $('input[name=SOR]').parent().html(e.model.SOR.SOR);
            $('input[name=Company]').parent().html(e.model.Company);
            $('input[name=GLAccount]').parent().html(e.model.GLAccount);
            $('input[name=AccountingUnit]').parent().html(e.model.AccountingUnit);
        }
        if (e.model != null && e.model.isNew() == true) {
            $('input[name=Id]').parent().html(e.model.Id);
            $('input[name=SORId]').parent().html(e.model.SORId);
        }
    }
</script>

I alter css and rotated vertically, but how to keep the position always to right side of the grid

Stack Overflow question

Hello,

I have 4 data points on this line chart, and it looks like the last data point is getting cutoff.  (Actually is being combined into the third data point).

Example here: https://jsbin.com/yejage/3/edit

It will show the last data point if I change the categoryAxis type to "category" or even if I change the "Date" value of the last data point to "T05:00:00" as the Time, instead of "T00:00:00".

Am I missing something here?  Would like to keep categoryAxis as type="date" to take advantage of built-in date filtering and formatting.  Would also like to not include the time, even though it is shown in the example.

Thanks for your help.

Help me please.
how to stretch the contents of the table the full width and add x-scroll?

Okay so what I'm trying to do is relatively simple but I can't figure out how to get it work properly.

I have a grid that is using inline editing. I don't really care for the Kendo Toolbar on top of the grid so I have an "Add New" button that is in a div outside of the grid. My question is, how do I call the Kendo Add New event when that button is clicked so that a new entry in the grid appears?

Thanks!

Hi ,

i have written a small module with a kendo grid which i have to use in several projects/places/files:

guimodule.kundensuche = (function() {

var kundenDataSource = new kendo.data.DataSource ( {

type: "json",
pageSize: 20,
transport: {
read: {
url: "http://................/DataService/json/kunden/select_for_suchgrid.pvx?sessionid=" + rkkutils.getQueryParam("sessionid"),
type: "post",
dataType: "json"
}
},

});



$("#kundensuchgrid").kendoGrid({

dataSource: kundenDataSource,

height: 550,
sortable: true,
selectable: "row",
change: function(e) { console.log("Module"); this.trigger("kdnrSelected");},
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "kdnr",
title: "KDNR",
width: 55

}, {

template: "#: name1 #<br>#: name2 #<br>#: name3 #",
title: "Name",
width: 240
}, {
field: "strasse",
title: "Strasse",
width: 240

}, {
field: "landkz",
title: "Land",
width: 50

}, {
field: "plz",
title: "PLZ",
width: 65
}, {
field: "ort",
title: "Ort",
width: 180
}

]



});

var kundensuchgrid = $("#kundensuchgrid").data("kendoGrid");



var createEingabeFilter = function createEingabeFilter() {
$("#kundensuchfilter").html("<input class='k-textbox' type='text' id='SearchKunden'/>")

};

}

$("#SearchKunden").on("keyup", function(e){


var q = this.value;

if (q == '') {
this.placeholder=speech.suchbegriff;
}
kundensuchgrid.dataSource.query({
page:1,
pageSize:20,
filter:{
logic:"or",
filters:[
{field:"kdnr", operator:"contains",value:q},
{field:"name1", operator:"contains",value:q},
{field:"name2", operator:"contains",value:q},
{field:"name3", operator:"contains",value:q},
{field:"strasse", operator:"contains",value:q},
{field:"plz", operator:"contains",value:q},
{field:"ort", operator:"contains",value:q},
{field:"matchcode", operator:"contains",value:q},
{field:"landkz", operator:"contains",value:q}

]
}
});


});

return {
createEingabeFilter: createEingabeFilter

}


}());

Now i can use this in an html file like this:

<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.blueopal.min.css"/>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.blueopal.mobile.min.css"/>

<script src="../../kendoui/js/jquery.min.js"></script>
<script src="../../kendoui/js/kendo.all.min.js"></script>
<script src="../../kendoui/js/cultures/kendo.culture.de-DE.min.js"></script>

<title>Aussendienst-Informationen</title>

</head>
<body>
<div id="kundensuchgrid" />


<script src="../JsGuiModule/js/rkkutils.js"></script>

<script src="../JsGuiModule/js/guimodule.js"></script>

<script src="../JsGuiModule/kundensuche/kundensuche.js"></script>
</body>

</html>

Now i want to fire a custom event with the name "kdnrChanged"  as soon as a new row is selected in the grid and i want to have an event listener for this

event in  the html file. How can i do this ?

Regards

Dirk

I have a grid in batch edit mode. I have two issues re tabbing when navigating the grid cell:

1: If i have a read-only ID column (the first column), how can I avoid tabbing into the cell when tabbing though the grid? I set the column attributes tabindex property to a negative number AND I have a custom editor in the cell with a negative tabindex  value, which effectively makes it a read-only cell.However the table cell still gets tabbed into when navigating the row. I want to the column to be skipped completely when tabbing.

2:  When tabbing into a command column. Is it possible to immediately activate the first command button? Right now the user must hit the Enter key twice to trigger the command via the keyboard. Once to highlight the  first button and again to trigger the click event.