Doubt regarding manual filtering and paging

515

Rohit Rawat posted over 1 year ago

Hello everyone,

So, when i m trying to perform manual filtering the paramter i recieve in query string are in a form which i find difficult to extract. So, I need alil help regarding this. i want value of filter and applied filter (greater then or less than etc.).

I m recieveing query string like this:(I applied filter uirl key here :)

Code:

@using Infragistics.Web.Mvc;
@using System.Text.Json

@*@model IEnumerable<GridTransaction.Models.Student>*@
@* The Ignite UI for MVC Grid data source uses LINQ and therefore only accepts instances of IQueryable<T>.
Even when you opt to use the GridMode you will explicitly set the DataSource property which
requires an instance of IQueryable<T> .*@

</head>
<body>

@* @(
Html.Infragistics().Grid(Model).ID("grid").PrimaryKey("Id").AutoGenerateColumns(false).Width("100%").AutoCommit(false)

.Columns(columns =>
{
columns.For(model => model.Id).DataType("number").HeaderText("Student ID").Width("15%");
columns.For(model => model.Name).DataType("string").HeaderText("Student Name").Width("30%");
columns.For(model => model.Marks).DataType("number").HeaderText("Marks").Width("30%");
columns.For(model => model.subject).DataType("string").HeaderText("Subject").Width("15%");
columns.For(model => model.Imagepath).DataType("string").HeaderText("Imagepath").Template("<img src='${Imagepath}' width='50' height='50' />");

}).DataSource(Model)
// Set the data source URL
.Features(features =>
{
features.Selection().MultipleSelection(true);
features.GroupBy();
features.Paging().PageSize(10);
features.Updating();
features.Tooltips().Visibility(TooltipsVisibility.Always);// provide informaion about grid when you hover over
features.RowSelectors().EnableCheckBoxes(true);
features.RowSelectors().EnableRowNumbering(true);
features.Updating().EnableAddRow(true).EnableDeleteRow(true);
features.Sorting().Type(OpType.Remote).SortUrlKey("hi");

features.Updating().ColumnSettings(set =>
{
set.ColumnSetting().ColumnKey("Id").ReadOnly(true);
});
features.Filtering();
}).UpdateUrl(Url.Action("put"))
.ResponseContentType("Json")
.UpdateUrl(Url.Action("put"))
.DataBind()
.Render()
) *@

</table>
</div>

</body>
</html>

@section scripts{

@*Batch Update*@
<script>
$(function () {
$("#grid").igGrid({
primaryKey: "id",
renderCheckboxes: true,
autoGenerateColumns: false,
updateUrl: "/Student/put/",
width: "100%",

columns: [
{ headerText: "Student ID", key: "id", dataType: "number", width: "15%" },
{ headerText: "Student Name", key: "name", dataType: "string", width: "30%" },
{ headerText: "Marks", key: "marks", dataType: "number", width: "30%" },
{
headerText: "Image",
key: "imagepath",
dataType: "string",
width: "15%",
template: "<img src='${imagepath}' width='50' height='50' />"
},
{ headerText: "Subject", key: "subject", dataType: "string", width: "15%" }
],
dataSourceUrl: "/Student/Data12",
dataSource: "/Student/Data",

features: [
{
name: "Selection",
mode: "row",
multipleSelection: true
},
{
name: "RowSelectors",
enableCheckBoxes: true,
enableRowNumbering: true
},
{
name: "GroupBy"
},
{
name :"Paging",
type:"local",
pageSize : 7
},

{
name: "Filtering",
type:"remote",
filterExprUrlKey: "filter",
columnSettings: [
{
columnKey: "selectColumn",
allowFiltering: false
}
]
},
{
name: "Sorting",
type: "remote",
// sortUrlKey: 'sort',
// sortUrlKeyAscValue: 'asc',
// sortUrlKeyDescValue: 'desc'
},
{
name: "Updating",
enableAddRow: true,
editMode: "row",
validation: true,
enableDeleteRow: true,
rowAdded: function (evt, ui) {
// Custom logic to execute when a row is added
console.log("Event arguments (ui):", ui);
console.log("Row data:", ui.rowId);
console.log(typeof (ui.values));
},
columnSettings: [
{
columnKey: "id",
readOnly: true

},

{
columnKey: "name",
editorType: "text",
validation: true,
editorOptions: {

validatorOptions:
{
required: {
errorMessage: "You must enter a value to submit."

},
custom: function(ui,evt){
var validator = $("#grid").igGridUpdating("editorForKey", "name").data("igValidator").element;

console.log(validator);
if (ui == "rohit") {

$(validator).igValidator("option", "errorMessage", "cant enter name rohit");

return false;
}
return true;

}

}
}
},
{
columnKey: "marks",
editorType: "number",
validation: true,
editorOptions: {
validatorOptions: {
required: {
errorMessage: "You must enter a value to submittt."

},
custom:function(ui,evt){
console.log(ui);
console.log("hi");
if (ui >= 50) {
var validator1 = $("#grid").igGridUpdating("editorForKey", "imagepath").data("igValidator").element;
// var validator11 = $("#grid").igGridUpdating("editorForKey", "imagepath");
// console.log(validator11);
// console.log("hi");
// console.log(validator11);

// var validator12 = $("#grid").igGridUpdating("editorForKey", "imagepath").data("igValidator");

// console.log(validator12);

//Set
$(validator1).igValidator("option", "required", true);

$(validator1).igValidator("option", "errorMessage", 'This field is required for marks between 50-100');

return true;
}
else {
var validator1 = $("#grid").igGridUpdating("editorForKey", "imagepath").data("igValidator").element;

//Set
$(validator1).igValidator("option", "required", false);

return true;
}
}
}
}
}
]
}
]
});

$("#savechanges").on("click", function () {
alert("Save button clicked");
// Save changes when the button is clicked
$("#grid").igGrid("saveChanges");
});
});

</script>

Please help me out with this your help will be highly appreciated.

700

Offline Riva Ivanova posted over 1 year ago

Hello Rohit,

Thank you for posting in our community!

I have been looking into your question and noticed that it has a similar context as a question asked in the following forum thread here. As mentioned there, I suggest referring to our Handling Remote Features Manually topic here as well as the Handling Remote Features Manually sample here.

There you will find a detailed explanation along with code snippets demonstrating how each feature could be configured. Also, you will be able to test the actual sample and see how it is configured.

Additionally, by following the Handling Remote Features Manually topic and referencing the respective sample, I have prepared a small, simplified sample demonstrating how the filtering feature could be configured.

For simplicity and demonstration purposes, in the attached sample I have handled the filtering for only part of the filtering conditions and most if not all the code configuration is taken from the Handling Remote Features Manually sample.

The result could be observed in the below attachment:

To conclude, by following the provided topic, its suggestions, and referencing the working sample, you could achieve your requirements and cover other scenarios as well.

Lastly, I would like to mention that when creating a forum post, it would be highly appreciated and helpful if you could attach code snippets/samples with configurations that are relevant to your query. Having lengthy and feature-rich code makes it harder to identify a certain unwanted behavior and is not as straightforward as copying and pasting the code for testing purposes.

Attached could be found my sample for your reference.

Please test it on your side and let me know if you need any further information regarding this matter.

Looking forward to your reply.

Sincerely,
Riva Ivanova
Associate Software Developer

8877.RemoteFiltering jQuery.zip
Cancel
Reply

Cancel