This is a migrated thread and some comments may be shown as answers.

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

9 Answers 934 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Traci
Top achievements
Rank 1
Traci asked on 22 Oct 2013, 03:00 PM
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});


}

9 Answers, 1 is accepted

Sort by
0
Ignacio
Top achievements
Rank 1
answered on 22 Oct 2013, 06:44 PM
I think you are looking for something like this.

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

Hope it helps.
0
Traci
Top achievements
Rank 1
answered on 23 Oct 2013, 02:57 PM
The example is based on the html, I need in ASP MVC framework related, so basically something that fits in Original Thread.
0
Ignacio
Top achievements
Rank 1
answered on 23 Oct 2013, 04:05 PM
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();
    }


0
Traci
Top achievements
Rank 1
answered on 23 Oct 2013, 04:06 PM
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..
0
Ignacio
Top achievements
Rank 1
answered on 23 Oct 2013, 04:11 PM
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?
0
Traci
Top achievements
Rank 1
answered on 23 Oct 2013, 04:16 PM
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.
0
Ignacio
Top achievements
Rank 1
answered on 23 Oct 2013, 04:25 PM
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.
0
Traci
Top achievements
Rank 1
answered on 23 Oct 2013, 04:53 PM
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>


0
Accepted
Traci
Top achievements
Rank 1
answered on 23 Oct 2013, 05:11 PM
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.
Tags
Grid
Asked by
Traci
Top achievements
Rank 1
Answers by
Ignacio
Top achievements
Rank 1
Traci
Top achievements
Rank 1
Share this question
or