configuring no data template

3 posts, 1 answers
  1. newKendoUser
    newKendoUser avatar
    7 posts
    Member since:
    Oct 2017

    Posted 18 Jan Link to this post

    Hello,

    I am using a kendo UI dropdownlist bound using remote data. I have followed the example using the no data template to add a new item using the text entered on search. However, I am now wondering if it is possible to customise the no data template so that when adding a new item it's possible to capture more information that just the item value i.e. the text from search fields. I would be aiming to display a few text fields and use these to insert data on the back end. I tried adding them however the text fields seem to be disabled and I'm not sure where I've gone wrong or if it's possible?

     

    Many thanks

     

     

  2. Answer
    Neli
    Admin
    Neli avatar
    139 posts

    Posted 22 Jan Link to this post

    Hi Martina,

    In order to be able to write in the input field, which is inside the 'No Data Template' you could subscribe to the filtering event of the widget.
    filtering: onFiltering,

    The 'No Data Template' is visible only if a non existing item is entered in the input filed of the widget. So, you need to check if the template is visible or not for the current search. In case it is, you could bind a click event to the '.k-nodata' class. Then you can focus the input filed which is inside the 'No Data Template', by using the jQuery focus() method. Below is an example of implementation in the filtering event handler.
    function onFiltering(){
    //check if the 'No Data Template' is currently visible
    var display = $('.k-nodata').css('display');
          
    if(display == 'table'){
    closeDDL = false;       
    $('.k-nodata').click(function(){               
    $('#inp').focus();
    })               
    }
    }

    By default, when an item diffrent than the DropDownlist is focused, the widget will close. So, when the additional input filed is focused, the DropDownList will close. To avoid that, you can subscribe to the close event of the widget and prevent closing. 
    close:function(e){
          if(closeDDL == false){
             e.preventDefault();
        }             
    },

    In the enclosed Dojo example, when the 'No Data Template' is displayed, and the input filed in it is focused, the DropDownList could be closed by a button click.

    I hope that you will find the provided information helpful. 

    Regards,
    Neli
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. newKendoUser
    newKendoUser avatar
    7 posts
    Member since:
    Oct 2017

    Posted 25 Jan Link to this post

    Hi Neli,

     

    thanks for your reply and example. After i posted my question we decided to collect the information for a new entry by using a modal pop up instead which appears to be working fine. Should i eve need to incorporate the data capture into the no data template i will use your example thank you.

     

    Kind Regards

    Martina

Back to Top