Hi

I often set some default values or values from the database in my form widgets. Now this works very well but if I clear the form beforehand using

$('#myform')[0].reset();

the widgets don't seem to accept the values anymore, e.g. myKendoDropDown.select(1) stopps working. This is true for other widgets as well.

What am I missing here ?

Kind regards

Alex

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