This code places an Elementary index widget on a window, indexing grid items.

The items are placed so that their labels {\bfseries{don\textquotesingle{}t}} follow any order, but the index itself is ordered (through \mbox{\hyperlink{group__Elm__Index__Group_ga366a98e1b54ccaaf2f88dca67c812783}{elm\+\_\+index\+\_\+item\+\_\+sorted\+\_\+insert()}}). This is a complement to to \mbox{\hyperlink{index_example_01}{the first example on indexes}}.

Here\textquotesingle{}s the list of item labels to be used on the grid (in that order)\+:  
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\textcolor{keyword}{static}\ \textcolor{keyword}{const}\ \textcolor{keywordtype}{char}\ *items[]\ =}
\DoxyCodeLine{\{}
\DoxyCodeLine{\ \ \ \textcolor{stringliteral}{"{}Judith"{}},}
\DoxyCodeLine{\ \ \ \textcolor{stringliteral}{"{}Paulina"{}},}
\DoxyCodeLine{\ \ \ \textcolor{stringliteral}{"{}Cathy"{}},}
\DoxyCodeLine{\ \ \ \textcolor{stringliteral}{"{}Vendella"{}},}
\DoxyCodeLine{\ \ \ \textcolor{stringliteral}{"{}Naomi"{}},}
\DoxyCodeLine{\ \ \ \textcolor{stringliteral}{"{}Ashley"{}},}
\DoxyCodeLine{\ \ \ \textcolor{stringliteral}{"{}Stacey"{}},}
\DoxyCodeLine{\ \ \ \textcolor{stringliteral}{"{}Gail"{}}}
\DoxyCodeLine{\};}

\end{DoxyCodeInclude}
 In the interesting part of the code, here, we first instantiate the grid (more on grids on their examples) and, after creating our index, for each grid item we also create an index one to reference it\+:  
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\ \ \ grid\ =\ \mbox{\hyperlink{group__Elm__Gengrid__Group_ga4551f56817ddd07f021a1d89b8ac542a}{elm\_gengrid\_add}}(win);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Gengrid__Group_gadea5cce647305f0a8f7bca8778131754}{elm\_gengrid\_item\_size\_set}}(grid,\ 150,\ 150);}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ gic.item\_style\ =\ \textcolor{stringliteral}{"{}default"{}};}
\DoxyCodeLine{\ \ \ gic.func.text\_get\ =\ \_grid\_label\_get;}
\DoxyCodeLine{\ \ \ gic.func.content\_get\ =\ \_grid\_content\_get;}
\DoxyCodeLine{\ \ \ gic.func.state\_get\ =\ NULL;}
\DoxyCodeLine{\ \ \ gic.func.del\ =\ NULL;}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group_ga9379629ad8ad2860aa786d838a4a106a}{evas\_object\_size\_hint\_weight\_set}}(grid,\ \mbox{\hyperlink{Evas__Common_8h_aa47c85083d3dae0111c21ec49359306a}{EVAS\_HINT\_EXPAND}},\ \mbox{\hyperlink{Evas__Common_8h_aa47c85083d3dae0111c21ec49359306a}{EVAS\_HINT\_EXPAND}});}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Win__Group_ga505d6bd217e5ee01e82b548ec35986eb}{elm\_win\_resize\_object\_add}}(win,\ grid);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga07208fcafd4739de606bc35fff684bf5}{evas\_object\_show}}(grid);}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ idx\ =\ \mbox{\hyperlink{group__Elm__Index__Group_gad698859d9e1e325d95d0eaae34a3f2e8}{elm\_index\_add}}(win);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group_ga9379629ad8ad2860aa786d838a4a106a}{evas\_object\_size\_hint\_weight\_set}}(idx,\ \mbox{\hyperlink{Evas__Common_8h_aa47c85083d3dae0111c21ec49359306a}{EVAS\_HINT\_EXPAND}},\ \mbox{\hyperlink{Evas__Common_8h_aa47c85083d3dae0111c21ec49359306a}{EVAS\_HINT\_EXPAND}});}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Win__Group_ga505d6bd217e5ee01e82b548ec35986eb}{elm\_win\_resize\_object\_add}}(win,\ idx);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga07208fcafd4739de606bc35fff684bf5}{evas\_object\_show}}(idx);}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ \textcolor{keywordflow}{for}\ (i\ =\ 0;\ i\ <\ (\textcolor{keyword}{sizeof}(items)\ /\ \textcolor{keyword}{sizeof}(items[0]));\ i++)}
\DoxyCodeLine{\ \ \ \ \ \{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \textcolor{keywordtype}{char}\ buf[32];}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ gg\_it\ =\ \mbox{\hyperlink{group__Elm__Gengrid__Group_ga1614357292696e7e8d5bcd71e4843fe6}{elm\_gengrid\_item\_append}}(grid,\ \&gic,\ (\textcolor{keywordtype}{void}\ *)(uintptr\_t)i,\ NULL,\ NULL);}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \textcolor{comment}{/*\ indexing\ by\ first\ letters\ */}}
\DoxyCodeLine{\ \ \ \ \ \ \ \ snprintf(buf,\ \textcolor{keyword}{sizeof}(buf),\ \textcolor{stringliteral}{"{}\%c"{}},\ items[i][0]);}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \mbox{\hyperlink{group__Elm__Index__Group_ga366a98e1b54ccaaf2f88dca67c812783}{elm\_index\_item\_sorted\_insert}}(idx,\ buf,\ NULL,\ gg\_it,\ \_index\_icmp,\ NULL);}
\DoxyCodeLine{\ \ \ \ \ \}}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Smart__Object__Group_gac12dd6655f488cc47ce6cf00eb7d12b2}{evas\_object\_smart\_callback\_add}}(idx,\ \textcolor{stringliteral}{"{}delay,changed"{}},\ \_index\_changed,\ NULL);}

\end{DoxyCodeInclude}
 The order in which they\textquotesingle{}ll appear in the index, though, is {\bfseries{alphabetical}}, becase of \mbox{\hyperlink{group__Elm__Index__Group_ga366a98e1b54ccaaf2f88dca67c812783}{elm\+\_\+index\+\_\+item\+\_\+sorted\+\_\+insert()}} usage together with the comparing function, where we take the letters of each index item to base our ordering on. The parameters on {\ttfamily \+\_\+index\+\_\+cmp} have to be declared as void pointers because of the {\ttfamily Eina\+\_\+\+Compare\+\_\+\+Cb} prototype requisition, but in this case we know they\textquotesingle{}ll be index item(\mbox{\hyperlink{group__Elm__General_ga13a0c231414b86e62f68afe3c6fb462b}{Elm\+\_\+\+Object\+\_\+\+Item}})\textquotesingle{}s\+:  
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\textcolor{comment}{/*\ ordering\ alphabetically\ */}}
\DoxyCodeLine{\textcolor{keyword}{static}\ \textcolor{keywordtype}{int}}
\DoxyCodeLine{\_index\_icmp(\textcolor{keyword}{const}\ \textcolor{keywordtype}{void}\ *data1,}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ \textcolor{keyword}{const}\ \textcolor{keywordtype}{void}\ *data2)}
\DoxyCodeLine{\{}
\DoxyCodeLine{\ \ \ \textcolor{keyword}{const}\ \textcolor{keywordtype}{char}\ *label1,\ *label2;}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ \textcolor{keyword}{const}\ \mbox{\hyperlink{group__Elm__General_ga13a0c231414b86e62f68afe3c6fb462b}{Elm\_Object\_Item}}\ *index\_it1\ =\ data1;}
\DoxyCodeLine{\ \ \ \textcolor{keyword}{const}\ \mbox{\hyperlink{group__Elm__General_ga13a0c231414b86e62f68afe3c6fb462b}{Elm\_Object\_Item}}\ *index\_it2\ =\ data2;}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ label1\ =\ \mbox{\hyperlink{group__Elm__Index__Item__Group_ga63b3be17a2bb05531ba1f31d2da82d7d}{elm\_index\_item\_letter\_get}}(index\_it1);}
\DoxyCodeLine{\ \ \ label2\ =\ \mbox{\hyperlink{group__Elm__Index__Item__Group_ga63b3be17a2bb05531ba1f31d2da82d7d}{elm\_index\_item\_letter\_get}}(index\_it2);}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ \textcolor{keywordflow}{return}\ strcasecmp(label1,\ label2);}
\DoxyCodeLine{\}}

\end{DoxyCodeInclude}
 The last interesting bit is the callback in the {\ttfamily \char`\"{}delay,changed\char`\"{}} smart event, which will bring the given grid item to the grid\textquotesingle{}s visible area\+:  
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\textcolor{keyword}{static}\ \textcolor{keywordtype}{void}}
\DoxyCodeLine{\_index\_changed(\textcolor{keywordtype}{void}\ \ \ \ \ \ \ \ *data\ \mbox{\hyperlink{group__Eina__Types__Group_ga82d751be730f849719ca292f9558be87}{EINA\_UNUSED}},}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \mbox{\hyperlink{group__Evas__Object__Group_ga9e19e6dd1f517a0ba437c0114d3e7c97}{Evas\_Object}}\ *obj\ \mbox{\hyperlink{group__Eina__Types__Group_ga82d751be730f849719ca292f9558be87}{EINA\_UNUSED}},}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \textcolor{keywordtype}{void}\ \ \ \ \ \ \ \ *event\_info)}
\DoxyCodeLine{\{}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__General_ga13a0c231414b86e62f68afe3c6fb462b}{Elm\_Object\_Item}}\ *item\ =\ \mbox{\hyperlink{group__Elm__General_ga6593639f5568153bff4960224a7fadcb}{elm\_object\_item\_data\_get}}(event\_info);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Gengrid__Item__Group_ga0f40aecfe40cac4fc2e557006077f4f9}{elm\_gengrid\_item\_bring\_in}}(item,\ \mbox{\hyperlink{group__Elm__Gengrid__Item__Group_gga40161f81baa7e0c89b14f84b80c71735a2752198ebed6ede5edf236c45307679e}{ELM\_GENGRID\_ITEM\_SCROLLTO\_IN}});}
\DoxyCodeLine{\}}

\end{DoxyCodeInclude}
 Note how the grid will move kind of randomly while you move your mouse pointer held over the index from top to bottom -- that\textquotesingle{}s because of the the random order the items have in the grid itself.

This is how the example program\textquotesingle{}s window looks like\+:  
\begin{DoxyImageNoCaption}
  \mbox{\includegraphics[width=\textwidth,height=\textheight/2,keepaspectratio=true]{screenshots/index_example_03}}
\end{DoxyImageNoCaption}


See the full \mbox{\hyperlink{index_example_02_8c-example}{source code}} for this example. 