We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to auto-increment primary key of grid from .js

Hi

My grid has the CRUD operation in the toolbar. Editing doesn't work because I don't have a primary key defined on the grid. I did it, but I need to manage the auto increment. This thread suggest how to do that and you even has a project with an example, but I don't really get it. I mean, you do that in the MVC controller but I am not sure if that is what I need. This grid will be posted as a .json. I am not sure how to you arrive to the controller in that project. I'm completely lost my your example project.

What I would like to do is just to auto-increment the value from Javascript, in the saved action event. The problem is that I don't know how to refer to the specific cell that I want to increment. Also, I don't know if by just incrementing it on the saved event of the grid, will work at all, because I will not only need to increment it to show the value in the front end, but I need to increment it in the datasource I think, in order for the edit operation to work properly. And, my grid doesn't have a datasource defined because it start empy.

I am kinda lost. The question is, which is the correct way to increment a primary key value from .js in order to achieve proper edit function in my grid???

This is the only thing left in my to-do list to deliver my project.

Thank yoiu

5 Replies

MS Mani Sankar Durai Syncfusion Team August 7, 2017 11:14 AM UTC

Hi Samuel, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suspect that you would to auto increment the primary key column in client side itself. We have achieved your requirement using actionBegin event in grid and the sample can be downloaded from the below link. 
In this sample we have achieved your requirement using actionBegin event and when the request type is save. 
Refer the code example. 
@(Html.EJ().Grid<object>("Grid") 
               .Datasource(ds => ds.Json(Model).UpdateURL("/OrderTables/Update") 
                                 .InsertURL("/OrderTables/Insert").RemoveURL("/OrderTables/Remove").Adaptor(AdaptorType.RemoteSaveAdaptor)) 
                 .AllowPaging(true) 
                    .ClientSideEvents(eve => eve.ActionBegin("begin")) 
                   ... 
       .Columns(col => 
        { 
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).IsIdentity(true).TextAlign(TextAlign.Right).Width(75).Add(); 
            ... 
 
        })) 
<script type="text/javascript"> 
    function begin(args) { 
function begin(args) { 
        if (args.requestType == "save") { 
            var index = this.model.dataSource.dataSource.json.length - 1; 
            args.data.OrderID = this.model.dataSource.dataSource.json[index].OrderID + 1 
        } 
}</script> 

The above one will works when you using removeSaveAdaptor in grid.  
When using local data in grid, we can get the dataSource using this.model.dataSource . 
Note: When using other adaptors like UrlAdaptor etc.., we have to handle it in server side only.  
Refer the documentation link. 
Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 



SO Samuel Otero August 7, 2017 01:38 PM UTC

Hello, thank you for your reply

"The above one will works when you using removeSaveAdaptor in grid. "

I don't really know how that "removeSaveAdaptor" works. I don't use it, and I haven't even seen it before. I think that "local data in grid" is what we are using here.

You said that if we are working with the local data in the grid, I needed to access datasource using this.model.datasource. Well, how would I achieve this line of code: args.data.OrderID = this.model.dataSource.dataSource.json[index].OrderID + 1 ??

I need to simply do something like args.data.OrderID = this.model.datasource.OrderId + 1; ?? this.model.datasource.OrderId selects the correct row and cell to increment or I need and index too?

I don't really know how the js structure should be written when we are working with local data in the grid.




SO Samuel Otero August 7, 2017 02:56 PM UTC

Ok I think I figured it out. The code should be:

function ActionBegin(args) {

    if (args.requestType == "save") {

        var index = this.model.dataSource.length - 1;

        if (index == -1) {

            args.data.InfraccionId = 1;

        }

        else {

            args.data.InfraccionId = this.model.dataSource[index].InfraccionId + 1

        }   

    }

Now I have another problem. This code will execute every time you save a row. That means that it will assign a new primary key also when you edit the record, and this destroy the logic and the grid starts behave crazy when you edit. Which is the correct workaround for this?



SO Samuel Otero August 7, 2017 03:34 PM UTC

I think I solved everything with some logic. Here's my js code;

var RecordJustAdded = false;

var InfraccionData = [

    { id: "Primera", text: "Primera" },

    { id: "Segunda", text: "Segunda" },

    { id: "Tercera", text: "Tercera" },

    { id: "Cuarta", text: "Cuarta" },

    { id: "Quinta", text: "Quinta" }, 

    { id: "Sexta", text: "Sexta" },

    { id: "Septima", text: "Séptima" },

    { id: "Octava", text: "Octava" },

    { id: "Novena", text: "Novena" },

    { id: "Decima", text: "Décima" }

];

function ActionBegin(args) {

    if (args.requestType == "save") {

        if (RecordJustAdded) {

            var index = this.model.dataSource.length - 1;

            if (index == -1) {

                args.data.InfraccionId = 1;

            }

            else {

                args.data.InfraccionId = this.model.dataSource[index].InfraccionId + 1

            }          

        }     

    }

    else if (args.requestType == "cancel") {

        RecordJustAdded = false

    }


}

function ActionCompleted(args) {

    if (args.requestType == "add") {


        $("#" + this._id + "Infraccion").ejDropDownList({


            dataSource: InfraccionData,


            field: { text: "text", value: "text" },

            width: "100%"

        });

        RecordJustAdded = true;

    }

    if (args.requestType == "save" && RecordJustAdded) {


        this.model.dataSource.shift();// Remove the newly added record from first position

        this.model.dataSource.push(args.data)// Push the newly added record in data source

        this.refreshContent();

        RecordJustAdded = false;

    }

I have the RecordJustAdded declaration to control where to increment the primary key. I do it only when you click the add button and save the row. I do not increment the primary key if you just save it. 

Anyway, I don't think this is the prettiest way to do it. So when you have time, suggest me a better way. Thank you!



MS Mani Sankar Durai Syncfusion Team August 8, 2017 12:31 PM UTC

Hi Samuel, 

We have checked your query and we can also allow to make the primary key as auto increment only while adding in grid by using the following way. 
Refer the code example 
@(Html.EJ().Grid<object>("Grid") 
               ... 
                    .ClientSideEvents(eve => eve.ActionBegin("begin").ToolbarClick("click")) 
                    ... 
       .Columns(col => 
        { 
... 
 
        })) 
<script type="text/javascript"> 
    var flag; 
    function begin(args) { 
        if (args.requestType == "save" && flag) { 
            var index = this.model.dataSource.length - 1; 
            args.data.OrderID = this.model.dataSource[index].OrderID + 1 
            flag = false; 
        } 
    } 
    function click(args) { 
        if (args.itemName == "Add") {   //when clicking the add icon in toolbar assigning the global variable as true. 
            flag = true; 
        } 
    } 
</script> 

Refer the documentation link 

Please let us know if you need further assistance 

Regards, 
Manisankar Durai. 


Loader.
Live Chat Icon For mobile
Up arrow icon