I am a beginner working on Kendo Grid. I wanted to load the data on demand in the grid, like :

- I set the page size to 50, when a user scrolls down to 50 rows, the
grid should retrieve next 50 rows from database and display it on
demand.To do this, I changed "scrollable: true" to "scrollable: {virtual: true}". But this disables scrolling in the grid.

- I am stuck, let me know if anyone has faced the same issue and found any solution for it.
Here is my code

=================================================

var managecustomerGrid = $("#customerGrid").kendoGrid({
     dataSource: {
        schema: {
         data: "results",
         total : "totalRecords",
         model: {
            id: "SRNUMBER",
            fields: {
              SRNUMBER : {type: 'number'},
              CUSTOMERNAME : {type: 'string'},
              DATEPAID : {type: 'string'}
              }
           }
         },
         serverPaging: true,
         serverSorting: true,
         serverFiltering: true,
         pageSize: 20,
         batch: false,
         transport: {
             read: {
                 type: "POST",
                 url: "/customer/customer.cfc",
                 dataType: "json",
                 error: function (xhr, error) {
                          alert('Error In Getting Customer Information.');
                     }
             },
             parameterMap: function(options, type) {
                  return {
                        ntPageNumber: options.page,
                        ntRowLimit: options.pageSize,
                        ntskip: options.skip,
                        vcSortOrder: JSON.stringify(options.sort),
                        vcFilterCondition: JSON.stringify(options.filter)
             }
         }
     }
},
toolbar: kendo.template($("#template").html()),
height: 600,
scrollable: {
      virtual: true
   },
filterable: {
       operators: {
             string: {
                  contains: "Contains",
                  startswith: "Starts with",
                  endswith: "Ends with",
                  eq: "Is equal to",
                  doesnotcontain: "Doesn't contain"
             }
      }
},
sortable: true,
columns: [
       { field: "SRNUMBER", title: "SR No.", width: "80px", template: "<span id='#=SRNUMBER#'>#=SRNUMBER#</span>"},
       { field: "CUSTOMERNAME", title: "Customer Name", width: "110px"},
       { field: "DATEPAID", title: "Date", width: "110px"},
       { command: ["edit","detail","cancel"], title: "&nbsp;", title: "Actions", width: "130px", filterable: false, sortable: false}
    ]
});

========================================================

Thanks for your help.

Hi all,

We are currently in a server migration procedure, which resulted in unexpected complications. In consequence, the Bower authentication procedure is failing. The responsible team is working on that issue for the past several hours. We will update the current thread with more details when we have them.

Please, excuse us for the caused inconvenience and thank you for your patience! 

Hi I am trying to set the title of my dialog window dynamically but get an error 

Hello, I have buil a grid in my app and I need to filter the grid using different criteria from outside the grid. I attach an scrrenshot to clarify my issue:

 

I need to select something on the combobox and filter it on the client side, as well as write something on the text box and filter teh grid below.

 

Thank you!

Hello,
I have problem with the confirm dialog in change event for combobox.

Link: https://dojo.telerik.com/UhEpeZod/6
 
The problem appears when I put any new text into the combobox and press enter. Why is the done function executed first and no confirm dialog shows? Is it a bug?

 Thank you and kind regards

Hello

I'm not sure if I'm right here but I couldn't find a topic for kendoDialog...

I have a dialog mask in my application (KendoUI, Javascript/JQuery) with two buttons: "Ok" and "Cancel". I would like to set the focus to the "Ok" button by default or at least when the dialog window is opened. I tried different things like setting .focus() on the first found .k-button, I tried to simulate a TAB command (that sets the focus to the "OK" button doing this by keyboard) on kendoDialog event "open", but everything around that didn't work. I assume that .focus() doesn't work because its not an official HTML button.

Is there a (simple) way to set the focus in a kendoDialog to a button?

Regards

Is there a way to auto fit all of the columns? Or do I just have to go through and set a specific width on all of the columns?

My validation messages are floating over the datetime control. Beneath the dropdownlist and right next to input controls. Is there a way to set the position of the controls?

Hello,
at this link http://demos.kendoui.com/web/styling/index.html i see in your page a theme chooser.

I would like to implement the same theme chooser on my website but i cannot find the method kendoThemeChooser() that you use on the page.

Can you help me to implement this kind of theme changer with colors preview?

Best Regards,
ECN2 Technologies

I have a view where I am dynamically adding a number of textareas when the view loads.

I am then creating an editor out of all them by applying: $(".im_editor").kendoEditor({  ...

This is working fine, but next I need to add several dropdowns to the toolbars to insert html from several different categories.

It was quickly apparent that the "insertHtml" tool would not work as it can only be used once per editor (although does function in each of the rendered editors).

Next I tried using the "customTemplate" tool following the example on the Demos page.

This works fine on the first rendered editor, but does not render properly or function on the remaining editors.

Can someone provide assistance on how to accomplish this?  

 

@foreach(var sec in Model.Sections)
{
    <div class="internalapproval_investmemo_sectitle">@sec.SectionName</div>
    <table sectionid="@sec.SectionID">
        @foreach(var entry in Model.Entries.Where(e => e.SectionID == sec.SectionID).OrderBy(e => e.EntrySeqNo))
        {
            <tr>
                <td entryid="@(sec.SectionID.ToString() + "_" + entry.EntryID)">
                    <textarea id="@sec.TextAreaName" name="@("sec" + sec.SectionID.ToString())" class="im_editor" style="height:150px;">@(HttpUtility.HtmlDecode(entry.EntryText))</textarea>
                </td>
            </tr>
        }                                        
    </table>
}

<script type="text/x-kendo-template" id="insertToken-template">
    <select id='insertTokens' style='width:110px'>
        <option value=''>Insert token</option>
        <option value='{token: dealname}'>Deal Name</option>
        <option value='{token: dealtype}'>Deal Type</option>
        <option value='{token: sectortype}'>Sector Type</option>
    </select>
</script>

<script>   

    $(document).ready(function () {

        $(".im_editor").kendoEditor({
            resizable: { content: true },
            tools: [
                "bold",
                "italic",
                "underline",
                { name: "insertHtml",
                    items: [
                        { text: "token: UPB", value: "{token: upb}" },
                        { text: "token: Investment", value: "{token: investment}" }
                    ]
                },
                {
                    name: "customTemplate",
                    template: $("#insertToken-template").html()
                }
            ]
        });

        $("#insertTokens").kendoDropDownList({
            change: function (e) {
                var editor = $(".im_editor").data("kendoEditor");
                editor.exec("inserthtml", { value: e.sender.value() });
                console.log("change fired");
            }
        });

    });
</script>