Focus on some other column when inserting a new row in a grid when the button is clicked

10 posts, 1 answers
  1. Traci
    Traci avatar
    12 posts
    Member since:
    Jan 2012

    Posted 22 Oct 2013 Link to this post

    Hello,
    I create a new record when the button "Add new Record" is clicked, it creates a new record but I then need the focus to be on the second column. My first coulmn as the checkboxes and the next column is UPC.. so when the new row is created in a  grid the focus should be on the second column of the grid.

    Here is my code:

    <table>
    <tr class="spaceUnder">
    <td> <button id="idAddComplexRecord" onclick="CustomAddButtonComplexRecord(this)" class="ui-submit k-button" style="height:23px; width:150px; padding-left:0px; padding-right:0px; padding-bottom:0px; padding-top:0px; align-content: center">
    <img src="Images/add15-1.png" style="height:10px; padding-top:0px;" title="Add a new Record" alt="Add a new Record"/>&nbsp; Add New Record
    </button>
    <button id="idDeleteComplexItems" onclick="CustomDeleteButtonComplex(this)" class="ui-submit k-button" style="height:23px; width:75px; padding-left:0px; padding-right:0px; padding-bottom:0px; padding-top:0px; align-content: center">
    <img src="Images/delete15.png" style="height:10px; padding-top:0px;" title="Delete Item" alt="Delete Item"/>&nbsp; Delete
    </button></td>
    </tr>
    </table>
    <div >
    @(Html.Kendo().Grid<SurveyMaintenance.Models.SurveyComplexItemDetail>()
    .Name("idComplexGridSurveyItems")
    .HtmlAttributes(new { ID = "idComplexGridSurveyItems", Class = "k-grid-header" })
    .Columns(columns =>
    {
    columns.Bound(p => p.ItemSelected).ClientTemplate("<input type='checkbox' class='chksvycomplexitem' #= (ItemSelected === true) ? checked='checked' : '' # onclick='SurveyComplexFunctions.toggleComplexItemSelection(this)' />")
    .HeaderTemplate("<input type=\"checkbox\" id=\"toggleAllComplexItems\"/>").Width(40);
    columns.Bound(p => p.UPC).Width(100);
    columns.Bound(p => p.Brand).Width(100);
    columns.Bound(p => p.ShelfTagDesc).Width(100);
    columns.Bound(p => p.CasePack).Width(60);
    columns.Bound(p => p.UnitSize).Width(60);
    columns.Bound(p => p.ComplexDetailID).Title("").ClientTemplate("<input id='Find' type='button' name='Find' style='display:inline; width:100px; border-style: inset; padding:0; height:100%;' value='Find UPC'; onclick='FindComplexUPCItem()' /> ").Width(100);

    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Scrollable()
    .Resizable(resize => resize.Columns(true))
    .DataSource(dataSource => dataSource
    .Ajax()
    .ServerOperation(false)
    .Events(events => events.Error("grid_error_handler"))
    .Read(
    read => read.Action("GetSurveyItems", "Survey").Data("SurveyComplexFunctions.additionalData")

    )
    .Model(model =>
    {
    model.Id(p => p.ComplexDetailID);
    model.Field(p => p.ComplexDetailID).Editable(false);
    })
     
    )
    )
    </div>

    function CustomAddButtonComplexRecord(e) {
    var complexGrid = $('#idComplexGridSurveyItems').data('kendoGrid');
    var dataSource = complexGrid.dataSource;
    dataSource.insert({ ItemSelected: false, UPC: '', Brand: '', ShelfTagDesc: '', CasePack: '' , UnitSize: '', ComplexDetailID: 0});


    }
  2. nikobellic
    nikobellic avatar
    46 posts
    Member since:
    Feb 2013

    Posted 22 Oct 2013 Link to this post

    I think you are looking for something like this.

    http://jsfiddle.net/LDRYP/1/

    Hope it helps.
  3. Kendo UI is VS 2017 Ready
  4. Traci
    Traci avatar
    12 posts
    Member since:
    Jan 2012

    Posted 23 Oct 2013 Link to this post

    The example is based on the html, I need in ASP MVC framework related, so basically something that fits in Original Thread.
  5. nikobellic
    nikobellic avatar
    46 posts
    Member since:
    Feb 2013

    Posted 23 Oct 2013 Link to this post

    The principle is the same
    You need to hook up a function the Edit Event on the Grid.

    With the MVC wrappers it would be:
    .Events(events => events.Edit("myFunction"))

    And have that function defined in your javascript.
    function myFunction(e) {
          var input=  $("input[name='UnitPrice']");
            input.focus();
        }


  6. Traci
    Traci avatar
    12 posts
    Member since:
    Jan 2012

    Posted 23 Oct 2013 Link to this post

    Not Working at all.. the event is not triggering only

     .Events(events =>events.Edit("onEdit"))    // IN My Grid

    <script>
     function onEdit(e) {     
          var input = $("input[name='UPC']");
            input.focus();
        }
    </script>

    Please suggest as to new Record when the button is pressed..
  7. nikobellic
    nikobellic avatar
    46 posts
    Member since:
    Feb 2013

    Posted 23 Oct 2013 Link to this post

    Im not sure what you mean by focus, then.
    I thought you meant on the create new record form.
    But the form will be gone after you have created the new record.

    So what do you mean by having FOCUS on the second column?
  8. Traci
    Traci avatar
    12 posts
    Member since:
    Jan 2012

    Posted 23 Oct 2013 Link to this post

    When a Button " Add New Record" is clicked -- it should create a whole new row with blank columns and when it creates the focus should be on second cell of that newly created row.

    If I use the Toolbar with Grid's Create default function, it's selecting the first column ( which is in my case it would check boxes) and I don't want that, so I create a Custom function that when the button is clicked the grid will have a new record inserted with the focus in second column. And focus on the second Cell is having an issue.
  9. nikobellic
    nikobellic avatar
    46 posts
    Member since:
    Feb 2013

    Posted 23 Oct 2013 Link to this post

    Ok, then why do you not do the exact same thing as I showed on the jsfiddle?

    The MVC wrappers are just to help you out creating the same html, javascript.

    What is the error you are getting?

    Remember. You only need to do TWO things.

    1. Add The event to the grid Edit.
    2. Define your event handler function so that it will give focus to your desired column.

    If you are creating this with MVC is irrelevant. In the end it all becomes HTML, JavaScript.

    Also, when you put code here in the Editor please use the CodeBlock tool so that its more readable.
  10. Traci
    Traci avatar
    12 posts
    Member since:
    Jan 2012

    Posted 23 Oct 2013 Link to this post

    I did exactly what you recomended.. but the onEdit() event is not been triggered only, I know I am missing something/done somehting silly mistake that it is not working...
    <script>
      function onEdit(e) {
            debugger;
            
            var input = $("input[name='UPC']");
            input.focus();
        }
    </script>
    <table>
        <tr class="spaceUnder">
            <td>  <button  id="idAddComplexRecord" onclick="CustomAddButtonComplexRecord(this)"  class="ui-submit k-button" style="height:23px; width:150px; padding-left:0px; padding-right:0px; padding-bottom:0px; padding-top:0px; align-content: center">
                        <img src="Images/add15-1.png" style="height:10px; padding-top:0px;" title="Add a new Record" alt="Add a new Record"/>  Add New Record
                    </button>
                        <button  id="idDeleteComplexItems" onclick="CustomDeleteButtonComplex(this)" class="ui-submit k-button" style="height:23px; width:75px; padding-left:0px; padding-right:0px; padding-bottom:0px; padding-top:0px; align-content: center">
                            <img src="Images/delete15.png" style="height:10px; padding-top:0px;" title="Delete Item" alt="Delete Item"/>  Delete
                        </button></td>
        </tr>
     
    </table>
     
     @(Html.Kendo().Grid<SurveyMaintenance.Models.SurveyComplexItemDetail>()
            .Name("idComplexGridSurveyItems")
            .HtmlAttributes(new { ID = "idComplexGridSurveyItems", Class = "k-grid-header"  })    
             
            .Columns(columns =>                       
            {
                columns.Bound(p => p.ItemSelected).ClientTemplate("<input type='checkbox' class='chksvycomplexitem' #= (ItemSelected === true) ? checked='checked' : '' # onclick='SurveyComplexFunctions.toggleComplexItemSelection(this)' />")
                                                .HeaderTemplate("<input type=\"checkbox\" id=\"toggleAllComplexItems\"/>").Width(40);          
                columns.Bound(p => p.UPC).Width(100);
                columns.Bound(p => p.Brand).Width(100);
                columns.Bound(p => p.ShelfTagDesc).Width(100);
                columns.Bound(p => p.CasePack).Width(60);
                columns.Bound(p => p.UnitSize).Width(60);
                columns.Bound(p => p.ComplexDetailID).Title("").ClientTemplate("<input id='Find' type='button' name='Find' style='display:inline; width:100px; border-style: inset; padding:0;  height:100%;' value='Find UPC'; onclick='FindComplexUPCItem()' /> ").Width(100);      
            
            })              
            .Editable(editable => editable.Mode(GridEditMode.InCell))   
            .Events(events =>events.Edit("onEdit"))                                           
            .Scrollable()              
            .Resizable(resize => resize.Columns(true))
            .DataSource(dataSource => dataSource
                        .Ajax()
                        .ServerOperation(false)                   
                        .Events(events => events.Error("grid_error_handler"))
                        .Read(
                           read => read.Action("GetSurveyItems", "Survey").Data("SurveyComplexFunctions.additionalData")
                                
                        )
                        .Model(model =>
                            {
                                model.Id(p => p.ComplexDetailID);
                                model.Field(p => p.ItemSelected).Editable(false);                                                    
                            })                   
     
     
                        )
                )
     
    <script>
     function CustomAddButtonComplexRecord(e) {
            var complexGrid = $('#idComplexGridSurveyItems').data('kendoGrid');
            var dataSource = complexGrid.dataSource;
             
            dataSource.insert({ ItemSelected: false, UPC: '', Brand: '', ShelfTagDesc: '', CasePack: '' , UnitSize: '', ComplexDetailID: 0});
             
     
            
     
        }
    </script>


  11. Answer
    Traci
    Traci avatar
    12 posts
    Member since:
    Jan 2012

    Posted 23 Oct 2013 Link to this post

    Got it working --

    In my Button CLick Event function the datasource.Insert wasn't allowing it to trigger so I changed that function to be:

    function CustomAddButtonComplexRecord(e) {
            var complexGrid = $('#idComplexGridSurveyItems').data('kendoGrid');
            complexGrid.addRow();          

        }

    Thank you for the help.
Back to Top
Kendo UI is VS 2017 Ready