I am totally new to IgniteUI and would appreciate assistance.
Is there any sample code available that invokes a new cshtml page from the selected row of the igGrid?
Hello Mark,
Thank you for posting in our community!
Before preparing a sample could you clarify if your requirement is adding a link to another view in a grid row? If not, would you provide more details concerning your scenario?
Looking forwards to hearing from you.
Dimka
Your understanding is correct, but for the sake of clarity:-
The essence of our query is to establish the syntax that allows us to display a new URL having selected a customer row within the grid.
Thanks
Morning Dimka
Any development on this issue yet?
Many thanks
Thank you for your patience.
I have created a sample regarding your query. It contains grid with customer information and when the email cell of each row is selected a “DisplayDetails” page is invoked. The email cell was chosen in this sample since it is a unique identifier but this could be changed according to the specificity of the case implemented.
In order to load the ‘DisplayDetails’ page an AJAX call which is raised when the selection is changed. The ComposeDetails function in the controller is firstly called in order to fetch information for the selected item. Then if the call succeeds the DisplayDetails method is called to invoke the corresponding view.
The AJAX call function code follows for your referene:
$(document).delegate("#grid1", "iggridselectioncellselectionchanged", function (evt, ui) {
// only the email cell in this scenario invokes the 'Details' page
// alternatively another cell might be used or the entire row could be made selectable
if (ui.cell.columnKey === "Email") {
var tmpItem = ui.cell.element.text();
$.ajax({
type: "POST",
url: "Home/ComposeDetails",
data: { em: tmpItem }, // the 'em' variable name should correspond to the name of the Details method input variable name
success: function () {
window.location.href = "Home/DisplayDetails" + "?" + tmpItem // '?' is needed to be placed as separator of the method name and the customer-specific url details
}
})
} else
return;
});
The following code snippet implements the grid:
@(Html.Infragistics()
.Grid(Model.AsQueryable()).ID("grid1")
.Columns(column =>
{
column.For(x => x.CustomerId).HeaderText("ID");
column.For(x => x.Email).HeaderText("Email");
column.For(x => x.Name).HeaderText("Name");
column.For(x => x.Age).HeaderText("Age");
.Height("300px").Width("800px").PrimaryKey("CustomerId")
.Features(feature => {
feature.Selection().Mode(SelectionMode.Cell);
.DataSourceUrl(Url.Action("PagingGetData")).DataBind().Render())
I have added comments in the sample for your reference. Feel free to modify the sample and use it for your custom projects if needed.
You might find it also useful to read through the following page: http://help.infragistics.com/jQuery/2013.1/ui.iggridselection
The event tab describes other possible events which could be handled as alternatives to the cell selected event.
If you need further assistance feel free to contact me again.
Hi Dimka
Thanks for your response.
I have downloaded and recompiled the sample to debug the process, however it produces the following error when running.
Unhandled exception at line 48, column 47 in http://localhost:1545/
0x800a01b6 - Microsoft JScript runtime error: Object doesn't support property or method 'igGrid'
Please advise what I am doing wrong.
Hello,
I am following up to check if you have any questions or concerns regarding this case. If so, feel free to contact me again.
Sincerely,
Dimka Vardina
Developer Support Engineer I
Infragistics, Inc.
www.infragistics.com/support
Data is bound to the combo by using the data source option. In order to set a default value it is needed the selected index option to be added (see the code snippet below):
@(Html.Infragistics().Combo().ID("combo1")
.DataSource("/Home/GetData").SelectedIndexes(new int[]{0})
.ValueKey("Name")
.Render()
)
In this sample the default selected item is the first one from the list of items passed by the controller and its index is zero.
To your second question a possible approach is using the .NullText option for the text editor and setting its value to correspond to the default selected item value.
In order to apply changes to the text editor when the combo selection is changed it is needed the “igcomboselectionchanging” event to be handled. Please note that the text box is not updated dynamically as soon as the combo selection is changed since it is needed the whole page to be reloaded. If appropriate the scenario might be tested with partial views in order to reload page segments only.
Attached is a sample for your reference. Feel free to use it and modify it.
Since these questions are not regarding the initial issue discussed in the current thread I have created an additional internal ticket where I will keep on updating you with further information.
If any additional questions concerning the igGrid scenario arise don’t hesitate to update this thread.
Please revert back to me if you have had a chance to look at my request.
We have had success with our original problem, but have a similar problem as detailed below.
What we are trying to achieve is:-
Is there any example that we may work through to guide us in this requirement?
Your assistance is appreciated.
Do you have any additional questions regarding this scenario? If so, feel free to contact me again.