Hi Guys,
I've a scenario where I need to set my own primary key when a new row is added. I tried to watch for this event "iggridupdatinggenerateprimarykeyvalue", but for some reasons this event is fired only when the column is shown, i.e. this will not be fired if it's Hidden. That's weird. I don't want to show some primary key column to the user which doesn't make any sense. so I tried to come up w/ work around such as
1) show the column and set the width to 1px - didn't work. But interestingly, if you set the width="10px" it worked. so I'm not sure what's going in the width atrribute.
2) Alternatively, i tried to do this in row adding event "iggridupdatingeditrowadding", but for reason this event is not fired at all - BUG!!
Now I ran out of options and I need to find a way out to this problem. can you someone please reply ASAP?
Thanks
Hello Karthik ,
Thank you for posting in our forums.
Can you share which version(build) of our jQuery components do you use?
I tried to replicate the behavior with the RTM build of v12.2 but with no avial.
Both rowAdding and generatePrimaryKeyValue events are fired (in this order) when adding a new row is performed.
I am attaching a small isolated sample.
Hope hearing from you.
Thanks for reply, Tsvetelina.
Here are the scripts that I'm using in my project
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.js" type="text/javascript"></script> <script src="http://www.modernizr.com/downloads/modernizr-latest.js" type="text/javascript"></script> <script src="http://cdn-na.infragistics.com/jquery/20121/2049/js/infragistics.loader.js" type="text/javascript"></script>
And I wonder all of a sudden the generate primary key event started working today even w/ the hidden flag ON. There is no change to the code. I feel lucky :)
But there is still some problem w/ row adding event and the only difference between your code and mine is that I'm initializing the grid using MVC control and you are doing it in jquery.
MVC code
@(Html.Infragistics().Grid<InfragisticsSandbox.Models.Product>() .ID("Grid2") .PrimaryKey("ProductId") .Columns(column => { column.For(p => p.ProductId).HeaderText("Product ID").Hidden(true); column.For(p => p.Name).HeaderText("Name"); column.For(p => p.ModifiedDate).HeaderText("Modified Date"); column.For(p => p.ListPrice).HeaderText("List Price"); }) .Features(features => { features.Selection() .Mode(SelectionMode.Row) .MultipleSelection(true); features.Paging() .Type(OpType.Remote) .PageSize(2) .PrevPageLabelText("Previous") .NextPageLabelText("Next"); features.Updating().EnableAddRow(true). EnableDeleteRow(true) .StartEditTriggers(GridStartEditTriggers.DblClick).DoneLabel("Submit") .ColumnSettings(columnSettings => { columnSettings.ColumnSetting().ColumnKey("ProductId").ReadOnly(true); columnSettings.ColumnSetting().ColumnKey("Name").Required(true).EditorType(ColumnEditorType.Combo) .ComboEditorOptions(options => { options.EnableClearButton(false).DataSource(Model.Names).TextKey("Text").ValueKey("Value").AllowCustomValue(true) .ValidatorOptions(option => { option.KeepFocus(ValidatorKeepFocus.Never).OnBlur(false).OnSubmit(true); option.CustomErrorMessage("Name is required"); }); }); columnSettings.ColumnSetting().ColumnKey("ModifiedDate") .EditorType(ColumnEditorType.DatePicker);
columnSettings.ColumnSetting().ColumnKey("ListPrice").EditorType(ColumnEditorType.Text).Required(true).TextEditorOptions(options => options.ValidatorOptions(option => {
option.KeepFocus(ValidatorKeepFocus.Never).OnBlur(false).OnSubmit(true); option.CustomErrorMessage("List Price is required"); }) );
}); features.RowSelectors() .EnableCheckBoxes(true) .EnableRowNumbering(false) .RowSelectorsColumnWidth("28px"); }) .Width("100%") //.Height("100%") .DataSourceUrl(Url.Action("GetProducts")) // .UpdateUrl(Url.Action("SaveChanges")) .DataBind() .Render() )
Javascript code
$('#Grid2').on("iggridupdatingrowadding", function (evt, ui) { debugger; alert('test'); });
The adding event is not fired for some reasons, which means the function handler is not set to rowAdding event. I'm not sure what's wrong with the above code.
Appreciate your help.
Thanks,
Karthik
Hello Karthik,
I am glad that the generatePrimaryKeyValue event is working now.
Regarding the rowAdding event you should change the code snippet in order to use the .on() method for the purpose.
Using delegate you can use the code snippets from the API documentation
http://help.infragistics.com/jQuery/2012.2/ui.iggridupdating#events
$(document).delegate("#grid1", "iggridupdatingrowadding", function (evt, ui) {
});
With .on , the order of the parameters(selector, event) should be changed:
$(document).on("iggridupdatingrowadding", "#grid1" , function () {
Hope this helps.
Hi Tsvetelina,
I tried the above methods that you suggested but it didn't work unfortunately. Also, I figured the reason why generate primary key event started working out of the blue, it's because of the ReadOnly column settings on the primary key column. If i comment out that, it won't fire the generate primary key event.
This works:
}); features.RowSelectors() .EnableCheckBoxes(true) .EnableRowNumbering(false) .RowSelectorsColumnWidth("28px"); }) .Width("100%") .DataSourceUrl(Url.Action("GetProducts")) .DataBind() .Render() )
@(Html.Infragistics().Grid<InfragisticsSandbox.Models.Product>() .ID("Grid2") .PrimaryKey("ProductId") .Columns(column => { column.For(p => p.ProductId).HeaderText("Product ID").Hidden(true); column.For(p => p.Name).HeaderText("Name"); column.For(p => p.ModifiedDate).HeaderText("Modified Date"); column.For(p => p.ListPrice).HeaderText("List Price"); }) .Features(features => { features.Selection() .Mode(SelectionMode.Row) .MultipleSelection(true); features.Paging() .Type(OpType.Remote) .PageSize(2) .PrevPageLabelText("Previous") .NextPageLabelText("Next"); features.Updating().EnableAddRow(true). EnableDeleteRow(true) .StartEditTriggers(GridStartEditTriggers.DblClick).DoneLabel("Submit") .ColumnSettings(columnSettings => { //columnSettings.ColumnSetting().ColumnKey("ProductId").ReadOnly(true); columnSettings.ColumnSetting().ColumnKey("Name").Required(true).EditorType(ColumnEditorType.Combo) .ComboEditorOptions(options => { options.EnableClearButton(false).DataSource(Model.Names).TextKey("Text").ValueKey("Value").AllowCustomValue(true) .ValidatorOptions(option => { option.KeepFocus(ValidatorKeepFocus.Never).OnBlur(false).OnSubmit(true); option.CustomErrorMessage("Name is required"); }); }); columnSettings.ColumnSetting().ColumnKey("ModifiedDate") .EditorType(ColumnEditorType.DatePicker);
Javascript code:
$('#Grid2').on("iggridupdatinggenerateprimarykeyvalue", function (evt, ui) { debugger; alert('test'); });
Appreciate your support.
Thanks.
Hello,
Thank you for the update.
You should use the syntax below
$(document).on("iggridupdatingrowadding", "#grid2" , function () {
Regarding the order of the events rowAdding and generatePrimaryKeyValue, it is different if the primeryKey columns is hidden and not set as ReadOnly
This inconsistency will be reported to the development team and I will keep you updated
For now you can set the PrimaryKey column as ReadOnly when it is hidden.
Take a look at the code snippet below:
<script src="http://cdn-na.infragistics.com/jquery/20122/latest/js/infragistics.loader.js" type="text/javascript"></script> <%= Html.Infragistics().Loader() .ScriptPath("http://cdn-na.infragistics.com/jquery/20122/latest/js/") .CssPath("http://cdn-na.infragistics.com/jquery/20122/latest/css/") .Render() %> ….. <script type="text/javascript"> $.ig.loader(function () { var productID_forNewRow = 900; // event raised after edit cell started $(document).delegate("#grid2", "iggridupdatinggenerateprimarykeyvalue", function (evt, ui) { alert("generateprimarykeyvalue " + ui.value); ui.value = productID_forNewRow++; }); $(document).delegate("#grid2", "iggridupdatingrowadding", function (evt, ui) { alert("iggridupdatingrowadding " + ui.values["ProductID"]); }); }); </script> …. <%= Html.Infragistics().Grid(Model).ID("grid2").Height("500px") .PrimaryKey("ProductID") .AutoCommit(true) .UpdateUrl("EditingSaveChanges") .Columns(column => { column.For(x => x.ProductID).HeaderText(this.GetGlobalResourceObject("Grid", "PRODUCT_ID").ToString()).Width("150px").Hidden(true); column.For(x => x.Name).HeaderText(this.GetGlobalResourceObject("Grid", "PRODUCT_NAME").ToString()).Width("200px"); column.For(x => x.ModifiedDate).HeaderText(this.GetGlobalResourceObject("Grid", "MODIFIED_DATE").ToString()).Width("200px"); column.For(x => x.ListPrice).HeaderText(this.GetGlobalResourceObject("Grid", "LIST_PRICE").ToString()).Width("150px"); }) .Features(features => { features.Sorting(); features.Paging().PageSize(30).Type(OpType.Local); features.Updating().ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("ProductID").ReadOnly(true); settings.ColumnSetting().ColumnKey("Name").ReadOnly(true); } ); }) .DataSourceUrl(Url.Action("EditingGetData")) .DataBind() .Render() %>