Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 143821 | Apr 5,2019 11:55 PM UTC | Apr 12,2019 12:16 PM UTC | ASP.NET Web Forms | 4 |
|
Tags: Grid |
Good day.
I need support with a case using their tools.
I have a problem to use Autocomplete through a Grid I already have the functional method but I do not know how to
make retrieve to the information and insert the data in the grid cell, I send the image and the html code as the code behind in C #
for your review.
Thank you very much for your support.
|
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True">
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="90">
<ValidationRule>
<ej:KeyValue Key="required" Value="true" />
<ej:KeyValue Key="number" Value="true" />
</ValidationRule>
</ej:Column>
<ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90">
<ValidationRule>
<ej:KeyValue Key="required" Value="true" />
</ValidationRule>
<EditTemplate Create="create" Read="read" Write="write" />
</ej:Column>
<ej:Column Field="EmployeeID" HeaderText="Employee ID" EditType="DropdownEdit" TextAlign="Right" Width="90" />
<ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="80" Format="{0:C}" EditType="NumericEdit">
<NumericEditOptions DecimalPlaces="2"></NumericEditOptions>
</ej:Column>
<ej:Column Field="ShipName" HeaderText="ShipName" Width="150" />
<ej:Column Field="ShipCountry" HeaderText="ShipCountry" Width="90" EditType="DropdownEdit" />
</Columns>
<EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings>
<ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
</ej:Grid>
<script type="text/javascript">
function create() {
return $("<input>");
}
function write(args) {
obj = $('#<%= OrdersGrid.ClientID %>').ejGrid('instance');
$.ajax(
{
type: "POST",
contentType: 'application/json; charset=utf-8',
url: 'GridFeatures.aspx/GetContainer',
data: "{'strcontainer':'" + args.value + "'}",
dataType: 'json',
success: function (data) {
// get the element using its Grid ID + ColumnName
$("#<%= OrdersGrid.ClientID %>CustomerID").ejAutocomplete({ width: "100%", dataSource: data.d, change: "enviar", enableDistinct: true, value: args.rowdata !== undefined ? args.rowdata["CustomerID"] : "" });
},
});
}
function read(args) {
args.ejAutocomplete('suggestionList').css('display', 'none');
return args.ejAutocomplete("getValue");
}
</script>
C#
[WebMethod()]
public static object GetContainer(string strcontainer)
{
List<string> items = dt.AsEnumerable().Select(s => s.Field<string>("CustomerID")).ToList();
return items;
} |
 |
Good day, an apology for the delay.
I must admit that I am new using this tool.
The detail was fixed, I just had to make some changes as they suggested, some lines I had to modify them because some objects did not work for me in my project and in the return for filling the field I had to change it for a different argument, it helped me a lot his answer since he did not know how the data is added in the autocomplete. Also the behind code leaves it the same.
And now i have a new problem, i want fill the other fields with data has retrieve, but i don´t know how do it
Thank you for your support.
Good day, an apology for the delay.
I must admit that I am new using this tool.
The
detail was fixed, I just had to make some changes as they suggested,
some lines I had to modify them because some objects did not work for me
in my project and in the return for filling the field I had to change
it for a different argument, it helped me a lot his answer since he did
not know how the data is added in the autocomplete. Also the behind code
leaves it the same.
And now i have a new problem, i want fill the other fields with data has retrieve, but i don´t know how do it.
Thank you for your support.
|
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" AllowSorting="True" AllowFiltering="true">
<Columns>
<ej:Column Field="OrderID" HeaderText=" Order ID" IsPrimaryKey="True" TextAlign="Right" Width="75">
</ej:Column>
<ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90">
<EditTemplate Create="create" Read="read" Write="write" />
</ej:Column>
. . .
</Columns>
</ej:Grid>
<script type="text/javascript">
var primarykey;
function create() {
return $("<input>");
}
function write(args) {
primarykey = args.rowdata.OrderID;
obj = $('#<%= OrdersGrid.ClientID %>').ejGrid('instance');
$.ajax(
{
type: "POST",
contentType: 'application/json; charset=utf-8',
url: 'Default.aspx/GetContainer',
data: "{'strcontainer':'" + args.value + "'}",
dataType: 'json',
success: function (data) {
$("#<%= OrdersGrid.ClientID %>CustomerID").ejAutocomplete({ width: "100%", dataSource: data.d, select: "enviar", enableDistinct: true, value: args.rowdata !== undefined ? args.rowdata["CustomerID"] : "" });
},
});
}
function read(args) {
args.ejAutocomplete('suggestionList').css('display', 'none');
return args.ejAutocomplete("getValue");
}
function enviar(args) {
obj = $('#<%= OrdersGrid.ClientID %>').ejGrid('instance');
obj.endEdit(); //close the EditForm using endEdit method
var data = obj.model.dataSource.filter(x => x.CustomerID == args.text)[0]; //filter records based on the selected Text from autocomplete
obj.updateRecord("OrderID", { OrderID: primarykey, CustomerID: args.text, EmployeeID: data.EmployeeID, ShipCity: data.ShipCity }); //update other fields through updateRecord method
}
</script>
|
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
