Delete Muliple Rows having Checkbox and using common Delete Button

10 posts, 1 answers
  1. monsoon
    monsoon avatar
    10 posts
    Member since:
    Jun 2013

    Posted 04 Jul 2013 Link to this post

    Could any one help me how to delete muliple Rows in grid each having checkboxes and by clicking common delete button will delete the selected rows.Clicking on rows apart from checkbox  should not make look like as  selected /enabledor in different colour.
    I am using only Kendo UI  web and Framework .. So  my code is like

    MyTemplate:
    $("#rfgGrid").kendoGrid(
    {  
    dataSource : DataSource,
    editable : true, 
    height : 260,
    columns : [
    {
    field : "select",
    title : "Select",
    width : "16%",
    template: "<input type='checkbox' class='checkbox' />"
    },
    {
    field : "name",
    title : "Name",
    width : "35%"
    }] 
    });

    My Java Script:

    $('#rfgGrid input:checked.checkbox').each(function(){
     var dataItem1= grid.dataItem($(this).closest('tr'));
    grid.dataSource.remove(dataItem1);
    }

    By this only one row is got deleted even if I select many in the check box..

    could any one guide me or help me wit code on http://jsfiddle.net or http://jsbin.com..

    Regards,
    Winds


  2. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 04 Jul 2013 Link to this post

    Hi Winds,

    You can find all the checked inputs and remove the row that they reside on like this:

    $("#grid").find("input:checked").each(function(){
                grid.removeRow($(this).closest('tr'));
              })

    I have created a JSBin with this implementation, showing how to delete multiple rows based on a checkbox:

    http://jsbin.com/ijugav/8/edit
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. monsoon
    monsoon avatar
    10 posts
    Member since:
    Jun 2013

    Posted 05 Jul 2013 Link to this post

    Thank you very much for your timely help Kiril.. But I end up with multiple confirmation alert for each row Instead I need only one alert prompt altogether.Can you please help me ...my editable is "editable:"true inline"thanks in Advance,
  5. monsoon
    monsoon avatar
    10 posts
    Member since:
    Jun 2013

    Posted 05 Jul 2013 Link to this post

    Thank you Kiril. But I end up with multiple confirmation alert for each row Instead I need only one alert prompt altogether.Can you please help me . I use "editable:"true inline"
  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 05 Jul 2013 Link to this post

    Hello Winds,

    You can use editable.confirmation configuration property to prevent the confirmation dialogs. Please keep in mind that at the moment it is not possible to delete multiple rows and show only one confirmation window. The DataSource remove() and the Grid removeRow() methods take only one argument, therefore it is not possible to limit the number of confirmations.

    I have modified the JSBin to show the new implementation.

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. monsoon
    monsoon avatar
    10 posts
    Member since:
    Jun 2013

    Posted 08 Jul 2013 Link to this post

    Thank you very much for your timily help  Kiril..I accomplish the requirement through my  custom coding..like by making confiramtion:false in editable and using HTML confirm();.Thank you
  8. Razack
    Razack avatar
    1 posts
    Member since:
    May 2011

    Posted 30 Sep 2014 in reply to Kiril Nikolov Link to this post

    This only removes from current pages. But I need to remove from multiple pages at a time. So I tried with 
    grid.dataSource.data().remove(item); 
    It is working for few items. If selected records are big(say 70 records), it makes hanging problem. See my code blelow

    function callOnDelete(gridName, arrayName) {
    var grid = $('#' + gridName).data('kendoGrid');
    var data = grid.dataSource.data();

    //No of records to be deleted
    var arrayLength = Object.keys(arrayName).length;

    for (var i = 0; i < data.length; i++) {
    var dataItem = data[i];

    if (dataItem.hasOwnProperty('uid')) {
    if (arrayName[dataItem['uid']]) {
    data.remove(dataItem);
    arrayLength = arrayLength - 1;
    if (arrayLength <= 0) break;
    }
    }
    }
    }
  9. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 01 Oct 2014 Link to this post

    Hi Razack,

    As your question differs from the original topic, would you mind opening a separate support request with more detailed information on the issue that you are facing and a runnable sample of what you have tried so far and we will be happy to help!

    Thank you in advance for your cooperation.

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. Rajeev
    Rajeev avatar
    8 posts
    Member since:
    Jan 2015

    Posted 08 Jul 2015 in reply to Kiril Nikolov Link to this post

    In my case it deletes only the first row
  11. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 09 Jul 2015 Link to this post

    Hello Rajeev,

     

    Please open a separate support request with a runnable sample and we will be happy to help you.

     

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready