Hi,

 

I'm trying to utilise the custom view section of the scheduler but cannot find any documentation regarding how to use it,

 

So far i've got the view copying the day view as such:

 

 

and the template as follows:

 

 

However, i'm unable to customise the template at all as none of the options i expected would work in it is not being used.

 

For example, i'm guessing if we go by the javascript examples, we can set the start time for the day to be startTime: new date(2018 10 10 5 0 0) and the custom view will have 5am as the start time. Doing the above doesn't seem to do what i expect and so am wondering if there's an API or documentation that I can use.

 

I've also found that clicking on the "Show Full Day" button on the footer moves the view to the "Day" view when the custom view is selected. Is there a way to prevent this from happening?

 

 

Thanks

Hi,

 

I thought my scenario was pretty simple, and should be fairly easy to achieve, but it's turning out to be a bit more complex :(

 

I have a list of invoices in a grid. Invoices have a capital amount and a fee amount.

The user can select if the client wants to settle(pay) the capital amount, the fee amount, or both.

When the user checks the capital and/or fee amount the settlement amount field is populated accordingly. All information required is in the underlying model data row.

I figured I'd just add some booleans to my model, create some check box columns bound to the booleans, and create some javascript events on change or on click to just set the payment amount based on what was clicked.

However, after much searching on this forum, it seems that I have to use client templates for the checkbox columns. Then when I tried that, I see they're all checked by default, the 'check binding' doesn't appear to work, and not sure exactly what events are fired and when. I can check the checkboxes before I enable inline editing, and when i do enable inline editing, the check box ticking doesn't fire any row changed events but if I click on the open space next to it, the field goes into edit mode then only.

It just feels messy.

I've searched the forums and it seems that there is no clean way to do this:   https://www.telerik.com/forums/how-to-have-more-than-one-checkbox-column

I think with another few hours of messing around I can probably get this to work. But my question is:

What is the RECOMMENDED way to get this done?

I need additional checkbox columns. I need an event fired on changed or checked to update another field in the same row.

I will handle posting to the server later on via a button as i need to capture payment dates and references and stuff.

This is how far i got right now, checkboxes are ticked by default even though the model says false for those checkbox fields and the event is not firing at the right time, only at read which is wrong:

 

Thanks,

Bruce

I have a grid that contains a date. I would like to filter the grid based on a "start date" and an "end date" I can specify Extra(true) to get 2 date pickers in the menu filter. And I can specify "Greater Than or Equal To" and "Less Than or Equal To" as the operators. But what I would like is the first operator to only be "Greater Than or Equal To" and the second operator to only be "Less Than or Equal To"  Is there a way to do that?

Thanks,

Dave Shine

Hi,

In my MVC project I used following code to export grid data to Excel file. It worked fine. Now I want add header and footer line into the sheet. Do I have the way to do so?  Thanks.

Scenario... My grid has a list of sales people (names, email addresses, etc).  I want to assign them to the US, Canada, or both.  I envision 2 checkbox columns.  At present, I can only use the column.Select() to have Kendo create the checkbox column (along with a "select all" in the header).  I'd like to have similar functionality except they can "select all" US, "select all" Cananda, or click both to select all for both countries.  The reason for the "select all" is because the person working in the UI may need to assign 1,000 people to one or both countries and I don't want them to have to click that many times.

Are there any other mechanisms to generate multiple checkboxes (plus a "check all" in the header) beyond the column.Select() method?

I've read many Telerik and stack overflow responses to this issue that still don't cover the answer to my question. Yes my error event handler is declared as part of my datasource configuration along with my requestEnd and change event handlers and they work. So my question is this, does the error event get canceled when the requestEnd event is declared?

My datasource is defined below for any critique you may have

<script>
    var model;
    var dataSource;

    $(document).ready(function () {

        dataSource = new kendo.data.DataSource({
            transport: {
                cache: false,
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                read: {
                    url: '/Telecom/Read',
                    type: 'POST',
                    complete: function (jqXHR, textStatus) {
                        
                        //$j('#message').text('Successful Read');
                        //$j('#dialog').dialog("option", "title", textStatus);
                        //$j('#dialog').dialog('open');
                    }
                },
                create: {
                    url: '/Telecom/Create',
                    type: 'POST',
                    complete: function (jqXHR, textStatus) {
                        //refreshGrid();
                        //$j('#message').text('Successful Create');
                        //$j('#dialog').dialog("option", "title", textStatus);
                        //$j('#dialog').dialog('open');
                         
                    }
                },
                update: {
                    url: '/Telecom/Update',
                    type: 'POST',
                    complete: function (jqXHR, textStatus) {
                        //refreshGrid();
                        //$j('#message').text('Successful Update');
                        //$j('#dialog').dialog("option", "title", textStatus);
                        //$j('#dialog').dialog('open');
                        
                    }
                },
                destroy: {
                    url: '/Telecom/Destroy',
                    type: 'POST',
                    complete: function (jqXHR, textStatus) {
                        //refreshGrid();
                        //$j('#message').text('Successful Delete');
                        //$j('#dialog').dialog("option", "title", textStatus);
                        //$j('#dialog').dialog('open');
                        
                    }
                },
            },
            error: onError,
            requestEnd: onRequestEnd,
            change: onChange,
            serverPaging: false,
            autoSync: false,
            schema: {
                model: {
                    id: 'Id',
                    fields: {
                        Id: { editable: false },
                        Name: { type: 'string', validation: { required: true } },
                        Category: { type: 'string', validation: { required: true } },
                        EquipmentType: { type: 'string', validation: { required: true } },
                        Description: { type: 'string' },
                        Length: { type: 'number', validation: { required: true } },
                        Height: { type: 'number', validation: { required: true } },
                        Width: { type: 'number', validation: { required: true } },
                        CanEditLength: { type: 'boolean', validation: { required: true } },
                        CanEditHeight: { type: 'boolean', validation: { required: true } },
                        CanEditWidth: { type: 'boolean', validation: { required: true } },
                        IsObsolete: { type: 'boolean', validation: { required: false } },
                        SortOrder: { type: 'number', validation: { required: false } }
                        // SortOrder: { type: 'number', validation: { min: 1, required: false } }
                    }
                }
            }
        });

        $('#grid').kendoGrid({
            dataSource: dataSource,
            sortable: true,
            //excel: {
            //    fileName: 'Telecommunication Data.xlsx',
            //    allPages: true
            //},
            save: onSave,
            dataBound: onDataBound,
            groupable: true,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: [10, 25, 50, 100],
                pageSize: 25,
                page: 1,
            },
            scrollable: true,
            filterable: true,
            batch: false,
            height: 725,
            width: 800,
            toolbar: [{ name: 'add', text: 'Add New Telecom Record' }],
            columns: [
                { field: 'Id', title: 'Id', hidden: true },
                { field: 'Name', title: 'Name', width: '260px' },
                { field: 'Category', title: 'Category', width: '130px' },
                { field: 'EquipmentType', title: 'Type', width: '100px' },
                { field: 'Description', title: 'Description', width: '220px' },
                { field: 'Length', title: 'Length', width: '100px' },
                { field: 'Width', title: 'Width', width: '80px' },
                { field: 'Height', title: 'Height', width: '100px' },
                { field: 'CanEditLength', title: 'Can Edit Length', width: '160px' },
                { field: 'CanEditHeight', title: 'Can Edit Height', width: '160px' },
                { field: 'CanEditWidth', title: 'Can Edit Width', width: '160px' },
                { field: 'IsObsolete', title: 'Is Obsolete', width: '120px' },
                { field: 'SortOrder', title: 'Sort Order', width: '120px' },
                { command: { name: 'edit', text: "Edit", width: "160px", click: onEdit, change: onChange }, title: " ", width: "110px" },
                { command: ['destroy'], title: 'Delete', width: '110px' }],
            editable: {
                mode: 'popup',
                template: kendo.template($('#TelecommunicationsTemplate').html()),
                window: { title: 'Edit Power Equipment Details', width: 450, height: 550 }
            },
        });

        $('[class*=k-grid-add]').addClass('k-grid-edit')
        $(".k-pager-refresh").trigger('click');

        if ( $('#grid').data('kendoGrid').dataSource._page === undefined )
        {
            $('#grid').data('kendoGrid').dataSource._page = 1;
        }
            
    });

    function onDataBound(e) {
        $('.k-grid-Edit').find('span').addClass('k-icon k-edit');
        $('.k-grid-Delete').find('span').addClass('k-icon k-delete');
        //$('.k-grid-View').find('span').addClass('k-icon km-view');
    }

    //function onError(e, status) {
    //    if (e.errors) {
    //        var message = 'Errors:\n';
    //        $.each(e.errors, function (key, value) {
    //            if ('errors' in value) {
    //                $.each(value.errors, function () {
    //                    message += this + '\n';
    //                });
    //            }
    //        });

    //        // alert(message);
    //        $j('#message').text(message);
    //        $j('#dialog').dialog('option', 'title', 'Error');
    //        $j('#dialog').dialog('open');
    //    }
    //}

    function onError(e, status) {

        // Cancel changes on any grids on the page that are using this data source
        $('.k-grid').each(function (item) {
            var grid = $(this).data("kendoGrid");
            if (e.sender === grid.dataSource) {
                grid.cancelChanges();
            }
        });

        if (e.status === "customerror") {
            alert(e.errors);
        }
        else {
            alert("Generic server error.");
        }

    }

    function onSave(e) {
        e.model.Category = $('#Category option:selected').text();
        //if (e.model.Id === undefined || e.model.Id === null || e.model.Id === '') {
        //    e.model.Id = 0;
        //}

        if (e.model.Id === '') {
            e.model.Id = 0;
        }
    }

    function onChange(e) {

        var mye = e;
    }

    function onRequestEnd(e) {

        if (e.type !== "read") {

            e.sender.read();

            if (e.response.Errors !== undefined && e.response.Errors !== null && e.response.Errors !== '') {
                $j('#message').html(e.response.Errors);
                $j('#dialog').dialog("option", "title", 'Error');
                $j('#dialog').dialog('open');
            }

        }
    }

    function refreshGrid(e) {

        e.preventDefault = true;

        var mygrid = $("#grid").data("kendoGrid");
        //mygrid.dataSource.read(e.response.Data);
        e.sender.read();
        mygrid.refresh();
    }

</script>

In short I have replicated the following example:
https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/window/KendoWindow-Ajax-Form

And it works just fine. Only difference is the new row is added in it's correct spot in the grid, and not on the top as per usual. How can I, using the example linked to, place the new row on the top?

 

I'd like to use a shared DataSource control that encapsulates a complex data object with several enumerable properties. I'd like to bind each property to a separate drop down list. Is it possible to define one data source but several schemas, one for each drop down list? Values of each drop down list affect the state of the data object and it take 1 server operation to obtain the data, that is why I want to use a single shared DataSource.

Hi,

 

Is there a simple way to view more detail around what is causing an issue with a client template?

 

I have a situation where I have a grid, and I want a child grid in the detail, but when i call render all i get is an error in Chrome saying "Invalid Template" and a bunch of gumpf after that.

 

Thanks,

Bruce

Hi,

In my MVC project, I copied sample code(See below example) in my Index.cshtml file. I did not write server side function Excel_Export_Save() anywhere. Why below setting still worked in my project?
Furthermore, I changed "Excel_Export_Save" to other things, it still worked.

What  is the meaning of  “.ProxyURL(Url.Action("Excel_Export_Save", "Grid"))”  then? Thanks.

…

.Excel(excel => excel
.FileName("Kendo UI Grid Export.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("Excel_Export_Save", "Grid"))