Add Only One New Row at a Time

2 posts, 0 answers
  1. Jacob
    Jacob avatar
    1 posts
    Member since:
    Feb 2017

    Posted 24 Mar Link to this post

    @(Html.Kendo().Grid<BranchDirectoryProject.Domain.Models.BranchListModel>
            ()
            .Name("GridOfBranchList")
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Events(e => e.Save("onSave"))
            .Columns(columns =>
            {
                columns.Bound(c => c.BranchID);
                columns.Bound(c => c.OpCo)
                .Width(120);
            })
            //.ToolBar(tools => tools.Excel())
            .ToolBar(toolBar =>
            {
                toolBar.Create();
                toolBar.Save();
            })
            .HtmlAttributes(new { style = "height: 550px;" })
            .Scrollable()
            .Groupable()
            .Sortable()
            .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
            .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model =>
            {
                model.Id(c => c.BranchID);
            })
     
            .Read(read => read.Action("GridOfBranchList_Read", "Home"))
            .Create(create=> create.Action("BranchUpdate", "Home").Data("AdditionalData"))
            .Update(update => update.Action("BranchUpdate", "Home"))
            .PageSize(20)
            ))

    </div>
        <script>
            var eventobject;
            function AdditionalData(e) {
                alert("this is an alert");
                console.log(eventobject.model.BranchID);
                return {
                    branch: eventobject.model.BranchID,
                    OpCo : eventobject.model.OpCo
                }
            }
    function onSave(e) {
                
                
                //if (e.model.BranchID != null) {
                 //   branchBox = e.model.BranchID;
               // }
               // if (e.model.OpCo != null) {
              //      opcoBox = e.model.OpCo;
               // }
                console.log("Event Object");
                console.log(typeof(e));
                console.log("BranchBox");
                console.log(branchBox);
                console.log("e.model.BB");
                console.log(e.model.BranchID);
                console.log("opcoBox");
                console.log(opcoBox);
                console.log("e.model.OCB");
                console.log(e.model.OpCo);
                console.log(e.values.BranchID);
                eventobject = e;

    Hi,

    This is what my current kendo grid looks like. The scenario involves a sql table with the aim of displaying the contents of that table and providing the functionality to insert rows containing user entered data. Currently, I am providing that functionality with the toolbar kendo provides. I have a helper class in my controller which I am using to take the data from the client and place it in the action method. You can see the AdditionalData function which I have placed in my view and the onSave event below it. Those two are related to the helper class in the controller and I am using them to get the KendoGrid data back to my controller. I am not confident that this is the cleanest way to perform all of this, and any suggestions on that front are welcome. 

    However, my functionality is present in the current solution I have. I just dont understand why its not giving me errors when a user tries to add two rows at the same time. When the user clicks the add row button twice, it spawns two empty rows in the grid. If they go down and put data into both rows and then click save, both rows will be conveniently inserted into my database without crashing anything. How is this possible? The eventObject in the onSave event will be assigned twice and overwritten once. Yet the additionalData function will properly be called twice with distinct values of the eventObject each time. 

    Can anyone walk me through this code so that I can learn a little more? I want to know why additionalData doesnt get called twice with whatever value is last written to the eventObject variable. Will it continue to perform properly no matter how many empty rows are created with a single click of the save button? Or will it break at some limit or on some network conditions? I suspect there is a race condition. Lets talk about that.

    And can anyone tell me how to disable the addRow Button in the toolbar? It would be great if the user could only click this once per click of the save button. So that they can only insert one row at a time. And can anyone tell me how to create a custom toolbar button that is basically a wrapper around the pre-defined toolbar buttons? Or how can I recreate the create toolbar button such that all of the interesting things that it does for me are exposed in my source code, so that I may properly fiddle with it? I would really like to be able to crack open the create toolbar button and see all of the things going on inside of it so that I can better understand the grid and so I can better devise custom solutions. I like having the knowledge of custom solutions in my back pocket because it means less time browsing the forums for out of the box solutions.

    Thank you. Let me know if I can clarify anything.

  2. Stefan
    Admin
    Stefan avatar
    1257 posts

    Posted 28 Mar Link to this post

    Hello Jacob,

    It is expected the Grid to send the correct data for more that one new rows, as there are many scenarios where a user may need to add many new items and to save them at once.

    As for disabling the add new button, this is currently not supported out of the box and can only be done via custom JavaScript code on the Client. I can suggest using the click events of the Add and the Save buttons to show and hide the Add button:

    http://dojo.telerik.com/EFufE

    A custom Toolbar can be made using a template as demonstrated in the following example:

    http://demos.telerik.com/aspnet-mvc/grid/toolbar-template

    As for the custom buttons, they can achieve a similar functionality as the built-in ones using the client methods of the Grid for add, edit, save and remove rows:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-addRow

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-cancelChanges

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-cancelRow

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-closeCell

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-editCell

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-removeRow

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-saveChanges

    I hope these links will give more information which methods can be programmatically called in regards to the Grid editing.

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top