Questions on Kendo UI for jQuery Forum

1 answer

911 views

Binding kendoForm formData to remote datasource

I am trying to fill in kendoForm elements with data retrieved from an API. Is it possible to use a observable object and bind to formData? How can this be done otherwise?

Form

answered on 12 Oct 2021

1 answer

122 views

Bind Treeview to network share?

Is the capability there for the Treeview control to bind to a network share location (\\server\sharedfolder\subfolder), and then be able to make a selection and return the filename to be passed to another operation?

TreeView

answered on 12 Oct 2021

1 answer

206 views

Is there any way to edit individual cell like this in Kendo Grid?

I need to implement cell editing in Kendo Grid and save the cell value like this. Is there any way to do this? The given Inline InCell editing mode doesn't solve my purpose. please find the attached screenshot.

Grid

answered on 11 Oct 2021

3 answers

155 views

Gantt: Reordering items sending 2 update requests per item

Hi,

I recently noticed quite a few server requests being returned as conflicting when items in the gantt timeline are reordered.

A console output in the parameterMap function shows, that for every item affected by reordering 2 update requests are prepared and sent to the server.

The parameterMap function offers no way of cancelling a request from being executed since this only exists to transform data.

This is not specific to our implementation and can be reproduced in a dojo with the current Kendo version (2021.2.616): https://dojo.telerik.com/AGodEBIb

Is there a specific reason behind this?
Not only seems doubling the number of requests inefficent to me. Sending a second update request before the first one has even been resolved by the server, might lead to issues for other users as well.

In the meantime thanks in advance for any tips how I can prevent the second update from being sent to the server.

Gantt

answered on 11 Oct 2021

1 answer

858 views

Grid Column Filtering using multiple and / or conditions

We currently using the Grid with the standard filtering options

However, this only allows two conditions.

Can we extend the filtering functionality of the Grid to support multiple and / or conditions? Something akin to Kendo UI Filter Widget

Filter

Grid

answered on 08 Oct 2021

1 answer

671 views

Add new record not working when I use more than one template for the grid column

Hi,

I am trying to include a dropdownlist in some cells, and a special template for the fields, but that made my ADD-New-Record to stop working in all situations (inline - incell - popup) I tried them all but the button looks like it is not firing when I click it.

So I start searching the whole web to find the problem but could'nt.

endly I figured out that when I keep only one template in my grid then the create button is working fine, but when I have more than one it stops.

Another problem I am facing is, the delete and edit functions work perfectly, but when I try to post to the db it looks fine and I can see in dev-tools a response 200/green, but nothing is saved to the db, and after a lot of tries I just found that when I am choosing any from the drop down on the new record it takes the result as an object, but if I edit a not empty cell from the dropdown list it takes it as a number as supposed.

So may can somebody help me to figure it out?

Here is my script.js:

$(document).ready(function () {
    $("#grid").kendoGrid({
        dataSource: {
            transport: {
                read:           { url: "fun.php?action=api" },
        
                create:         { url: "insert.php?action=insert_channel", type: "POST",
                                complete: function(e) {$("#grid").data("kendoGrid").dataSource.read(); } },
                update:         { url: "update.php?action=upd", type: "POST",
                                complete: function(e) {$("#grid").data("kendoGrid").dataSource.read(); } },
                destroy:        { url: "destroy.php?action=del_channel",type: "POST",
                                complete: function(e) {$("#grid").data("kendoGrid").dataSource.read(); } }
            },

            schema: {
                data:"data",
                model: {
                    id:"id",
                    fields: {
                        nr:                             { type:"string", editable:false },
                        name:                           { type:"string" , validation : { required : true }},
                        pic:                            { type:"string", editable:false, validation : { required : true } },
                        link:                           { type:"string", validation : { required : true } },
                        group:                          { type:"int", validation : { required : true } },
                        lang:                           { type:"int", validation : { required : true } },
                        status:                         { type:"int", validation : { required : true } },
                        up:                             { type:"string" }
                    }
                }
            },
            pageSize: 10
        },
        height:750,
        scrollable: true,
        sortable: true,
        pageable: true,
        groupable: {
            messages: {
                empty: "Drag any column name here to group your channels"
            }
        },
        editable: {
            mode: "popup",
            update: true,
            destroy: true,
            confirmation: "Are you sure you want to remove this Channel?" //text for the confirmation message
        },
        columns: [
            {
                template: "<center><div class='#: data.class #'>#: nr #</div></center>",
                field: "nr",
                title: "Nr",
                width: 50
            },
            {
                template: "<img width='64' height='64' style='vertical-align:middle; border-radius: 15%;' src='pics/#: data.pic #' alt=''>&nbsp<span class='#: data.class #'>#: data.pic # </span>",
                field: "pic",
                title: "pic"
            },
            {
                template: "<div class='#: data.class #'>#: name #</div>",
                field: "name",
                title: "name",
                width: 100
            },
            {
                template: "<div class='#: data.class #'>#: link #",
                field: "link",
                title:"link",
                width:650
            },
            {
                template: "<div class='#: data.class #'>#: group #</div>",
                field: "group",
                title:"group",
                editor:groupEditor
            },
            {
                template: "<div class='#: data.class #'>#: lang #</div>",
                field: "lang",
                title: "lang",
                editor:langEditor
            },
            {
                template: "<div class='#: data.class #'>#: status #</div>",
                field: "status",
                title: "status",
                editor:statusEditor
                //template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #'
            },
            // adding command in the columns, name - the command name, text - text to be set on the button
            { command: [
                {
                    name: "edit",
                    text: { // sets the text of the "Edit", "Update" and "Cancel" buttons
                        edit: "",
                        update: "Update",
                        cancel: "Cancel"
                    }
                }, 
                { name: "destroy", text: "" } // sets the text of the "Delete" button
            ],
            // sets the title and the width of the commands column
            title: "Action", 
            width: "300px"
        }
        ],
        toolbar: [
            //name - name of the available commands, text - text to be set on the button
            { name: "create", text: "New" },
            { name: "save", text: "Save" },
            { name: "cancel", text: "Cancel" },
            { name: "excel", text: "Export to Excel" }
        ],
        // filter menu settings
        filterable: {
            name: "FilterMenu",
            extra: true, // turns on/off the second filter option
            messages: {
                info: "Custom header text:", // sets the text on top of the filter menu
                filter: "CustomFilter", // sets the text for the "Filter" button
                clear: "CustomClear", // sets the text for the "Clear" button
                
                // when filtering boolean numbers
                isTrue: "custom is true", // sets the text for "isTrue" radio button
                isFalse: "custom is false", // sets the text for "isFalse" radio button
                
                //changes the text of the "And" and "Or" of the filter menu
                and: "CustomAnd",
                or: "CustomOr"
            },
            operators: {
                //filter menu for "string" type columns
                string: {
                    eq: "Custom Equal to",
                    neq: "Custom Not equal to",
                    startswith: "Custom Starts with",
                    contains: "Custom Contains",
                    endswith: "Custom Ends with"
                },
                //filter menu for "number" type columns
                number: {
                    eq: "Custom Equal to",
                    neq: "Custom Not equal to",
                    gte: "Custom Is greater than or equal to",
                    gt: "Custom Is greater than",
                    lte: "Custom Is less than or equal to",
                    lt: "Custom Is less than"
                },
                //filter menu for "date" type columns
                date: {
                    eq: "Custom Equal to",
                    neq: "Custom Not equal to",
                    gte: "Custom Is after or equal to",
                    gt: "Custom Is after",
                    lte: "Custom Is before or equal to",
                    lt: "Custom Is before"
                }
            }
        }
    });

/* ***********************group**************************** */
function groupEditor(container, options) {
$('<input name="' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
        autoBind: false,
        optionLabel: "Group...",
        dataTextField: "group",
        dataValueField: "id",  

        dataSource: {
            transport: {
            read:           { url: "fun.php?action=cat_channels" }
        },
        schema: {
           data: "data",
           model: { id: "id",
                    fields: {group:         {editable: false } }
            }
        },

    },
});
}
/* ***********************language**************************** */
function langEditor(container, options) {
$('<input name="' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
        autoBind: false,
        optionLabel: "Language...",
        dataTextField: "lang",
        dataValueField: "id",  

        dataSource: {
            transport: {
            read:           { url: "fun.php?action=lang_channels" }
        },
        schema: {
           data: "data",
           model: { id: "id",
                    fields: {lang:         {editable: false } }
            }
        },

    },
});
}
/* ***********************status**************************** */
function statusEditor(container, options) {
$('<input name="' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
        autoBind: false,
        optionLabel: "Status...",
        dataTextField: "state",
        dataValueField: "id",  

        dataSource: {
            transport: {
            read:           { url: "fun.php?action=state_channels" }
        },
        schema: {
           data: "data",
           model: { id: "id",
                    fields: {state:         {editable: false } }
            }
        },

    },
});
}



});

Here is insert.php

<?php
include 'config.php';

/* **************************************insert channels*************************** */
function insert_channel() {
    global $conn;
    if(isset($_POST['submit']))
  {
    $name       =htmlspecialchars($_POST['name'] ?? '');                               
    $pic        =htmlspecialchars($_POST['pic'] ?? '');                   
    $link       =htmlspecialchars($_POST['link'] ?? '');                                           
    $group      =htmlspecialchars($_POST['group'] ?? '');                 
    $lang       =htmlspecialchars($_POST['lang'] ?? '');  
    $status     =htmlspecialchars($_POST['status'] ?? '');               

    $sql="INSERT INTO channels (
                                name,
                                pic,
                                link,
                                cat_id,
                                language_id,
                                status
                                )
                                VALUES 
                                (
                                '$name',
                                '$pic',
                                '$link',
                                '$group',
                                '$lang',
                                '$status'
                                )";
    $query=mysqli_query($conn, $sql);

    if ($sql) {
      echo json_encode($sql);
    }
    else {
      header("HTTP/1.1 500 Internal Server Error");
    }

}

}




/* -------------------------------switch($_GET['action'])| page.php?action=x ------------------------------------------- */    
switch($_GET['action'])
{
    case 'insert_channel': insert_channel();
    break;

    default :
    echo 'Please check the parameters';
}

Thanks in advance

DropDownList

Grid

answered on 07 Oct 2021

1 answer

449 views

LESS vs SASS for Kendo UI for jQuery

Hi,

Forgive me if this has been answered before, but I haven't been able to find it.

What would be the reasons to chose LESS over SASS or vice-versa when developing with Kendo UI for jQuery?

I am rather new at this, so the only obvious reason to chose LESS that I have found is that it has more existing themes (currently 16) than SASS (4). This should make it easier to find a LESS theme that matches your requirements and modify for final touches.

What other differences might there be? (In terms of using it with Kendo UI for jQuery, I am not talking about a comparison LESS vs SASS in general)

Thanks,

Fredrik

General Discussions

Styling

answered on 07 Oct 2021

1 answer

741 views

Cancel a transport read request mid-flight

We have defined a new data source which executes a $.ajax to retrieve some data from a remote server.

return new kendo.data.DataSource({
    pageSize: 10,
    serverPaging: true,
    serverSorting: true,
    serverFiltering: true,
    type: "json",
    sort: {
      field: "name",
      dir: "asc"
    },
    transport: {
      read: function (options) {}....

Now lets consider the following scenario:

The read function is triggered and the call is made to the server but the server is being slow. In the meantime a new read request needs to be made and we want to abort the current read request and issue a new one.

Using vanilla Jquery we just do something like

myAjaxRequest.abort()

However, I can not seem to find a similar method to abort a read request (or any request) in the Kendo Data Source Object.

Are you able to offer a solution?

Data Source

answered on 06 Oct 2021

1 answer

460 views

Kendo UI Drawer show/hide not work

Hello:

I'm newer for Kendo UI for jquery. I want to use drawer widget to get remoting data.
But I found that after getting the remoting data and show on drawer content.
The drawer show/hide function will be not work (Below toggleDrawer() function is work if not performing get data).Can somebody help me?

Below is my code.

<div id="toolbar"></div>

<div id="drawer">
<div id="drawerContainer" style="margin-left: 5px;">
</div>
</div>
<script type="text/x-kendo-template" id="drawerTemplate">
<ul>
<li data-role='drawer-item' class='k-state-selected'>
<span class='k-icon k-i-inbox'></span>
<span class='k-item-text' data-id='Inbox' data-url='test2.html'>
Inbox
</span>
</li>
<li data-role='drawer-separator'></li>
<li data-role='drawer-item'><span class='k-icon k-i-notification k-i-bell'></span><span class='k-item-text' data-id='Notifications'>Notifications</span></li>
<li data-role='drawer-item'><span class='k-icon k-i-calendar'></span><span class='k-item-text' data-id='Calendar'>Calendar</span></li>
<li data-role='drawer-separator'></li>
<li data-role='drawer-item'><span class='k-icon k-i-hyperlink-email'></span><span class='k-item-text' data-id='Attachments'>Attachments</span></li>
<li data-role='drawer-item'><span class='k-icon k-i-star-outline k-i-bookmark-outline'></span><span class='k-item-text' data-id='Favourites'>Favourites</span></li>
</ul>
</script>
<script>
$(document).ready(function () {
var drawerInstance = $("#drawer").kendoDrawer({
mode: "push",
template: $("#drawerTemplate").html(),
autoCollapse: false,
itemClick: onItemClick,
mini: true
}).data("kendoDrawer");

drawerInstance.show();
});

function onItemClick(e) {
var drawerName = e.item.find(".k-item-text").attr("data-id");
//alert(drawerName);
var nextUrl = '/api/test/inbox'
if (drawerName == 'Inbox') {
nextUrl = 'grid1.html'
}
$.ajax({
url: nextUrl,
method: 'GET',
success: function (result) {
$('#drawerContainer').html(result);
}
});
}

function toggleDrawer() {
var drawerInstance = $("#drawer").data().kendoDrawer;
var drawerContainer = drawerInstance.drawerContainer;

if (drawerContainer.hasClass("k-drawer-expanded")) {
drawerInstance.hide();
} else {
drawerInstance.show();
}
}

$("#toolbar").kendoToolBar({
items: [
{ type: "button", icon: "menu", attributes: { "class": "k-flat" }, click: toggleDrawer },
{
template: "<h3 style='margin-left: 25px;'>RA Web</h3>" },
{ type: "spacer" },
{ type: "button", icon: "information", attributes: { "class": "k-flat" } },
{ type: "button", icon: "gear", attributes: { "class": "k-flat" } }
]
});
</script>

Thanks.

Drawer

answered on 06 Oct 2021

1 answer

123 views

When using two MultiSelect widgets, only one renders

I need to use two MultiSelect widgets side by side and only one will render. The second <select> element just gets completely omitted from the DOM. There are no javascript errors and both widgets are getting initialized. The second one just doesn't show up. I was unable to replicate the issue with a simple working example but I have included my HTML, the HTML that gets rendered, and my javascript for initializing the widgets. Thanks in advance for any help.

My HTML:

<div id="scheduleToolContainer" class="wrapper">
    <div class="notificationPrompt"></div>

    <div id="scheduleToolContent">

        <button id="btnPrevDate" type="button" class="btn btn-light border"><i class="fas fa-arrow-left"></i></button>
        <input id="scheduleDatePicker" title="datepicker" />
        <button id="btnNextDate" type="button" class="btn btn-light border"><i class="fas fa-arrow-right"></i></button>

        <select id="ddAttendingProvider" style="width:250px" data-target-url="@Url.Action("GetAttendingProviders", "ScheduleTool", new { area = "PatientLists" })" />
        <select id="ddInsurance" style="width:250px" data-target-url="@Url.Action("GetInsuranceList", "ScheduleTool", new { area = "PatientLists" })" />

        <button id="btnViewSchedule" class="btn btn-primary">Apply</button>

        <div id="scheduleGrid" class="mt-2 rounded" data-schedule-url="@Url.Action("GetScheduleItems", "ScheduleTool",  new { area = "PatientLists" })"></div>

    </div>

    <button id="btnPrintEncounters" class="btn btn-light border mt-2" data-target-url="@Url.Action("PrintSelectedEncounters", "ScheduleTool", new { area = "PatientLists" })"><i class="fas fa-file-medical-alt fa-2x"></i></button>

    <div id="gridLoadingSpinner" class="text-center text-secondary"><i class="fas fa-spinner fa-spin fa-3x"></i></div>

</div>

HTML in the DOM:

Javascript (get's called when the page loads):

function loadFilters() {
    $("#ddAttendingProvider").kendoMultiSelect({
        placeholder: 'All',
        dataSource: {
            transport: {
                read: {
                    url: attProvidersUrl,
                    type: "POST",
                    data: function () {
                        return {
                            filter: Filters.toRequestFilter(),
                            date: $('#scheduleDatePicker').val()
                        }
                    }
                }
            }
        }
    });

    $("#ddInsurance").kendoMultiSelect({
        placeholder: 'All',
        dataSource: {
            transport: {
                read: {
                    type: "POST",
                    url: insuranceListUrl,                 
                    data: function () {
                        return {
                            filter: Filters.toRequestFilter(),
                            date: $('#scheduleDatePicker').val()
                        }
                    }
                }
            }
        }
    });
}

MultiSelect

answered on 06 Oct 2021