Hi I have one requirement in Kendo  UI Grid pagination.

How to show

X items / rows in 1st page

X+1 items / rows in 2nd page

X+2 items / rows in 3rd page

I have tried bellow code but not worked, it will show 2 items per page because of latest query selection.

$("div[kendo-grid]").data().kendoGrid.dataSource.query({pageSize: 3, page:1});

$("div[kendo-grid]").data().kendoGrid.dataSource.query({pageSize: 4, page:2});

$("div[kendo-grid]").data().kendoGrid.dataSource.query({pageSize: 2, page:3});

Hello,

I am trying to implement a dynamic tabstrip. Below is the code snippets after which I will try to explain the problem I am facing.

HTML:

Data source collection:

Method to change tab source based on let's say a button click (toggle)

Tab options:

Tab selection:

By default value of "vm.ToggleOption" is X which means 1 tab is shown to user. If I see the network tab when this happens, I see that "a.html" gets loaded dynamically. This page is an html page with angular controller attached. So the controller gets initialized as well. If I toggle to Y, "b.html" is loaded and its controller initialized. Everything is good so far.

Now, If I toggle back to X, "a.html" gets loaded again (I see this in network tab) which means the controller associated with this html gets initialized again. This is a problem because when the second load of "a.html" happens, the controller created during previous load already exists and hence I now have two instances of same controller which for me is a problem. If I continue to switch the toggle, every time, a new controller gets created which is quite problematic.

My question is, is this expected behavior when I use "k-data-content-url-field" option. Is there any way I can control this behavior so that it doesn't load the associated html every time?

Also, I have observed that this happens only when I change the bounded data source in some way (using filterTabsToDisplay method). If I have static tab strip like below, this problem doesn't arise.

Regards,

Vinod

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!