search form binding to grid example

[John Hodgkinson]

I have MVC member search app that runs as a partial view inside a CMS system (search by name, city, state, zip fields). On form submit, what is the best way to bind that data to the grid and then also having paging, sorting, etc enabled? Do you have an sample or example I can view?  

Many thanks! 

[John Hodgkinson]

I believe I have a some-what working version...  One issue though is I'm trying to pass a search query parameter back to a custom paging action in the controller and the controller is indeed getting called but the param is not getting passed (always null). Grid sample below. Any ideas on what I'm missing? Many thanks!

@(Html.Syncfusion().Grid<Member>("MemberGrid")
    .Datasource(Model.SearchResults)
    .ShowCaption(false)
    .ShowRowHeader(false)
    .EnablePaging()
    .PageSettings(settings => settings.PageSize(5).PageCount(10))
    .QueryParam("?qs_query=" + Model.SearchString)  // Query params
    .Mappers(map =>
    {
        map.Action("SearchPaging"); //used as the mapper for Grid Post action for Paging/Sorting, etc.
    })  
    .Column(cols =>
    {
        cols.Add("MemberTemplate").HeaderText("Member Results");     
    })
    .QueryCellInfo(cell =>
    {
        if (cell.TableCellType == GridTableCellType.AlternateRecordFieldCell || cell.TableCellType == GridTableCellType.RecordFieldCell)
        {
            if (cell.Column.MappingName == "MemberTemplate")
            {
                cell.Text = "<ul class=\"member-search-results\">" + Html.Partial("DisplayTemplates/MemberTemplate", cell.Data) + "</ul>";
            }
        }
    })
)

[John Hodgkinson]

I've believe I have it figured out... Instead of attempting to pass it through as a QueryParam value, I need to pass it to Controller as a route value... makes sense...

@(Html.Syncfusion().Grid<Member>("MemberGrid")
    .Datasource(Model.SearchResults)
    .ShowCaption(false)
    .ShowRowHeader(false)
    .EnablePaging()
    .PageSettings(settings => settings.PageSize(5).PageCount(10))
    .Mappers(map =>
    {
        map.Action("SearchPaging", new { SearchString = Model.SearchString }); //used as the mapper for Grid Post action for Paging/Sorting, etc.
    })  
    .Column(cols =>
    {
        cols.Add("MemberTemplate").HeaderText("Member Results");     
    })
    .QueryCellInfo(cell =>
    {
        if (cell.TableCellType == GridTableCellType.AlternateRecordFieldCell || cell.TableCellType == GridTableCellType.RecordFieldCell)
        {
            if (cell.Column.MappingName == "MemberTemplate")
            {
                cell.Text = "<ul class=\"member-search-results\">" + Html.Partial("DisplayTemplates/MemberTemplate", cell.Data) + "</ul>";
            }
        }
    })
)

[Abdul Matin M]

Hi John,

 

Thanks for your interest in Syncfusion products.

 

We are glad to hear that the issue has been resolved in your side. Please let us know if you have any other queries. We will be happy to assist you.

 

Please let us know if you need any further assistance.

 

Regards,

Abdul Matin M

[John Hodgkinson]

Say I want to pass the Model back to the paging method... how can I do that?

@(Html.Syncfusion().Grid<ncba.CRM.xweb.custom.MemberObject>("MembershipDirectoryGrid")

.Datasource(Model.SearchResults)

.ShowCaption(false)

.ShowRowHeader(false)

.EnablePaging()

.AutoFormat(Skins.Marble)

.PageSettings(settings => settings.PageSize(10).PageCount(10))

.Mappers(map =>

{

map.Action("MembershipDirectorySearchPaging", Model ); //used as the mapper for Grid Post action for Paging/Sorting, etc.

})

)

[Abdul Matin M]

Hi John,

 

Thanks for your update.

 

We are glad to let you know that your requirement can be achieved by Serializing the Model data and pass the Serialized Model data to the Mapper action used for Paging/Sorting. Please refer the below code snippet.

[CSHTML]

@(Html.Syncfusion().Grid<PassModel.Models.Student>("GenericListGrid")

    .Datasource(Model)   

    .Caption("Student Details")

    .EnableSorting()    /*Sorting Enabled*/

    .EnablePaging()    /*Paging Enabled*/

    .Column(cols =>

    {

        cols.Add(c => c.UniversityCode).HeaderText("University Code").TextAlign(Syncfusion.Mvc.Grid.TextAlignment.Right).Width(130);

        cols.Add(c => c.Title).HeaderText("Title").Width(200);

        cols.Add(c => c.Duration).HeaderText("Duration").TextAlign(Syncfusion.Mvc.Grid.TextAlignment.Right).Width(120);

        cols.Add(c => c.CourseFees).HeaderText("Course Fees").TextAlign(Syncfusion.Mvc.Grid.TextAlignment.Right).Format("{0:C}").Width(120);

        cols.Add(c => c.CGPA).HeaderText("CGPA").TextAlign(Syncfusion.Mvc.Grid.TextAlignment.Right).Width(180).Format("{0:P}");

    })

    .Mappers(map => { map.Action("GridFeatures", new { modelData = Newtonsoft.Json.JsonConvert.SerializeObject(Model) }); })   //Serialize the Model data

     )

We have also created a simple sample for your requirement and the same can be downloaded from the link below. Please use the sample and get back to us if you have any other queries.

 

Please let us know if you need any further assistance.

 

Regards,

Abdul Matin M

Attachment: PassModelSample_d24e3b11.zip

[Vance Sankar]

I know this is a really old thread, but it proved helpful to me as I was trying to do the same thing as John. Oddly, the suggest approach wrt serializing the Model still passes null back to me, which I can work around, but my question is related to the Model setup that John seemed to be using:

the Model itself seems to have properties for Search criteria, and a (single) property which is the collection of Results. 

His grid datasource is hence marked as Model.SearchResults, not the main Model object itself. 

My case is identical, but I haven't figured out how to get the Grid Actions to actually fire - usually if my Model *is* the collection, the return from the controller action looks like "return whateverObject.GridActions<Type>();" but how does that work if the collection is a property of the Model, not the Model itself?

[Vance Sankar]

Hmm... looks like I got around this by using a different POST action for the main search/populating the grid the first time, and specifying a different action for the Paging/Sorting etc. Is that the right approach here?

[Kavitha Narayanan]

Hi Vance,

Query: suggest approach wrt serializing the Model still passes null back to me.

We have serialized and passed the Model data from view to controller side where we can get corresponding value for the Model. 

Please refer to the video.

Video: http://www.syncfusion.com/downloads/support/forum/115966/ze/video1869098694.zip

Query: the Model itself seems to have properties for Search criteria, and a (single) property which is the collection of Results. 

In the reported query, you have mentioned that “single property which is the collection of Results”. Is that means Grid properties or complex property binding you are using or collection of record? Because if we serialize the Model, we will get collection of grid records.

Query:  I got around this by using a different POST action for the main search/populating the grid the first time, and specifying a different action for the Paging/Sorting etc. Is that the right approach here?

No, the Action method is only sufficient to make render initial loading/ Paging/Sorting in the Grid. If we use Edit property in the Grid, we need to define InsertAction, SaveAction, DeleteAction.

Please refer to the online sample,

http://mvc.syncfusion.com/demos/ui/grid/Editing/ServerCRUD 

If you face the same issue or if we misunderstood the requirement, please provide more information about the issue or attach the issue replicated sample. So that, we can analyze based on that and provide a better solution.

Regards,
Kavitha N.