configuring no data template

6 posts, 1 answers
  1. newKendoUser
    newKendoUser avatar
    10 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
    179 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
    10 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

  4. roy
    roy avatar
    11 posts
    Member since:
    Mar 2011

    Posted 02 Jun Link to this post

    Hello

    I would like to piggy back on this thread.

    I have the same requirment as OP but instead of one input in the nodatatemplate i need multiple. for example first name last name and a date field, maybe even a dropdown. 

    Is this possible/recommended?

    Thanks

    Roy

  5. Neli
    Admin
    Neli avatar
    179 posts

    Posted 04 Jun Link to this post

    Hi Roy,

    I have replied in the support thread on the same topic. For convenience I will paste my reply here as well. I would suggest you to keep the conversation in a single thread. 

    You can add the needed fields in the noDataTemplate depending on the requirements. In case you need to have a DropDownList or other widget in the noDataTemplate, you will need to initialize it after the template is visible. In order to ensure that the input element for the DropDownList is visible by the time you are trying to initialize it, you could use a setTimeout function.
    function onFiltering(){       
       setTimeout(function(){                  
        var display = $('.k-nodata').css('display');
        var ddl = $("#unitPrice").kendoDropDownList().data("kendoDropDownList");
      
        $('#inp').click(function(){             
           $('#inp').focus();
        })
       }, 0)       
    }

    In the linked Dojo, in the noDataTemplate there is a field which value is the same as the entered in the input field. Also there is a DropDownList through which the user can select the value of the unit price of the product.
     

    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.
  6. roy
    roy avatar
    11 posts
    Member since:
    Mar 2011

    Posted 05 Jun in reply to Neli Link to this post

    neli thanks this looks like just the ticket!

    I will give it a go if i hit any road blocks ill reply here.

Back to Top